КАК ЛЕГКО ВСТАВИТЬ ШОРТКОД В WORD PRESS В ШАБЛОН В СТРАНИЦУ И В ВИДЖЕТ

Шорткоды WordPress – это мощная функция, позволяющая с небольшим усилием делать крутые вещи. Из шорткодов можно делать почти все: встраивать интерактивные элементы или создавать сложные макеты страницы так же просто, как вставить одну строку кода.

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

Этот код выводит галерею с указанными идентификаторами изображений. Она будет иметь 4 столбца, а их максимальный размер будет «средним» (как определено WordPress).

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

Как видите, нет необходимости в любом дополнительном HTML-коде.

Шорткоды устраняют необходимость в сложных сценариях. Даже если у вас нет навыков программирования, можно легко добавлять динамическое содержимое с их помощью.

Они очень популярны среди разработчиков WordPress, поскольку помогают автоматизировать процесс создания контента и дизайна. Шорткоды – это для разработчиков WordPress то, что макросы – для аналитиков данных или комбинации клавиш для профессиональных графических дизайнеров.

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

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

Короче говоря, Шорткод = Ярлык + Код.

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

Краткая история шорткодов.

Шорткоды впервые пользовались популярностью благодаря программному обеспечению онлайн-форума под названием Ultimate Bulletin Board (UBB). В 1998 году они представили BBCode (Код доски объявлений), набор простых в использовании тегов, позволяющих пользователям легко форматировать свои сообщения.

Как легкий язык разметки, BBCode работает по тем же принципам, что и HTML, за исключением того, что он намного проще.

Вскоре после этого другие приложения для онлайн-форумов, такие как phpB, XMB Forum и vBulletin, добавили функции BBCode в свои доски объявлений.

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

По тем же соображениям безопасности WordPress предотвращает запуск PHP-кода внутри содержимого сайта. Чтобы преодолеть это ограничение, WordPress 2.5 представил функцию шорткодов в 2008 году с выпуском Shortcode API. Это оказалось одной из наиболее часто используемых функций многими разработчиками плагинов и тем WordPress.

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

В WordPress преимущественно два типа шорткодов:

Пример: для шорткода галереи (смотри пример выше) не требуется закрывающий тег. Мы добавляем все необходимое с разными атрибутами.

Пример: короткий код подписи используется для обёртывания подписи вокруг любого содержимого. В основном он используется для добавления подписей к изображениям, но работает с любым элементом HTML.

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

WordPress поставляется с 6 шорткодами по умолчанию:

audio: вставляет аудиофайлы на веб-сайт. Включает в себя простые элементы управления, такие как воспроизведение и пауза.

caption: в основном используется для добавления подписей к изображениям, но вы можете использовать его для любого элемента HTML.

embed: развертывает функцию oEmbed по умолчанию. Этот шорткод позволяет устанавливать различные атрибуты для вставок, например их максимальные размеры.

gallery: вставляет простую галерею изображений. Можно использовать атрибуты, чтобы определить, какие изображения используются, и настроить вид галереи.

playlist: отображение коллекции аудио- или видеофайлов с помощью этого закрывающегося короткого кода. Вы можете предоставить ему прохладный «темный» режим с помощью атрибута стиля.

video: вставляет видеофайл и воспроизводит его с помощью простого видеопроигрывателя. Этот шорткод поддерживает встраивание видео в следующих форматах: mp4, webm, m4v, webm, ogv, wmv, flv.

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

Как использовать шорткоды WordPress.

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

Использование шорткодов WordPress на страницах и публикациях.

Сначала перейдите к редактору страницы / публикации, куда вы хотите вставить шорткод. Если вы используете редактор Gutenberg, то можете добавить тег шорткода в отдельный блок Shortcodes. Он находится в разделе Виджеты.

Специальный блок шорткодов Гутенберга

Все еще используете классический редактор (или плагин)? Вы можете ввести свои теги шорткода классическим способом. Некоторые могут даже иметь кнопку на экране редактора, чтобы легко их вставить.

Добавление шорткода в классическом редакторе.

Использование шорткодов WordPress в виджетах боковой панели

Вставьте шорткод в виджет «Текст» и сохраните его, посетите интерфейс своего сайта и посмотрите на результат шорткода на боковой панели.

Версии WordPress 4.8 и ниже не поддерживают шорткоды в виджетах боковой панели.

Использование шорткодов WordPress в верхнем и нижнем колонтитулах.

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

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

