Как вставить шорткод в шаблон WordPress
Разработчики WordPress включили поддержку шорткодов в версии 5.7 – это значительно упростило вставку различных функций плагинов в шаблоне. Он представляет собой короткий текст, помещенный в квадратные скобки. При этом нет необходимости вставлять сложный PHP, засоряя записи и страницы.
Шорткод – что это?
Его можно охарактеризовать следующим образом – короткий код для внедрения какой-либо функции в выбранном месте сайта. Состоит из легко запоминающегося текста. Он скрывает отображение длинного кода, записанного в PHP-файле, что упрощает работу для новичков и малоопытных вебмастеров. Для профессионалов shortcode позволяют экономить время на заранее разработанных функциях.
С их помощью можно выводить текст, оформлять контент, добавлять видео, слайды, изображения, графики и другие элементы. Такие плагины, как Nextgen Gallery, Visual Composer, Contact Form 7 используют шорткоды для размещения блоков и контента.
Регистрируется несколькими способами:
Известно, что большое количество дополнительных модулей и приложений подтормаживает работу ресурса, поэтому рассмотрим наиболее оптимизированный вариант. Следует зайти в functions.php, находящийся в корневой папке текущей темы и открыть его через текстовый редактор Notepad++. После чего можно вставить шорткод в тему WordPress. Регистрация осуществляется следующим образом:
На примере видно, как можно организовать регистрацию рекламного блока AdSense:
| // Регистрация функцию function add_adsense () < ‘; |
Сделать шорткод WordPress достаточно просто, что увеличивает производительность работы с контентом. После вставки shortcode, в указанном месте будет отображена реклама Google. Теперь необязательно использовать плагины или устанавливать громоздкий код в статьи или другие места сайта.
Следующий пример позволяет сократить время добавления атрибута nofollow к ссылкам на внешний ресурс. В обычной ситуации процесс происходит так: переключение в режим HTML, поиск ссылки, добавление тегов. Использование shortcode не требует переключения режимов – достаточно работать в визуальном редакторе. Регистрация:
$link =
explode ( “href”,
$content )
;
Для скрытия URL, следует обернуть его в зарегистрированные теги:
| [nf] Внешняя ссылка [/nf] |
Подключение стиля к контенту:
Добавив текст в теги, фоновая часть заполняется желтым цветом:
| [yb] Участок текста [/yb] |
Названия указываются на свое усмотрение – чем короче, тем проще запоминать и вписывать.
Часто используемые shortcode можно добавить в панель инструментов редактора. Вставить шорткод в страницу WordPress также легко, как в запись. Все действия выполняются через визуальный редактор.
Как вставить шорткод в шаблон WordPress
Ситуация с квадратными скобками не работает с файлами темы, применяется специальная функция «do_shortcode»:
Текст в квадратных скобках – название требуемого шорткода. Также, данная конструкция работает с виджетами.
Плагины для работы с shortcode
Система имеет по умолчанию несколько видов шорктодов, способных незначительно расширить стандартные функции:
Для пользователей, не разбирающихся в PHP, желающих качественно и производительно работать – существуют плагины с набором всех необходимых функций.
Shortcodes Ultimate
Лучшее решение для работы с шорткодами в мире
Перейти
Мировой лидер по коллекции элементов для расширения возможностей и визуальной составляющей при помощи шорткодов. Расширение предполагает внедрение кодов в посты, страницы и файлы темы. С его помощью можно создать слайдеры, кнопки, блоки, видео-вставки, карусели. В визуальном редакторе добавляется отдельная кнопка, открывающая меню плагина.
Обладателям премиальной версии предлагаются дополнительные элементы – 15 штук, 60 скинов и возможность создавать пользовательские шорткоды. Все это можно приобрести по отдельности либо вместе. Скачано более 700 000 копий, средняя оценка вебмастеров – 5 звезд. Версия со всеми аддонами обойдется в 59 долларов для одного сайта.
Column Shortcodes
Перейти
Отличный вариант для создания столбцов, достаточно вставить шорткод в страницу WordPress с необходимыми параметрами. В панели управления можно выбрать 10 колонок, каждая из которых отличается по ширине. Доступно редактирование отступов и подключение собственных стилей. Скачано более 100 000 копий, оценка пользователей – 4,5 из 5. На странице расширения размещена подробная инструкция и ответы на часто задаваемые вопросы.
WP Shortcode by MyThemeShop
Перейти
Интересное решение, в особенности для тех вебмастеров, которые часто меняют темы или их настройки. Все функции сохраняются даже при смене шаблона. Доступно около 24 шорткодов для создания кнопок, блоков, ценовых таблиц, переключателей. После установки, в редакторе записей/страниц появляется кнопка добавления shortcode. Во всплывающем окне имеется строка выбора и некоторые параметры. Настройка легкая и не требует особых навыков.
Распространяется на бесплатной основе, скачано более 70 000 раз. Оценка пользователей – 4,5 балла.
Bootstrap Shortcodes
Перейти
Плагин поможет сделать шорткод WordPress вебмастерам, использующим темы с включенной библиотекой bootstrap 3. Предлагается внушительный список функций. Основные доступные элементы:
Бесплатное расширение скачано более 50 000 раз, оценка вебмастеров – 5 из 5. Русский язык недоступен.
Shortcake
Плагин не позволяет вставить шорткод в тему WordPress, но отлично справляется с их добавлением в записи и страницы. Рекомендован для новичков, поскольку имеет простой интерфейс, не требует здания кода и включает обучающие материалы. Благодаря функции импорт/экспорт возможен обмен шорткодами с другими сайтами.
Основные возможности:
Распространяется на бесплатной основе. Скачан порядка 20 000 раз и оценен пользователями в 4 балла.
Заключение
Вставить шорткод в WordPress можно при помощи легкой функции, предварительно зарегистрировав его. С виджетами ситуации аналогичная. При добавлении shortcode в записи и страницы вовсе не возникает сложностей – вставляются в нужном месте в визуальном редакторе. Для расширения возможностей и производительности можно применить рассмотренные плагины.
Администратор WordPress
Блог про WordPress
Работаем c шорткодами в WordPress на примерах
Шорткоды часто используются в плагинах и темах WordPress как способ достичь дополнительную функциональность без необходимости правки и модифицирования файлов шаблона. При помощи шорткода можно просто прописать короткую исполнительную команду для работы той или иной функции прямо в вашей записи. Некоторые плагины и темы используют шорткоды для добавления в записи календарей событий, объявлений или же для вставки формы обратной связи. Шорткоды не только расширяют функциональность, они еще и просты в использовании. Скорее всего, вы уже встречали шорткоды в своей работе над сайтами и даже работали с ними, просто не догадывались с чем имеете дело. Если же вы все еще так и не поняли о чем идет речь, то ниже я вам приведу пример создания простого шорткода и как с ним работать, а также приведу ряд интересных возможностей придания вашим записям индивидуальности и дополнительной функциональности. Попробовав раз, вы оцените все удобство работы с шорткодами и, возможно, на практике примените полученные примеры.
Начнем с рассмотрения основных способов создания шорткодов и будем двигаться от простых к более сложным примерам. В конце я приведу вам несколько интересных примеров, некоторые из которых я использую на своем блоге.
Шорткоды впервые появились в WordPress, начиная с версии 2.5 и представляют из себя макросы, которые выполняют те или иные функции в тексте ваших записей. Если вы хотите более подробно о них почитать, то можно посетить специальный раздел в Кодексе WordPress, посвященном шорткодам, где им дается описание, а также приведены ряд примеров. Все функции шорткодов должны располагаться в файле functions.php вашего шаблона или в файле плагина, если вы намереваетесь его создать. Но для начала давайте приведу простой пример шорткода, чтобы вы уже, наконец, увидели его в работе. Это будет обычная строка, которая не выполняет никаких функций, но дает вам наглядный пример работы шорткода. Добавьте нижеприведенный код в файл functions.php:
Теперь добавьте макрос шорткода в любое место вашей записи:
В результате, выведется подчеркнутая строка синего цвета:
Ну что, надеюсь, разобрались? Согласитесь, довольно-таки удобное использование нужной нам функции в пределах записи. Это был простой пример, теперь давайте перейдем к более сложному, дадим шорткоду самому определить цвет текста с помощью заданного атрибута в функции.
В запись вставим следующий шорткод с атрибутом цвета:
В итоге, на выходе получаем: Привет, я шорткод! или:
В итоге, на выходе получаем: Привет, я шорткод!
Нижеприведенная часть кода нашей функции извлекает информацию из атрибута, которую ввел пользователь для переменной цвета. Если же пользователь не указал конкретный цвет для атрибута, то, по-умолчанию, строке будет назначен цвет синий.
Опять же, этот пример тоже является бесполезным, так как не выполняет никакой функции, а привел я его вам исключительно для ознакомления. А вот следующий вариант шорткода уже несет в себе некоторую функциональность:
Опять же, вставляем шорткод в нужное место вашей записи:
Вот, что получится, если вставить наш шорткод в какую-нибудь часть текста:
Шорткоды часто используются в плагинах и темах WordPress как способ достичь дополнительную функциональность без необходимости правки и модифицирования файлов шаблона. При помощи шорткода можно просто прописать короткую исполнительную команду для работы той или иной функции прямо в вашей записи.
На этом я закончим с бесполезными, но демонстрационными примерами, и теперь перейду к реальным примерам использования шорткодов.
Создание информационного блока
Этот небольшой пример позволит добавить вам небольшой информационный блок или объявление, например, в верхнюю часть вашей записи, чтобы привлечь внимание пользователей какой-нибудь важной информацией.
В результате получим небольшой блок, наподобие этого:
вставляете шорткод в вашу запись:
Изменяя цвет переменной, можно получить блоки разного цвета.
Добавлением соответствующих свойств CSS можно еще изменить размер блока, но это вы уже можете сделать сами на свое усмотрение.
Создаем кнопку загрузки
Процесс создания кнопки загрузки очень похож на процесс создания блока с сообщением, отличие заключается в том, что теперь мы применим некоторые стили CSS3 блоку, а внутрь добавим ссылку на скачивание.
а затем прописываем сам шорткод в записи:
в результате получим вот такую вот кнопку с ссылкой на скачивание:
Для того, чтобы контролировать размер и цвет кнопки, нужно создать класс CSS с тем же именем, что и переменные функции, а затем варьировать размером и цветом кнопки. Выше я продемонстрировал один из вариантов кнопки, которую можно сделать.
Создаем блок и кнопку вместе
Чем еще интересны и удобны шорткоды – это тем, что позволяют их объединять в единое целое для выполнения нескольких функций. Я не буду заново переписывать код функции, приведу всего лишь пример объединения шорткодов блока и кнопки:
Правда, существует одна небольшая проблема. По-умолчанию, WordPress не позволяет объединять вместе шорткоды, поэтому, чтобы обойти этот запрет, нужно вставить нижеприведенную строку в файл functions.php или файл плагина:
Это позволит спокойно объединять несколько шорткодов, несмотря на запрет WordPress.
Выводим похожие записи
Будем считать, что это еще один способ вывести похожие записи на сайте, только без плагина. Да и размещение такого списка внутри только одной записи, станет ее характерным отличием.
Ну, и как вы уже догадались, прописываем шорткод в нужном месте записи:
Создаем буквицу
Буквица выглядит очень эффектно и поможет вашим записям выглядеть по-иному, что сразу же выделит ваш сайт на фоне остальных.
Дополнительно пропишите еще стили CSS:
затем, шорткодом окружаем нужную нам букву:
Вывод статей из пользовательского типа записей
Допустим, вы создали пользовательский тип записи под названием “Новости” и желаем вывести все записи из нее на страницу с названием, например, “Статьи”. Сделать это можно при помощи кода:
Для показа записей из “Новости” на странице “Статьи” используем шорткод:
Показываем на странице записи из определенной категории
Очень похожий пример, что и выше, только теперь мы укажем ограничение в количестве выводимых записей из определенной категории:
в шорткоде указываем номер идентификатора рубрики, из которой нужно вывести записи и количество записей:
Вот и все. Теперь вы имеете представление о шорткодах и как ими и в каких случая пользоваться. Надеюсь, вы что-то возьмете для себя из этих примеров и примените на практике для своего сайта или блога.
Создание шорткодов в 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.
Шорткоды
Шорткоды – могут содержать в себе какой-то 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 — пишите. Я и моя команда будем рады вам помочь!