Как вставить шорткод в шаблон wordpress


WordPress  — мощная издательская система, одинаково удобная как для начинающих блогеров, так и для создания любых сайтов, форумов, соцсетей, магазинов и т.д.

Обычно для каждого применения подбирается соответствующий шаблон (template), но иногда его возможностей не хватает.

Вот тут на помощь приходят шорткоды, с помощью которых можно внести в Вордпресс собственную «изюминку».

Что такое шорткоды и как они работают

Шорткод — это короткий код (shortcode), который вставляется непосредственно в текст страницы, заголовка, виджета — то есть в контент и расширяет возможности Вордпресса.

С его помощью можно красиво оформить текст, разбить его на колонки, вставить на страницу содержание, кнопку, аудиоплеер, форму для заказа и множество других возможностей, которые отличают ваш Вордпресс от всех других.

Если отсутствует обработчик конкретного шорткода, то его вызов на странице будет выглядеть как обычный текст.

В данной статье намерено использованы имена несуществующих шорткодов, чтобы вы видели, как выглядит вызов шорт кода, а не результат его работы.

Типы шорткодов по структуре


Они бывают без параметров, с параметрами и с контентом.

Шорткоды без параметров

Иногда достаточно только вызвать шорткод, чтобы он выполнил строго определённую функцию. Никаких параметров ему передавать не нужно.

Например, такой код выводит горизонтальную линию. Её вид определяется в таблице стилей.

Этот вызов выводит текущий год. Удобно, чтобы не редактировать тексты каждый год.

Шорткоды с параметрами

Порой нужно передать параметры, чтобы получать разные результаты.

Например, вот так вставляется красивая кнопка, стиль которой должен быть прописан в таблице стилей.

Он содержит два параметра: title  — это надпись на кнопке, например, Заказать, Подписаться и т.д.

url — это адрес перехода по клику.

Вот так можно вставлять цену в рублях, которая автоматически переводится из цены в долларах по текущему курсу ЦБ.

Здесь параметр s — это цена в долларах.

Шорткоды с контентом

Они состоят из двух частей, между которыми может быть любой контент поста, виджета и т.д.

Вот так можно выделить фрагмент текста или часть поста, «подложив» под него цветную подложку:

Параметр color задаёт цвет подложки в привычном 16-ричном коде.

А вот так можно выводить текст в две колонки одинаковой ширины:

Как сделать шорткод для Wordpress


Шорткод в коде php состоит из функции, которая его обрабатывает, и из команды, которая назначает коду соответствующую функцию.

Вот типичный шорткод для кнопки:

В данном примере функция имеет имя ha_but. Ей передаются два параметра — title и url. Причём для title назначено значение по умолчанию Перейти. Если при вызове кода параметр title пропустить, то на кнопке по умолчанию будет надпись Перейти.

Внутри функции могут вызываться другие функции, подключаться файлы и т.д. Функционал шорткода ограничивается только вашей фантазией и навыками в программировании.

Затем функция возвращает результат свой работы с помощью return.

Функция add_shortcode назначает для шорткода по имени but функцию-обработчик по имени ha_but.

А вот стили для кнопки жёлтого цвета во всю ширину страницы:

Как вставить шорткод в шаблон WordPress

Вставить функцию — обработчик шорткода можно прямо в файл, ответственный за вывод одиночных постов — обычно это single.php. Тогда данный шорткод будет работать только в постах.

Лучше вставить его в файл functions.php, который есть в любой теме Вордпресса. Тогда шорткод будет работать на всех страницах, виджетах и т.д.


Однако, если вы обновите или смените шаблон — шорткоды обрабатываться перестанут. Если планируется в будущем менять дизайн блога, то код всех шорткодов лучше разместить в одном файле, например, shortcodes.php, а его разместить в папке my в корне сайта.

В этом случае нужно организовать вызов, вставив в файл functions.php команду require_once( ‘my/shortcodes.php’ );

После смены или обновления темы Вордпресса не забудьте заново прописать эту команду.

Как вставить шорткод в страницу WordPress

Чтобы шорткод сработал, в нужное место контента нужно вставить его вызов, состоящий их квадратных скобок, имени шорткода и параметров. При этом можно оформить его любыми стилями, как и обычный текст поста.

Надеюсь, примеров достаточно, чтобы вы могли сами создать шорткод wordpress, который решает нужные вам задачи.

Видео урок по созданию более сложных шорткодов смотрите здесь:

Скачайте книгу «Как написать миллион» и узнайте, как получать пассивный доход от своего сайта на Wordpress.

vrogov.ru

Что же такое шорткод WordPress?

Короче, шорткод — это специальный тег, который вы можете вставить в статью и которое будет заменен другим контентом при фактическом просмотре сообщения на сайте. Если вы когда-либо встраивали галерею WordPress в свой блог, то вы уже видели встроенный короткий код.


Когда вы загружаете страницу блога с коротким кодом [nggallery id=1], WordPress заменяет шорткод [nggallery id=1] всем кодом, который фактически отображает галерею со вставленными вашими изображениями с определенным ID.

Как видно из приведенного выше примера, шорткод похож на тег HTML, но заключенный в квадратные скобки вместо угловых скобок. Этот код подменяется другим кодом, когда страница действительно загружается в веб-браузере. Действительно здорово что WordPress позволяет создавать собственные пользовательские шорткоды, чтобы отображать практически все! Вы можете использовать его для чего хотете, например вывода видео с Youtube, показа вашего последнего твита или даже настройки его — как вам нравится.

Если вам все еще интересно, давайте рассмотрим пример. Предположим, я хочу вывести объявление AdSense в свой пост. Я мог бы перейти в режим HTML-редактора WordPress, скопировать и вставить в него блок кода Adsense, но это было бы утомительно и отвлекало бы на переключения видов редактора в моем посте. Кроме того, если бы я захотел изменить свой рекламный блок, мне пришлось бы вернуться к каждому сообщению, чтобы изменить его на новый. Более простой способ и более надежный способ добавления блока Adsense, где бы я ни захотел — это использовать шорткод adsense.

Шорткод может выглядеть следующим образом:

[adsense]

Когда вы на самом деле смотрите сообщение на своем сайте, шорткод будет заменен рекламным блоком Adsense. Итак, как создать этот шорткод? Скорее всего вам потребуется как-то сказать WordPress, чтобы он заменил каким-то образом шорткод на то, что вам нужно. Давайте посмотрим, что для этого нужно сделать дальше.

Как создать шорткод?


К счастью, в ВордПрессе реализовано довольно просто создание собственных шорткодов, поэтому давайте фактически начнем реализацию шорткода [adsense]. Первое, что нам нужно сделать — это определить функцию, которая выводит фактический код Adsense. Весь следующий код надо будет добавить в файл functions.php вашей теме. Все понятно? Хорошо, давайте посмотрим на эту функцию.

  function zacompom_adsense($atrs) {  	return '<script type="text/javascript"><!--  	google_ad_client = "pub-123456789012345";  	/* 468x60, created 21/05/14 */  	google_ad_slot = "1234567890";  	google_ad_width = 468;  	google_ad_height = 60;  	//-->  	</script>  	<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';  }  

Эта функция довольно проста — она ​​просто возвращает мой код Google-Adsense в виде строки. Эта функция возвратит все, что вы там напишите — будь-то виджет Twitter, какое-то специализированное меню сайта или просто какое-то сообщение или контент.


Теперь, когда у нас есть функция, возвращающая то, что мы хотим, как мы можем привязать ее к короткому коду? Теперь здесь на сцену ВордПресс выходит WordPress API. Еще раз посмотрим, как мы это сделаем, а затем объясним, что происходит. Вот призыв к настройке шорткода adsense.

add_shortcode('adsense', 'zacompom_adsense');

Вот оно! Первым переданным параметром является имя шорткода, поэтому в нашем случае «adsense» сообщает WordPress о создании короткого кода [adsense]. Второй параметр обозначает функцию, которая будет вызываться при обнаружении нового шорткода. Опять же, в нашем случае, ‘zacompom_adsense’ говорит WordPress заменить [adsense] результатами нашей функции zacompom_adsense.

Не плохо? Теперь это очень простой шорткод, WordPress позволяет вам делать гораздо больше с вашими шорткодами, включая добавление параметров (может быть, вы хотите выбрать между блоками adsense?). Полный список API можно увидеть в WordPress Codex.

Как использовать мой шорткод?

Эта последняя часть самая простая, просто добавьте шорткод [adsense] в HTML или визуальные представления редактора поста или страницы. Это оно! Вы создали свой первый шорткод. Поздравляю!

На самом деле и поздравлять то не с чем))) Просто сделали то, о чем давно мечтали. Теперь вы можете спокойно делать свои шорткоды и вставлять их куда вам нужно!

На этом буду закругляться, до скорых встреч!


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.