Вам нужно добавить следующий код к header.php, footer.php или любому из файлов шаблонов вашей темы:

Это выведет короткий код в том месте, куда вставлен код.

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

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

Что делает Shortcode API?

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

С помощью шорткодов можно добавить почти любую функцию на веб-сайт.

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

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

Понимание основ Shortcode API.

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

Если найден зарегистрированный шорткод, API Shortcode берет его на себя и возвращает исходные данные шорткода(ов). Возвращенная выходная строка заменяет тег шорткода в месте его добавления.

Вы регистрируете шорткод в WordPress с помощью функции add_shortcode(). Вот как это делается:

add_shortcode( ‘shortcode_name’, ‘shortcode_handler_function’ );

Функция обработчика короткого кода определяется следующим образом:

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

Эта исходящая строка заменяет макрос короткого кода на интерфейсе сайта. То, что вы в конечном итоге видите в браузере, – это данный результат.

Куда добавить собственные сценарии шорткода?

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

Если вы добавляете его в файл темы, то запустите функцию add_shortcode() как есть.

Но если добавляете его в плагин, рекомендуем инициализировать его только после полной загрузки WordPress. Вы можете убедиться в этом, обернув функцию add_shortcode() в другую функцию. Это называется функцией обертки:

Функция add_action() подключает функцию shortcodes_init для запуска только после завершения загрузки WordPress (это называется крючком ‘init’ ).

Как создать собственный шорткод в WordPress (уровень для начинающих)?

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

Чтобы выполнить следующие действия, нужно знать, как работать с PHP-кодом и редактировать файлы темы WordPress.

Мы начнем с самого простого шорткода, а затем перейдем к более сложным.

Пример 1. Шорткод с использованием 2024

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

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

Начнём с создания плагина. Создайте новую папку в каталоге /wp-content/plugins/.

Обратите внимание на расположение каталога плагинов. Назовем плагин «salcodes», но можно называть его как угодно.

В каталоге плагинов salcodes создайте файл PHP с таким же названием (salcodes.php). После завершения добавьте такой заголовок в файл плагина:

/*Plugin Name: SalcodesVersion: 1.0Description: Output the current year in your WordPress site. Author: Salman RavoofAuthor URI: https://www.salmanravoof.com/License: GPLv2 or laterLicense URI: https://www.gnu.org/licenses/gpl-2.0.htmlText Domain: salcodes*/

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

Сохраните файл плагина. Пора проверить, работает ли шорткод должным образом.

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

Как и ожидалось, работает.

Поздравляем с достижением первого этапа!

Шорткод, который вы создали, не имеет связанных с ним $attributes или $content переменных. Вы узнаете, как их использовать в следующих примерах.

Шорткод для кнопки CTA.

Давайте создадим настраиваемый шорткод кнопки CTA. Он также самозакрывается (простите, что не используем $content, подождите до следующего примера).

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

Поскольку конечный результат является элементом кнопки, его атрибуты HTML, такие как href, id, class, target и label, можно использовать для его легкой настройки.

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

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

add_shortcode( ‘cta_button’, ‘salcodes_cta’ );

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

Если вы хотите установить ссылку по умолчанию в качестве URL-адреса домашней страницы сайта, можете воспользоваться функцией home_url() WordPress.

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

Вывод HTML-кнопки CTA без атрибутов.

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

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

/** Enqueuing the Stylesheet for the CTA Button */

Функция salcodes_enqueue_scripts() определяет глобальную переменную $post, а затем подтверждает два условия с помощью:

Если оба условия соответствуют действительности, функция регистрирует и ставит в очередь таблицу стилей style.css, содержащуюся в папке CSS. Функция plugin_dir_url( $file) позволяет легко получить URL-адрес каталога плагина.

Код CSS здесь не укажем, но его можно найти в исходном коде, ссылку на который размещен в конце этого раздела.

Обратите внимание на атрибуты специальной ссылки, цвета, размера и этикетки.

На рисунке ниже показано, как кнопка CTA выглядит на интерфейсе:

Кнопка CTA теперь имеет новый URL-адрес, цвет, размер и метку.

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

Шорткод с использованием $content

Давайте начнем с регистрации шорткода и определения его функции обработчика.

add_shortcode( ‘boxed’, ‘salcodes_boxed’ );

В этом примере мы изменяем содержимое с помощью встроенных стилей CSS.

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

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

