Как сделать свой шорткод wordpress

Создание шорткодов в WordPress CMS

Что такое шорткоды

Начиная с версии 2.5, разработчики WordPress ввели понятие «Shortcodes API». Этот функционал позволяет создавать и использовать макрокоды в страницах сайта или в записях блога. Например, простая и короткая запись добавит на странице целую фотогалерею.

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

Подготовка почвы

Прежде чем начать создавать что-либо, предлагаю свой вариант размещения файлов:

Практически в каждом руководстве предлагают создавать шорткоды прямо в файле functions.php. Скажу сразу: я — противник такого подхода. Вместо этого настоятельно рекомендую вынести все шорткоды в отдельный файл (includes/shortcodes.php) и подключить его в functions.php одной строкой. Это значительно разгрузит functions.php и сделает код более читабельным.

Заметка: WordPress, конечно, поддерживает подключение файлов через require, но очень не рекомендует делать этого. Вместо этого предлагается использовать get_template_part().

Подключение скриптов

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

Пример такой реализации:

Это полностью рабочий вариант, но скрипт будет загружаться на каждой странице, даже если он там не нужен (т. е. нет шорткода).

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

Пример такой реализации:

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

Вложенные шорткоды

Есть еще пара проблем, с которыми могут столкнуться начинающие разработчики:

Теперь — более детально.

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

Возьмем к примеру, шорткод, который создает прайсинг таблицу. Для этого необходимо подготовить три отдельных шоркода:

[price]
— [plan title=’Plan 1’ price=’99’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]
— [plan title=’Plan 2’ price=’499’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]
…
[/price]

В данном примере используется три шорткода: [price] [plan] [option].

add_shortcode( ‘price’, ‘price_code’ );
add_shortcode( ‘plan’, ‘plan_code’ );
add_shortcode( ‘option’, ‘option_code’ );

Для предотвращения использования внутренних шорткодов в качестве отдельных предлагается следующая схема:

Т. е. вывод кода на страницу происходит только во внешнем шорткоде, внутренние же просто возвращают полученные данные. Пример такой реализации приведен ниже.
Описание функции внешнего шорткода:

Описание функций внутренних шорткодов:

При этом подходе шорткод будет работать только в сборе, т. е. при правильном использовании, в других случаях ничего не будет выведено на экран (соответственно, ничего не сломается).

Конечно же, вы можете еще оптимизировать и усовершенствовать этот шорткод, но все же, думаю, основную идею продемонстрировать мне удалось.

Повторяющиеся шорткоды

Проблема заключается в следующем: нужно внутри шорткода использовать такой же шорткод. Наиболее частым примером в моей практике был шорткод для создания колонки. Т.е., к примеру, нужно реализовать разделение страницы на 2 части с помощью колонок и в первую колонку разделить еще на 2 колонки.

[column_half]
[column_half] Content [/column_half]
[column_half] Content [/column_half]
[/column_half]
[column_half] Content [/column_half]

К сожалению, для WordPress уже такая вложенность “не по зубам”. Верстка разлетится уже на втором контенте. Происходит это потому что при открытии шорткода WordPress сразу же ищет вторую (закрывающую) часть этого шорткода, т.е. в данном примере первая колонка будет закрыта на первом же вложенном шорткоде.

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

Заключение

В данной статье я рассмотрел наиболее частые проблемы, с которыми сам когда-либо сталкивался. Если же у вас есть что добавить, исправить, либо предложить свой вариант решения той или иной проблемы, не стесняйтесь писать в комментариях к этой статье.

Автор: Дмитрий Кабаков, Senior Front-end Developer.

Источник

Создание сайта на WordPress

Что как и почему в WordPress

Создание плагина: шорткоды

Рассмотрим примеры создания плагинов с шорткодами (shortcode).

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

Выбор имени плагина