Если вы хотите добавить шорткоды, у Gutenberg есть специальный блок для добавления шорткодов. Блоки – это новые шорткоды.

Это объясняет, почему все популярные шорткоды превращаются в блоки. Многие разработчики WordPress перестроились, чтобы их продукты и услуги работали исключительно с редактором блоков (Гутенберг).

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

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

В WordPress наверняка есть много шорткодов, которые можно использовать, наши любимые Shortcodes Ultimate и Shortcodes.

И если вы не можете найти нужный, вы можете создать его самостоятельно.

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

Обнаружила недавно, что многие не знают, как вставлять шорткоды в вордпресс или вывести скрипт на сайте с иным движком. А те кто знают, куда вставлять шорткод в вордпресс, и как в коде шаблона темы сайта сделать PHP вывод шорткода, нередко допускают серьезные ошибки. И в итоге потом они пеняют на то, что либо плагин у них или шорткод не работает, либо вообще что-то с шаблоном сайта не так. Но, на самом деле, все очень просто и ошибки случаются в основном из-за невнимательности или незнания синтаксиса и пунктуации. А чтобы таких ошибок было меньше, я предлагаю пройти курсы Frontend разработки.

Специально для тех, кто и так все знает, а просто ищет быстрый ответ, как вставить шорткод в шаблон wordpress или на другой движок, то вот, пожалуйста, используйте этот код:

Однако не забывайте про пунктуацию! Кавычки в вашем шорткоде и в php коде должны быть разными.

Что такое шорткод (shortcode), и для чего он нужен?

Shortcode – это от англ. «короткий код». Используется он, в основном, при создании плагинов или модулей, предназначенных для работы с системами управления контентом (CMS), например, WordPress, Joomla и др. Проще говоря, этот короткий код является неким ярлыком, который, при добавлении на сайт, подтягивает за собой весь большой код из плагина.

Выглядит шорткод обычно так:  или так  или даже просто в одно слово

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

Как это работает?

а всего лишь вот такой короткий код (Shortcode) в одну строку:

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

А как вставить шорткод слайдера прямо в шаблон wordpress в php-код?

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

Такую «функцию» шорткода можно вставить в php-файл в нужное вам место на сайте. Например, в header.php, где-нибудь после body или, может быть, в sidebar.php, а лучше всего в файл шаблона страницы (он может называться как-нибудь так content-page.php), в результате, вы получите тот же слайдер, но уже встроенный в дизайн самого сайта.

Однако нужно быть очень внимательными при выводе шорткода в шаблоне wordpress в php-файлах. Для этого нужны хотя бы элементарные знания php. Поскольку, если его «не туда» вставить в php-файле, то на сайте будет выведена ошибка.

Как вывести шорткод в php в wordpress, если нет готовой php-функции в плагине?

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

Что делать в этом случае, ведь нам нужно вставить шорткод в шаблон wordpress и непосредственно в php-файл на сайте? В таком случае необходимо просто самим обернуть шорткод php-функцией вывода, которая была показана в самом начале статьи. В результате, с учетом нашего шорткода, у нас получиться вот такой вид php-функции:

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

Основные ошибки! Или почему не работает шорткод wordpress?

В начале статьи я уже описывала, как правильно добавить шорткод в wordpress, и как вставить шорткод в PHP. Давайте теперь все подытожим.

На самом деле, способов добавления существует два, а именно:

Как вы можете заметить, отличаются они между собой только кавычками — одинарными и двойными. Синтаксис языка php очень внимательно относиться к таким кавычкам. И если внутрь второй функции, которая с двумя кавычками, вы вставляете шорткод также с двумя кавычками, например, такой как у нас был :то вам будет выдана ошибка на сайте.

Для того, чтобы ошибок не было и ваш shortcode работал нормально, нужно чтобы были разные кавычки. Например, так:

Добавить любой из первых двух шорткодов в шаблон WordPress можно прямо в редакторе. Для этого найдите в редакторе сайта подходящий php-файл, который управляет «местом» на сайте, где вы хотите вывести ваш слайдер. Найти это место вы можете в инструментах разработчика прямо в вашем браузере, нажав сочетание клавиш Ctrl+Shift+I.

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

Всем спасибо! Я старалась объяснить как можно понятнее и затронуть сразу несколько вопросов. Надеюсь, вам помогла моя инструкция по выводу шорткода в шаблоне WordPress.

P. S: Кстати, такой принцип вставки шорткода в php будет работать на любых сайтах, независимо от того, на каком движке (CMS) они работают.

Вставить шорткод в запись или страницу

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

В классическом редакторе WordPress

Если вы любите пользоваться классическим редактором, то входим в статью и во вкладке визуально в необходимое место нужно вставить. Разберу на примере форм от плагина Contact Form 7.

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

Не важно где выводить во вкладке Визуально или Текст (html редактор), шорткод сработает. Перед каждой проверкой очищаем кэш.

В Gutenberg

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

Нажимаем на предварительный просмотр и видим ту же картину. Простые методы прошли переходим к более сложным.

В плагине Elementor

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

Инструмент в elementor

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

Вставить напрямую в шаблон

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

С помощью функций темы

Раздел Code Editor

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

В PHP документе

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

То есть в нашем случае получится такая картина:

Хочу разместить форму обратной связи под постами. Какой файл у вас отвечает за вывод того или иного элемента предсказать не могу. В моем случае content-single.

Куда вставлять PHP

Обратная связь под контентом

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

Разумное решение, безопасность превыше всего, но если набрались смелости залить в vidgets WordPress, то читаем дальше.

Виджет текст

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

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

add_filter( ‘widget_text’, ‘do_shortcode’ );

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

С помощью плагина

Существует отличный плагин скачиваем или устанавливаем из админки WordPress, так он выглядит в поиске.

Это 100% способ, если он не помог, то причина скорее всего в ядре WordPress. На этом закончу в статье разобрались как вставить шорткоды в WordPress различными методами и способами, напишите пожалуйста, статья вам помогла?

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

В этой статье мы расскажем, как легко добавить шорткод в WordPress, а также создавать кастомные шорткоды с помощью Shortcode API.

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

Шорткоды — это ярлык кода, который позволяет добавлять динамический контент к различным типам записей, боковым панелям и шаблонам.

Синтаксис шорткода представляет собой текст (ключевое число) внутри квадратных скобок.

Простой шорткод без параметров выглядит так:

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

Шорткод с текстом в качестве параметра обычно выглядит, так:

Косая черта может применяться, как в одиночных, так и в контентных шорткодах:

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

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

Это означает, что вы можете писать HTML-разметку в своих постах, но не можете выполнить PHP-код и сценарии JavaScript.

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

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

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

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

Если вы используете редактор Gutenberg, добавьте новый блок с типом Шорткод в процессе редактирования записи:

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

Для вставки шорткода в шаблон WordPress используйте функцию do_shortcode():

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

В качестве примера напишем простой кастомный шорткод с помощью функции add_shortcode(), который вернет некоторый результат.

Удаление шорткодов в WordPress

Чтобы удалить шорткод воспользуйтесь функцией remove_shortcode(). Функция принимает лишь один параметр: имя шорткода, который требуется снять с регистрации.

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

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

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

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

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

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

gallery size= ids=

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

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

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

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

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

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

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

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

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

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

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

В качестве примера я написал шорткод, который просто вставляет ссылку в пост, которая открывается в новой вкладке браузера target=»_blank». Не думаю, что на деле он может быть полезен, но для нас сейчас главное — понять сам принцип работы шорткодов.

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

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

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

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

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

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

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

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

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

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

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

tinymce. PluginManager.add, editor, url // true_mce_button — ID кнопки
editor.addButton, // true_mce_button — ID кнопки, везде должен быть одинаковым
text: , // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку
title: , // всплывающая подсказка
icon: , // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс
onclick:
editor.insertContent;

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

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

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

tinymce. PluginManager.add, editor, url // id кнопки true_mce_button должен быть везде один и тот же
editor.addButton , // id кнопки true_mce_button
icon: , // мой собственный CSS класс, благодаря которому я задам иконку кнопки
type: ,
title: , // всплывающая подсказка при наведении
menu: // тут начинается первый выпадающий список

text: ,
menu: // тут начинается второй выпадающий список внутри первого

text: ,
onclick:
editor.windowManager.open
title: ‘Задайте параметры поля’,
body:

type: , // тип textbox = текстовое поле
name: , // ID, будет использоваться ниже
label: ‘ID и name текстового поля’,
value: // значение по умолчанию
,

type: , // тип textbox = текстовое поле
name: ,
label: ‘Значение текстового поля по умолчанию’,
value: ,
multiline: , // большое текстовое поле — textarea
minWidth: , // минимальная ширина в пикселях
minHeight: // минимальная высота в пикселях
,