Имя плагина должно быть уникальным, поэтому следует попробовать найти плагин с выбранным именем [ref text=»на сайте WordPress» url=» http://wordpress.org/extend/plugins/»] и в Интернет (например, в поисковой системе google).
WordPress ищет плагины в папке /wp-content/plugins, поэтому для того, чтобы установить плагин, его нужно поместить в эту папку. Потом его можно будет активировать на панели администрирования.

Создание папки и файлов плагина

Создание папки плагина и его php-файла с выбранным (уникальным) именем: myref и myref.php. (Если плагин будет состоять из одного php-файла, для него можно не создавать отдельную папку)
В начале php-файла плагина должно находиться его описание и лицензия:

Формально этого уже достаточно для создания плагина. Хотя этот плагин ничего не делает, он появится в списке плагинов, и его можно активировать.

Плагин может просто содержать функции, которые нужно вызывать в шаблоне, а также может реагировать на заданные события (при загрузке плагин сообщает WordPress, на какие события он будет реагировать, и как их обрабатывать.). Более сложные плагины управляются через панель администрирования.

Хуки (hooks)

Хуки обеспечивают привязку плагина к WordPress.

Сокращенный код (Shortcodes)

Поддерживаются шорткоды (shortcode) вида

и (форма с закрывающим тегом):

Функция-обработчик сокращенного кода может принимать следующие параметры

Регистрация обработчика:

Когда вызывается тег шаблона the_content (и отображается содержимое записи), shortcode API анализирует зарегистрированные шорткоды, выделяет их атрибуты и содержимое и передает их обработчику данного шорткода. В тело записи вместо тега (тегов) шорткода добавляется строка, возвращаемая обработчиком.

Еще один пример

Этот плагин просто позволяет использовать в записи php-функцию htmlentities().
Шорткод [enti]enti] (по умолчанию) выведет [enti], а [enti]enti text="&"] выведет [enti text="&"].

Содержимое только для зарегистрированных посетителей

Следующий плагин позволяет помещать на страницы и в записи блога содержимое, которое увидят только зарегистрированные посетители после входа в систему.
Поскольку содержимого может быть довольно много, удобнее использовать форму вызова плагина с закрывающим тегом [formember]. [/formember]

CSS-стили и JavaScript

Создание плагина: шорткоды : 2 комментария

Как добавить плагин в виджеты?

Источник

add_shortcode() WP 2.5

Добавляет новый шоткод и хук для него.

Для каждого шоткода может быть создана только одна функция обработчик. А значит, если другой плагин использует такой же шоткод, то ваша функция будет заменена на другую или наоборот (зависит от того в каком порядке подключаются функции).

Результат функции-обработчика шоткода всегда должен возвращаться, а не выводиться на экран.

Возвращает

Использование

Название шоткода, который будет использоваться в тексте. Например: ‘gallery’.

Название функции, которая должна сработать, если найден шоткод.

Функция получает 3 параметра, каждый из них может быть передан, а может нет:

$content(строка)
Текст шорткода, когда используется закрывающая конструкция шорткода: [foo]текст шорткода[/foo]
По умолчанию: »

Примеры

#1. Пример регистрации шоткода [footag foo=»bar»] :

#1.2. Установка белого списка атрибутов шорткода

Для того чтобы шорткод мог иметь только указанные нами параметры и у этих параметров были значения по умолчанию, нужно использовать функцию shortcode_atts():

#2. Регистрация шорткода с контентом

Пример создания такого шоткода: [baztag]здесь текст[/baztag] :

#3. Регистрация шоткода для классов

Если ваш плагин написан классом:

#4 Вставка iframe через шорткод

Этот пример показывает как создать шорткод, чтобы потом через него вставлять iframe.

#5 Вывод записи по ID через шорткод

#6 Подключение шаблонов темы в шорткоде

Пусть нам надо подключать через шорткод специально подготовленный файл:

Благодаря параметрам, которые можно передавать в шорткод, можно предусмотреть динамическое подключение нужного файла из папки. Доработаем пример:

Источник

Шорткоды в WordPress — правильное создание и вставка

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

Что такое шорткоды WordPress

Выглядит она примерно так:

Для чего вообще, это нужно?

Во-первых, такой вариант значительно упрощает вставку громоздкого кода. Гораздо легче задавать короткие коды на страницах, чем прописывать громоздкие скрипты.

Также это полезно при дальнейшем редактировании кода.

Вы создаете функцию и прикрепляете нужный код к определенному шорткоду. Далее такие шорткоды проставляете на страницах в нужных местах.

К примеру, вам нужно отредактировать код на всех этих страницах. В таком случае, не нужно редактировать каждую запись. Достаточно просто изменить код в самой функции, где создавали шорткод.

Это намного удобнее и экономит время. Да и к тому же безопаснее.

А вот если неправильно добавить сам код на страницу, то появятся ошибки. Сайт не будет работать должным образом.

Ну и во-вторых, по умолчанию, исполнение скриптов WordPress прямо в статьях запрещено. Это сделано для безопасности сайта.

То есть, если кто-то у вас в комментариях что-нибудь пропишет, то это не будет работать. Код не вступит в силу.

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

А если захотите что-то выводить в записях, то делайте это через шорткоды. Либо добавляйте код непосредственно в файлы установленной темы. Например, вывод рекламы вначале всех статей.

Также можно подключать и дополнительные плагины для вставки кода в статьях.

Создаем шорткоды в WordPress

Давайте теперь я покажу, как можно создавать свои шорткоды в WordPress. Как я говорил ранее, это урезанная версия исполняемого кода. Такие версии можно создавать самому и выводить в любых местах сайта.

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

Простой вывод без плагина

Чтобы было понятно, как все это работает, давайте создадим свой shortcode без плагина.

Это файл установленной темы. Именно через него добавляется основной функционал. От сюда и соответствующее название.

Итак, в этот файл добавляем вот такую функцию:

Она состоит из двух частей.

А выводить я буду простую фразу «Исполняемый код». Вам же рекомендую сюда вставить какой-нибудь код для вывода. Например, кнопки или реклама.

Вот в принципе, и все!

Функцию мы добавили и привязали к определенному короткому коду. Теперь идем в редактор статьи. Там в нужном месте прописываем этот шорткод WordPress.

Не забывайте про квадратные скобки!

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

Создание таких элементов кода очень полезно при оптимизации сайта.

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

К примеру, нужно вывести блок рекламы только в определенных статьях и местах.

Можно автоматом вывести в определенных статьях рекламу. Но вывести ее красиво, и чтобы в разных местах – это затруднительно.

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

Главное вначале вручную проставить их в нужных местах!

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

Помимо рекламы можно выводить и другие элементы на сайте. Например, подписку на e-mail рассылку и ссылки. А также кнопки, текстовые или графические предложения.

Shortcode WordPress с параметрами

Давайте усложним пример и в shortcode WordPress добавим свои параметры. Они пригодятся если нужно выводить один и тот же элемент, но немного в измененном виде.

К примеру, мне нужно вывести одну и ту же ссылку с разными анкорами. Чтобы не создавать под каждый анкор новый шорткод, мы просто при вставке зададим свои параметры.

В параметрах anchor и url прописываем свои значения.

В качестве исполняемого кода будет такая строка:

Здесь потом будут выводиться наши параметры. Также я указал открытие ссылки в новой вкладке.

Далее можете указать свое название функции и шорткода.

Теперь при вставке ссылки с другими параметрами не нужно создавать новый wp шорткод. Достаточно в редакторе вставить такой же короткий код, но со своими параметрами.

Вот как нужно вставить шорткод в страницу WordPress:

Можно выводить и без своих параметров. Вот так:

Тогда будут использованы те параметры по умолчанию, что были указаны в функции.

Для разных размеров изображений можно использовать такой пример.

В параметрах width и height задаем высоту и ширину картинки. У меня, это 100 px.

В качестве исполняемого кода прописываем такую строку, но уже со своим изображением:

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

Создаем двойной шорткод WordPress

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

Теперь в редакторе вставляем такой код со своим урлом ссылки:

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

Если нужно выделить текст и задать определенный стиль, то можно использовать такой вариант:

Тогда в редакторе выделенный фрагмент обрамляем двумя шорткодами. Получится так:

Но я рекомендую подключать CSS отельным файлом. Поэтому в примере лучше использовать так:

Плагин для создания шорткодов в WordPress

Есть специальный плагин для создания шорткодов WordPress. Называется Shortcoder. Он пригодится тем, кто не хочет вручную возиться с созданием пользовательских кодов.

Устанавливаете это расширение с бесплатного каталога Вордпресс. Переходите в меню «Настройки» —> «Shortcoder».

Создание шорткода с помощью плагина

В поле «Content» вставляем исполняемый код. Например, вывод рекламы. Чуть выше прописываем название латинскими буквами.

Жмем на «Create Shortcode».

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

Кнопка плагина Shortcoder в визуальном редакторе

Во всплывающем окне выбираем подходящий вариант короткого кода и нажимаем на «Insert Shortcode».

Выбираем подходящий короткий код

Плагин очень полезен. Особенно для новичков.

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

Как вставить шорткод в тему WordPress

Теперь поговорим о том, как правильно вставить шорткод в тему WordPress. Для начала начнем со вставки в сайдбар и описании таксономий.

Это очень важные функции.

К примеру, это очень хорошо поможет вам при оптимизации рубрик на сайте. Можно вывести определенные элементы и оформить описание более красиво и читабельно.

Итак, чтобы включить такую поддержку в описании таксономий, в файл functions.php нужно добавить такой код:

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

Чтобы это сделать, в файл functions.php добавляем следующий код:

При желании можно прикрутить поддержку коротких кодов в комментариях:

Для использования в анонсах постов, вставьте такую строку:

Теперь давайте рассмотрим, как можно добавить шорткоды WordPress в php файлы темы.

Иногда и такое необходимо.

Поэтому, чтобы этого избежать, свой шорткод нужно обрамлять в специальный php-контейнер:

Короткий код [reklama] заменяем на свой. Только так система поймет исполняемый код и без ошибок запустит его в действие.

На этом у меня все!

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

Источник

Шорткоды

Шорткоды – могут содержать в себе какой-то PHP-код и функции, которые можно задействовать прямо в контенте записей и страниц. Появились в версии WordPress 2.5.

Например можем взглянуть на шорткод галереи, который выглядит так:

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

Даже с приходом Gutenberg, вряд ли шорткоды в скором времени будут вытеснены блоками.

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

Так же, как у функции могут быть аргументы, так и шорткод может иметь собственные параметры. Ещё один пример с шорткодом:

В параметре ids перечислены ID изображений, входящих в галерею, параметр size — размер вставляемых изображений.

Стандартные шорткоды WordPress

В WordPress уже есть определённый набор шорткодов, например тот же шорткоды галереи, с которым мы уже познакомились ранее.

Другие стандартные шорткоды это:

Экранирование шорткодов

А точнее, как сделать так, чтобы шорткод присутствовал в контенте вашего поста, но не выполнялся? Или другими словами, как я вывел шорткоды в предыдущей главе поста, не выполняя их?

Всё, что нужно сделать, это обернуть его ещё в одни квадратные скобки, вот так:

Если же у вашего шорткода есть открывающий и закрывающий тег, то он будет выглядеть следующим образом:

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

Ну и про HTML-сущности тоже помним, да? [шорткод]

На самом деле именно в этом моменте можно кекнуть, потому что часто встречаю уроки по WordPress, где их отображают с пробелом, типо [ gallery] и при этом уточняют, что пробел нужно удалить 😹

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

1. Простой пример

2. Шорткод с параметрами (атрибутами)

Окей, я уже писал, что у шорткодов могут быть свои параметры, давайте теперь посмотрим как это делается.

3. Закрывающиеся шорткоды и шорткод внутри шорткода

Кроме того, вовнутрь закрывающихся шорткодов можно вставлять и другие шорткоды (благодаря функции do_shortcode()).

В соответствии с этим давайте переделаем наш код из предыдущего примера:

Теперь шорткод следующего вида [trueurl anchor=»главная»][misha][/trueurl] выведет ссылку на главную страницу вашего сайта (про шорткод [misha] я писал выше).

4. Используем буферизацию для вывода прямо в шорткоде

Иногда бывает, что никак не получается внутри шорткода возвратить результат, например мы используем функцию get_template_part() внутри. Что делать в таких ситуациях?

Решается это довольно легко – при помощи буферизации.

Добавляем кнопку вставки шорткода в визуальный редактор поста TinyMCE

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

PHP-код

Вне зависимости от того, будет ли ваша кнопка текстовая, либо с иконкой, будет ли она содержать дополнительные поля ввода (параметры шорткода) или нет — во всех случаях PHP-код регистрации кнопки будет одинаков.

В этом примере для получения URL папки с текущей темой я использовал функцию get_stylesheet_directory_uri(). true_button.js — собственно сама кнопка, создайте этот файл в директории с темой (или там, где вам удобно, но не забудьте в этом случае поменять путь к нему).

JavaScript. Пример простой кнопки

Текстовый вариант кнопки вставки шорткода в визуальном редакторе TinyMCE.

Кнопка с иконкой, выпадающим списком и с возможностью задавать параметры шорткода

Начну с того, что вставлю (а точнее заменю) код в файл true_button.js :

После вставки кода моя кнопка уже появилась и работает. Единственное только — у неё нет никакой иконки (ну кроме стрелочки вниз).

Сейчас нам понадобится немного CSS-кода. Прежде всего хочу сказать, что вы можете использовать:

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

Если использовали этот же способ и иконка не появилась — попробуйте прописать к ней абсолютный URL.

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

Если вы хотите использовать dashicons, то ваш CSS для иконки перца будет выглядеть примерно следующим образом:

Применение шорткодов в коде PHP

Тут всё сводится к использованию одной функции — do_shortcode().

do_shortcode()

Функция в качестве параметра может содержать лишь один шорткод:

Или шорткод и какой-то контент:

Популярный пример, позволяет получить или вывести содержимое поста с применением шорткодов при помощи функции get_the_content():

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

Ещё пара интересных примеров шорткодов

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Источник