type: , // тип listbox = выпадающий список select
name: ,
label: ,
: // значения выпадающего списка
text: , value: , // лейбл, значение
text: , value:

,
onsubmit: e // это будет происходить после заполнения полей и нажатии кнопки отправки
editor.insertContent + e.data.textboxName + + e.data.multilineName + + e.data.listboxName + ;

;

,

text: ,
onclick:
editor.insertContent;

,

text: ,
onclick:
editor.insertContent;

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

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

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

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

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

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

i
/* выбираем иконку и узнаем ее код тут https://developer.wordpress.org/resource/dashicons/ */

20px /* можно подкорректировать размер шрифта, если не устраивает*/

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

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

Do_shortcode()

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

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

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

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

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

Пишите, если нужна помощь с сайтом или разработка с нуля.

Шорткоды в WooCommerce помогут вам произвольно вывести товары или категории товаров на любых страницах вашего интернет-магазина. В этом уроке вас ждёт обзор всех шорткодов, доступных по умолчанию. Расскажу, как они работают и как мы можем настраивать их.

Также рекомендую вам мой видеокурс по созданию интернет-магазина на WooCommerce с нуля, совсем без знаний кода!

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

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

Вы можете использовать их например в Страницах или Записях. Для этого вам нужно всего лишь вставить шорткод в содержимое.

Если у вас на сайте используется визуальный редактор Gutenberg, то ситуация немного изменяется – используйте блок «Шорткод», вот так:

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

Шорткоды системных страниц WooCommerce

В WooCommerce есть некоторые шорткоды «с подвохом». Я их назвал так по очень простой причине – эти шорткоды вроде бы и есть, но вы не можете их использовать 😯 (пока что, возможно в будущем это изменится). Тем не менее я расскажу про них вкратце сейчас.

Как вы знаете, WooCommerce создаёт несколько системных страниц и наполняет их как раз этими шорткодами, например:

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

Так что по этим шорткодам – можете попробовать, но то, что будет работать, не факт.

[woocommerce_order_tracking] – форма отслеживания заказа

Шорткод позволяет вывести форму, в которой пользователи смогут ввести свой ID заказа и email и отследить его:

[products]

Давайте попробуем с ним поработать и разберём различные ситуации его использования.

Количество выводимых товаров и пагинация

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

Вот что он выведет:

По сути мы получили все товары интернет-магазина, разделённые по страницам, выводятся в 5 колонок и на одной странице 5 товаров, что соответствует параметрам columns и limit.

Сортировка товаров

За сортировку товаров в пределах шорткода отвечают всего два параметра – order и orderby. Давайте о них поговорим.

В качестве примера выведем 3 самых дорогих товара на сайте.

Дэээ, стильные очки – самый дорогой товар на сайте!

Рекомендуемые товары

Рекомендуемые товары в WooCommerce – это те, которые отмечены звёздочкой, либо галочкой в настройках видимости в каталоге.

Шорткод также принимает параметр visibility, который позволяет не только вывести рекомендуемые товары, но даже те, которые скрыты из каталога например.

Так как первоначально мы хотели вывести именно рекомендуемые товары, то давайте так и сделаем. Например выведем 3 самых дорогих рекомендуемых товара.

Определённые товары по ID и артикулу

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

На случай, если у вас возникают вопросы с получением ID или артикула товаров:

Товары по атрибутам

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

Итак, параметры, которые нам здесь могут пригодиться:

Также, если предположить, что у нас на сайте товары только трёх цветов – чёрный, белый и красный коралловый, то можем также вывести товары красного кораллового цвета вот таким способом:

Товары из категорий и меток

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

Допустим, мы хотим вывести товары, которые не находятся в категории vip.

Товары на распродаже

on_sale – Укажите этот параметр в значение true, для того, чтобы вывести все товары на распродаже.

[product_categories]

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

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

[product_page]

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

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

Этот шорткод мы используем только на странице товара или внутри цикла товаров!

• limit – количество товаров, которые нужно отобразить. По умолчанию 4.
• columns – во сколько колонок отображаем товары? По умолчанию 4.

Выводим похожие товары и сортируем по цене:

[add_to_cart]

Этот шорткод выводит цену и кнопку добавления в корзину, если товар вариативный, то ссылку перехода на страницу товара.

[add_to_cart_url]

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