CMS ,

WordPress ,

Разработка веб-сайтов

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

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

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

1. Подключение сторонних скриптов и запуск только при наличии шорткода на странице.
2. Многоуровневый шорткод.
   • Составной шорткод.
   • Вложенность шорткодов.

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

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

/
/Includes/
shortcodes.php
…
functions.php

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

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

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

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

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

Function foobar_func($atts) { return "foo and bar"; } add_shortcode("foobar", "foobar_func"); function foo_script () { wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js"); wp_enqueue_script("foo-js"); } add_action("wp_enqueue_scripts", "foo_script");

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

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

1. Определить шорткод как отдельный класс.
2. Добавить флаг, который определит есть ли данный шорткод на странице.
3. Загружать скрипт только по флагу присутствия шорткода.

Вот и все…

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

Class foobar_shortcode { static $add_script; static function init () { add_shortcode("foobar", array(__CLASS__, "foobar_func")); add_action("init", array(__CLASS__, "register_script")); add_action("wp_footer", array(__CLASS__, "print_script")); } static function foobar_func($atts) { self::$add_script = true; return "foo and bar"; } static function register_script() { wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js"); } static function print_script () { if (!self::$add_script) return; wp_print_scripts("foo-js"); } } foobar_shortcode::init();

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

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

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

• Создание многоуровневого шорткода (состоящий из нескольких).
• Использование шорткода внутри такого же шорткода.

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

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

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

-


- …
-
-
- Option 1
- Option 2
- …
-
…

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

add_shortcode("price", "price_code");
add_shortcode("plan", "plan_code");
add_shortcode("option", "option_code");

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

Price -> вывод кода на страницу
Plan -> получение данных
Option -> получение данных

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

Function price_code ($atts, $content) { // инициализация глобальных переменных для прайс планов $GLOBALS["plan-count"] = 0; $GLOBALS["plans"] = array(); // чтение контента и выполнение внутренних шорткодов do_shortcode($content); // подготовка HTML кода $output = "

"; // вывод HTML кода return $output; }

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

Function plan_code ($atts, $content) { // получаем параметры шорткода extract(shortcode_atts(array("title" => "", // Plan title name "price" => "0", // Plan price), $atts)); // Подоготавливаем HTML: заголовок плана $plan_title = "

"; // Подоготавливаем HTML: стоимость $f_price = round(floatval($price), 2); $f_price = ($f_Price > 0) ? $f_Price: 0; $s_price = "$".$f_Price; $price_plan = ""; // инициализация глобальных переменных для опций $GLOBALS["plan-options-count"] = 0; $GLOBALS["plan-options"] = array(); // читаем контент и выполняем внутренние шорткоды do_shortcode($content); // Подоготавливаем HTML: опции $plan_options = ""; // Подоготавливаем HTML: компонуем контент $plan_div = $plan_title; $plan_div .= $price_plan; $plan_div .= $plan_options; // сохраняем полученные данные $i = $GLOBALS["plan-count"] + 1; $GLOBALS["plans"][$i] = $plan_div; $GLOBALS["plan-count"] = $i; // ничего не выводим return true; } function option_code ($atts, $content) { // Подоготавливаем HTML $plan_option = ""; // сохраняем полученные данные $i = $GLOBALS["plan-options-count"] + 1; $GLOBALS["plan-options"][$i] = $plan_option; $GLOBALS["plan-options-count"] = $i; // ничего не выводим return true; }

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

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

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

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

Content
Content

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

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

Add_shortcode("column_half", "column_half_code"); add_shortcode("column_half_inner", "column_half_code"); function column_half_code ($atts, $content) { return "

"; } В этом случае исходный синтаксис станет: Content Content Content

Заключение

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

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

1. Подключение сторонних скриптов и запуск только при наличии шорткода на странице.
2. Многоуровневый шорткод.
   • Составной шорткод.
   • Вложенность шорткодов.

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

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

/
/Includes/
shortcodes.php
…
functions.php

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

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

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

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

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

Function foobar_func($atts) { return "foo and bar"; } add_shortcode("foobar", "foobar_func"); function foo_script () { wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js"); wp_enqueue_script("foo-js"); } add_action("wp_enqueue_scripts", "foo_script");

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

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

1. Определить шорткод как отдельный класс.
2. Добавить флаг, который определит есть ли данный шорткод на странице.
3. Загружать скрипт только по флагу присутствия шорткода.

Вот и все…

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

Class foobar_shortcode { static $add_script; static function init () { add_shortcode("foobar", array(__CLASS__, "foobar_func")); add_action("init", array(__CLASS__, "register_script")); add_action("wp_footer", array(__CLASS__, "print_script")); } static function foobar_func($atts) { self::$add_script = true; return "foo and bar"; } static function register_script() { wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js"); } static function print_script () { if (!self::$add_script) return; wp_print_scripts("foo-js"); } } foobar_shortcode::init();

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

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

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

• Создание многоуровневого шорткода (состоящий из нескольких).
• Использование шорткода внутри такого же шорткода.

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

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

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

-


- …
-
-
- Option 1
- Option 2
- …
-
…

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

add_shortcode("price", "price_code");
add_shortcode("plan", "plan_code");
add_shortcode("option", "option_code");

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

Price -> вывод кода на страницу
Plan -> получение данных
Option -> получение данных

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

Function price_code ($atts, $content) { // инициализация глобальных переменных для прайс планов $GLOBALS["plan-count"] = 0; $GLOBALS["plans"] = array(); // чтение контента и выполнение внутренних шорткодов do_shortcode($content); // подготовка HTML кода $output = "

"; // вывод HTML кода return $output; }

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

Function plan_code ($atts, $content) { // получаем параметры шорткода extract(shortcode_atts(array("title" => "", // Plan title name "price" => "0", // Plan price), $atts)); // Подоготавливаем HTML: заголовок плана $plan_title = "

"; // Подоготавливаем HTML: стоимость $f_price = round(floatval($price), 2); $f_price = ($f_Price > 0) ? $f_Price: 0; $s_price = "$".$f_Price; $price_plan = ""; // инициализация глобальных переменных для опций $GLOBALS["plan-options-count"] = 0; $GLOBALS["plan-options"] = array(); // читаем контент и выполняем внутренние шорткоды do_shortcode($content); // Подоготавливаем HTML: опции $plan_options = ""; // Подоготавливаем HTML: компонуем контент $plan_div = $plan_title; $plan_div .= $price_plan; $plan_div .= $plan_options; // сохраняем полученные данные $i = $GLOBALS["plan-count"] + 1; $GLOBALS["plans"][$i] = $plan_div; $GLOBALS["plan-count"] = $i; // ничего не выводим return true; } function option_code ($atts, $content) { // Подоготавливаем HTML $plan_option = ""; // сохраняем полученные данные $i = $GLOBALS["plan-options-count"] + 1; $GLOBALS["plan-options"][$i] = $plan_option; $GLOBALS["plan-options-count"] = $i; // ничего не выводим return true; }

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

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

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

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

Content
Content

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

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

Add_shortcode("column_half", "column_half_code"); add_shortcode("column_half_inner", "column_half_code"); function column_half_code ($atts, $content) { return "

"; } В этом случае исходный синтаксис станет: Content Content Content

Заключение

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

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

Как файл? Быстрый ответ

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

php echo do shortcode wordpress

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

Т.е., если в вашем шаблоне сайта на wordpress, вы используете такой же шорткод, но с двумя кавычками внутри ([«…»]), и в вашем php-коде вы также используете двойные кавычки («[…]»), то нужно одни из них поменять на одинарные. Именно из-за таких мелких причин часто не работают шорткоды в wordpress . Подробнее об этом ниже.

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

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

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

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

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

Все очень просто. Допустим, вы имеете сайт на движке WordPress, у вас стоит какой-нибудь простой шаблон (дизайн) сайта, но чтобы его украсить, вы решили поставить на него слайдер, в котором ваши фотографии будут перелистываться сами. Сделать это очень просто. Для этого нужно скачать плагин слайдера из общей библиотеки плагинов WordPress, залить туда нужные фото, и плагин выдаст вам не огромный код слайдера по типу:

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

Вставив подобный этому

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

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

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

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

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

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

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

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

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

shortcode wordpress как вставить

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

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

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

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

wordpress shortcode в шаблон

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

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

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

1. Перейдите в Панель управления ▸ Плагины ▸ Добавить новый;
2. Выполните поиск Shortcodes Ultimate ;
3. Нажмите Установить, затем Активировать.

Установка вручную

1. Скачайте плагин в виде zip-архива;
2. Распакуйте скачанный архив и выгрузите папку shortcodes-ultimate в папку /wp-content/plugins/ (в итоге путь к папке плагина должен быть /wp-content/plugins/shortcodes-ultimate/**);
3. Перейдите в Консоль ▸ Плагины и активируйте плагин.

Часто задаваемые вопросы

Как работает плагин Шорткоды не работают. Почему? Кнопка Вставить Шорткод не работает. Почему? Могу ли я удалить стандартные шорткоды?

Yes, you can remove default shortcodes using ‘su/data/shortcodes’ filter. Tutorial: How to remove default shortcodes .

Могу ли я создавать свои шорткоды?

Yes, you can create custom shortcodes using ‘su/data/shortcodes’ filter. Tutorial: How to add custom shortcodes .
Alternatively, you can use Shortcode Creator add-on .

Могу ли я использовать шорткоды в файлах темы? Будет ли плагин работать с моей темой?

Да! Shortcodes Ultimate создан для работы с любой темой, но ваша тема должна иметь базовые вещи, такие как: теги шаблона ‘wp_head’ и ‘wp_footer’. Иногда, плагин может работать неправильно из-за ошибок javascript, вызванных другими плагинами или темой.

Где я могу сообщить об ошибке? Где я могу получить поддержку или пообщаться с другими пользователями?

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

Отзывы

Many of the codes are now redundant with the standard Gutenberg blocks (heading, divider, quote, pullquote, columns, list, many embeds , and others), but there are some still useful to me, and I"ve had no problems. Thanks for the plugin.

Участники и разработчики

«Shortcodes Ultimate» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Журнал изменений

5.5.0

Что нового

• New option outline for which allows disabling carousel outline (when it gets focus)
• New option mobile for which allows disabling tab stacking on mobile devices
• New option texttrack for which allows enabling video subtitles

Improvements

• is now always served through https
• : improved compatibility with various themes
• : the gallery can now be loaded through AJAX
• : improved keyboard navigation
• Insert Shortcode window will now remain open if the dark background clicked

• Fixed issue with empty image captions (with whitespace)
• Fixed issue where images weren’t shown when crop is disabled

5.4.1

This update fix various issues related to version 5.4.0

5.4.0

Что нового

• New shortcode which will take place of and in the future
• New attribute download for the shortcode (allows immediate downloading of specified URL in a button)
• New attribute id for the shortcode (allows linking to a heading)
• New attribute wrapper for the shortcode (allows disabling of the div wrapper)
• New attribute mobile for the shortcode (allows disabling lightbox on mobile devices)

Improvements

• Custom CSS code field now has syntax highlighting
• with target=blank will now be displayed with rel="noopener noreferrer
• Slightly improved appearance of the Available shortcodes screen
• Vertical tabs are now aligned with CSS flexbox, not JS
• Added shortcodes.full.css file to reference the default shortcode styles
• Minor improvements to , , and shortcodes

• Fixed issue with on iOS
• Removed !important from column styles for mobile devices

Security

• and are now allow only templates from active theme or plugin folders
• Error messages are now displayed only to allowed users (user must have required capability)

5.3.0

Что нового

• New shortcode for displaying CSV tables
• New option indent for the shortcode, which allows adjusting of list indentation

• Fixed inaccessible fields in media modal (while inserting Gallery/Slider/Carousel shortcodes)
• Fixed close icon class name in the presets menu
• Fixed issue with unwanted content inside single shortcodes
• Fixed warning when non-numeric value is used for the button size attribute
• Min-width for responsive tables is set to 100%

5.2.0

Improvements

• Вкладки и аккордионы/спойлеры теперь доступны с клавиатуры
• Вкладки теперь работают лучше с вложенными слайдерами/каруселями
• Улучшена стабильность некоторых адаптивных элементов, как Google Maps
• Описание функционала YouTube и его расширенных настроек теперь более ясные
• Новый параметр Требуемые полномочия пользователя, который позволяет включать кнопку Вставить шорткод для пользователей не являющихся администраторами
• Новый параметр Включить шорткоды в который позволяет включить шорткоды в текстовых виджетах и описаниях рубрик

• Параметр youtube_advanced showinfo устарел и был удалён из плагина. Почему?
• Font Awesome заменён на Fork Awesome . Таблица стилей Font Awesome (v 4.7.0) будет полностью удалена при следующем обновлении. Все иконки теперь используют CSS-класс sui вместо fa

5.1.1

• Совместимость с Gutenbrg включена по умолчанию

5.1.0

Что нового

• Добавлена совместимость с редактором Gutenberg. .

• Fixed icon appearance of the shortcode

5.0.8

• Fixed Live Preview, wasn’t representing changed settings
• Fixed , now it works again at top-level pages

• Various code improvements
• New filters for gallery, slider, and carousel
• Returned su_cmpt() and su_compatibility_mode_prefix() utils

5.0.7

Security update

• Fixed shortcode generator preview vulnerability. Description .

5.0.6

• Added missing images for su_audio , su_video , su_slider and su_carousel
• Fixed Fatal error: Call to a member function get_page_permastruct() on null in link-template.php:357
• Added missing su_get_icon() utility function
• Added missing su_scattr() utility function
• Added missing su_do_shortcode() utility function

5.0.5

Improvements

• Improved compatibility with fitvid.js;
• Improved appearance of the Show more and Show less links of the su_expand shortcode;
• The new option mute for su_youtube and su_youtube_advanced shortcodes;
• Support for the youtube-nocookie.com domain in su_youtube and su_youtube_advanced shortcodes;
• Support for nested shortcodes in the title attribute of the su_button shortcode;
• The new option dnt (do not track) for the su_vimeo shortcode, learn more ;
• The new option mute for the su_vimeo shortcode;
• https support for the su_dailymotion shortcode;
• New options title and rel for the su_permalink shortcode;
• The su_post shortcode now support slugs in the post_id attribute;
• The new option zoom for su_gmap .

• Shortcodes styles merged into a single stylesheet.

• Fixed warning in su_siblings shortcode.

5.0.4

• Fixed: added missing FontAwesome icons
• Fixed: is_plugin_active call removed on frontend
• Fixed: nested shortcodes
• Fixed: issue with spoiler loaded through ajax
• Fixed: shortcode logic

5.0.3

• Changed: Inview.js library replaced with jQuery.Inview
• Fixed: caching issue with
• Fixed: PHP warning in shortcode when specified template does not exist
• Updated: Font Awesome to version 4.7.0
• Added: responsive styles for

5.0.2

• Fixed: an issue where RTL stylesheet won’t displayed if custom CSS field is empty
• Fixed: icon sizes at ‘Dashboard — Available Shortcodes’ page
• Fixed: shortcode now works when loaded through AJAX
• Fixed: border-radius on shortcode
• Fixed: compatibility with ‘Plugin Organizer’
• Updated: OwlCarousel jQuery plugin
• Added: new attribute ‘responsive’ for table shortcode:
• Added: new attribute ‘playsinline’ for youtube_advanced shortcode:

5.0.1

• Fixed: serious security vulnerability, which allows attacker to run any code using filter in meta, post, or user shortcodes. Thanks to Robert L Mathews.
• Fixed: changed admin menu position (it was replacing ‘Settings’ menu on some installations)
• Fixed: shortcodes prefix field now accepts special characters
• Fixed: old bug when unwanted code parts was added with shortcode
• Fixed: bug, where backslashes were removed from custom CSS code
• Added: new attribute ‘ID’ for shortcode
• Added: new filter ‘su/slides_query’, which can be used to modify posts query for slider, carousel and custom_gallery shortcodes
• Added: new filter ‘su/assets/custom_css/template’ to filter custom css output
• Minor fixes

5.0.0

• Читайте пост в блоге чтобы узнать больше об этом обновлении
• Новый сайт проекта getshortcodes.com
• New documentation getshortcodes.com/docs
• Добавлено: страница панели управления ‘Доступные шорткоды’
• Удалено: страница панели управления ‘Примеры’
• Удалено: страница панели управления ‘Шпаргалка’
• Исправлено: шорткод (теперь используется SimplePie)
• Изменено содержимое по умолчанию для шорткодов , и
• Исправлено: шорткод теперь работает, когда пользователь не авторизован
• Изменено: Улучшение безопасности. Теперь плагин убирает все HTML теги из пользовательского css кода
• Мелкие улучшения и исправления

4.10.2

• Улучшено: совместимость с PHP7 (шорткоды и )
• Исправлено: разметка и (пропущенные пробелы между атрибутами)
• Удалено: проверка пользователя в шорткоде

4.10.1

• Исправлено: javascript лайтбокса

4.10.0

• Исправлено: уязвимость на странице в ‘Примеры’ панели управления (небезопасный вызов file_get_contents() в inc/core/tools.php:774)
• Исправлено: добавлена проверка уровня доступа в шорткоде . Pull request #20 .
• Добавлено: совместимость с PHP7. Проверено с помощью php7cc и PHP Compatibility Checker . Pull request #45 .
• Добавлено: поддержка https для . Pull request #40 .
• Добавлено: поддержка https для. Pull request #39 .

4.9.9

• Исправлено: всплывающее окно оценки на странице Плагины
• Небольшие улучшения, исправления

4.9.8.1

• Исправлено: совместимость с WordPress 4.3+
• Добавлено: заголовки лайтбокса для слайдера, карусели и галереи. Коммит от Valentino Pistis
• Изменено: текстовый домен с ‘su’ на ‘shortcodes-ultimate’

4.9.8

• Добавлено: Испанская локализация
• Обновлено: FontAwesome обновлен до 4.4.0
• Исправлено: line-height в шорткоде кнопка на узких экранах
• Исправлено: вложенные спойлеры

4.9.7

• Добавлено: теперь поддерживает https
• Исправлено: расчет ширины элементов карусели
• Добавлено: новый атрибут для , тема на форуме
• Исправлено: stripslashes для содержимого

4.9.6

• Исправлено: небольшое исправление отключенного пользовательского css

4.9.5

• Добавлено: базовая поддержка RTL
• Исправлено: JS ошибка (блокирующая настройки шорткодов) на WordPress 3.5
• Fixed: minor improvement for slider/gallery posts query. Forum topic
• Fixed: minor imrovements on , fixed markup bug for long values in cite, thanks to Anatoly Yumashev
• Added: completely redesigned search feature. Now it’s like a Google, but for shortcodes =)
• Added: Insert shortcode popup window hotkey. So now, you can open Insert shortcode window, choose shortcode and insert it with just one click
• Updated: new demo video at plugin settings page (About tab)
• Updated: new plugin’s banner and icon

4.9.4

• Updated: Japanese translation
• Updated: Polish translation
• Fixed: minor fixes in shortcode settings window
• Fixed: vulnerability in Examples preview. Added wp_nonce check. Thanks to Kacper Szurek
• Fixed: vulnerability at Custom CSS page. Added wp_nonce check. Thanks to Ryan Satterfield
• Removed: skins directory creation

4.9.3

• Updated: owl-carousel.js
• Added: minor UI improvements
• Fixed: ssl issue (thanks to Adam)
• Fixed: multiple errors on cheatsheet page
• Fixed: errors when updating user profile, forum topic
• Removed: global skin option at settings page

4.9.2

• Added: minor improvements for tabs/spoilers anchors (auto-removing extra # characters)
• Added: compatibility with TablePress’s advanced editor
• Added: new option for tabs. You can now link any tab to any webpage
• Added: new option wmode for , forum topic
• Added: new shortcode
• Fixed: lightbox and galleries scripts, forum topic
• Fixed: removed global function $.support.transition, forum topic
• Updated: Russian language
• Updated: Japanese language
• Updated: FontAwesome, 4.1.0
• Updated: Magnific Popup, 0.9.9

4.9.1

• Added: New shortcode
• Added: New shortcode
• Added: New options for
• Added: New option rel for
• Fixed: animations script has been changed. CSS animations will be skipped in non-supported browsers, forum topic
• Fixed: templates/default-loop.php — removed extra n character in comments number, forum topic
• Fixed: large DB query on sites with many users, forum topic

4.9.0

• New shortcode allows you to generate colorful and responsive QR codes!
• Improved shortcode search. Just type shortcode name and hit Enter
• Updated Animate.css (animations library)
• Updated ACE editor (custom CSS editor)
• Responsive CSS for
• Highly decreased plugin size

4.8

• Minor UI fixes (compatibility with page builders)
• Czech translation by Punc00
• Added: full compatibility with multiple editors on same page — fourm topic
• Fixed: extra CSS class for — forum topic
• Fixed: Swiper click event, Swiper has been updated — forum topic
• Fixed: ’s content is now hidden until the page is loaded
• New dashboard page: Cheatsheet
• Minor fix, for hidden spoiler content
• Updated Japanese translation

4.7

• Long-awaited feature: slider, carousel and custom_gallery links can now be open with lightbox
• Long-awaited feature: custom links in slider, carousel and custom_gallery shortcodes
• Fixed https bug in FontAwesome enqueue
• Fixed bug with multiple users queries — forum topic
• New Ghost style for
• Minor UI fixes (for WP 3.9+)
• New shortcode
• YouTube (advanced) can now use https protocol
• Additional help notes in Shortcode Generator
• Slovak language

4.6

• Auto-save for shortcodes settings. Now you don’t need to adjust it again and again
• New premium add-on — Extra Shortcodes
• Minor UX improvements
• New locale — VI
• Fixed bug with tax_term IDs in shortcode, forum topic
• Fixed bug with service title, forum topic
• Fixed bug with animations names in shortcode generator, forum topic
• Updated settings pages capabilities
• Added some hooks
• Updated .pot file
• Font-Awesome is now loaded from bootstrap CDN. Technical details .
• New review — Shortcodes Ultimate: Ultimatize your written content
• New review —
• New review — Show Me the Shortcode + Video
• Updated readme.txt
• SiteOrigin page builder — it’s free!
• Compatibility with recent version of Visual Composer
• Compatibility with recent version of Elegant Themes page builder

4.5

• Updated some examples
• Removed import functions. Old versions of plugin (like 3.9.5) is not supported anymore
• Updated custom formatting filter
• Updated Japanese translation
• Added NL translation
• Minor fixes
• Presets. Now you need to adjust the shortcodes only once
• New WP filters for shortcodes attributes
• New option for compatibility mode prefix
• Compatibility mode is now enabled by default
• Font-awesome updated to 4.0.3
• New shortcode
• New shortcode
• New shortcode
• New attribute limit for , and
• Minor UX improvements

4.4

• IMPORTANT : new galleries mechanism. Your created galleries will work but will not be visible in admin panel. Now, you’re able to create galleries right in «Insert shortcode» window. Also, you can now create galleries from posts, categories or even custom taxonomies.
• Removed all default links (default youtube videos)
• Updated admin page framework Sunrise
• Minor admin panel fixes
• Fixed file_get_contents() (disabled http wrappers) issue at the examples page
• Added classes Shortcodes_Ultimate_Generator, Shortcodes_Ultimate_Shortcodes and Shortcodes_Ultimate_Data
• Removed unused classes MediaUpload and ImageMeta
• New shortocde
• New shortocde
• New shortocde
• New shortocde
• New admin page — Examples
• New admin page — Add-ons
• Font Awesome updated to version 4
• New attr
• Fixed issue with date format in
• New slider control for shortcode generator
• Small fixes

4.3

• New text-shadow picker for
• Anchor navigation for spoilers and tabs — forum topic
• Small fixes
• IMPORTANT: removed old list icons. These icons replaced with new font-awesome icons
• New icon picker for , and
• Media manager is now works on widgets page
• Shortcodes inside of
• Fixed fatal error in
• New media manager added for galleries manager
• New media manager added to the file fields in Generator
• Z-index for visual composer — forum topic
• New attr for onclick
• Fixed settings page
• Fixed player

4.2

• Font Awesome icons (in Generator)
• Fixed warning in footer — forum topic
• Removed warning at settings page — forum topic
• Removed another warning (undefined index) — forum topic
• Changed syntax for shortcodes inside of attributes — documentation
• Small performance improvemets
• Aded font-awesome.css. Will be completely included in closest versions
• Added default taxonomy value for
• Added default post_type value for
• Added ability to use shortcodes inside of attributes
• Translated into Japanese
• Fixed
• Fixed media query for
• Added new attr
• Improved js code for spoilers and tabs
• Improved js code for generator
• Добавлен pot файл
• Fixed css code
• Updated , and js code
• Fixed
• Updated Greek translation
• Fixed
• Disabled wp_footer check
• Fixed wp_footer notice, again
• Small fix for tooltips
• Fixed wp_footer notice
• Greek translation
• Added compatibility mode prefix for spoilers inside of accordion
• Updated qTip plugin
• Added shortcode
• Added new attribute. . Now, any tab can be disabled. Forum topic
• Added scrolling. Forum topic
• Added wp_footer check. User will be noticed if current theme doen’t includes wp_footer
• Updated caching mechanism. Cache will be reseted when you add or remove terms
• Updated galleries mechanism. Removed some conflicts
• Fixed spoiler background for style=fancy
• Additional access check option for Shortcode Generator

4.1

• New screencast — How to create image gallery
• New attribute «center» for . Buttons can now be centered on the page
• Updated . Now it can contain other shortcodes
• Updated caching mechanism. Cache now will be reseted on plugin activation
• Fixed many PHP warnings when debug mode enabled
• Added backward compatibility for . Shortcode has basic support for youtube and vimeo videos
• Fixed bug with hidden single
• Added attribute «active» for tabs container. This option allows you to select tab number that will be open by default
• Fixd button style 3D
• Added backward compatibility for
• Fixed margins
• Added backward compatibility for . Now it accepts style=3 and vertical attributes
• Added backward compatibility for . Now it accepts 0 and 1 as values for attribute open. Also, it now accepts style attribute (1, 2, default, fancy, simple)
• Added custom CSS import from previous versions. Styles will be imported automatically and prepended to the existing CSS-code
• Added backward compatibility for . Now it accepts bg and background attributes
• Added backward compatibility for . Now it accepts style and type attributes
• Added backward compatibility for . Now it accepts 1, 2 and 3 as style values
• Added backward compatibility for . Now it accepts p and id attributes
• Added backward compatibility for . Need to test
• Added backward compatibility for . Now it accepts style and login attributes
• Added backward compatibility for . Now it accepts color and box_color attributes
• Added backward compatibility for . Now it accepts color and note_color attributes
• Added backward compatibility for . Now it accepts attribute last and can be not wrapped with
• Added backward compatibility for . Now it accepts file and url attributes

4.0

• Plugin based on Sunrise Plugin Framework
• GitHub repo . Now you can easily fork and modify best plugin in the world (:
• Brand new Shortcode Generator, demo video
• Completely reorganized code. Added and removed some shortcodes
• For security maniacs: timthumb.php replaced by native WordPress mechanism
• For speed-up maniacs: completely rewritten assets mechanism. Now css and js files included on page depend on used shortcodes
• Added new shortcode . This is awesome and flexible mechanism to display your content in many different ways
• Now you can create your own custom skins for shortcodes
• Columns, google maps, google document viewer, youtube player, vimeo player and custom audio player is now fully responsive

3.9

• More screencasts
• Special widget for shortcodes
• Small fixes
• Hebrew translation
• Partners section on settings page
• Generator select improved with Chosen
• Farbtastic color picker

3.8 (security release)

• 2 new translations (Sk, Lt)
• Donate button in control panel
• Updated timthumb.php (version 2.8.10)
• Added 2 useful screencasts

3.7

• Complete support for nested shortcodes. Check the FAQ page.
• New shortcode
• New style for buttons
• Fixed images ordering for , and

3.6

• Descriptions for
• Custom options for jwPlayer
• Fixed size option for sliders and gallery

3.5

• New shortcode for muliple spoilers
• Improved spoiler shortcode (check settings page)
• Multiple tabs bugfix
• Authors can also use shortcode generator
• Nested shortcodes: spoiler, column, tabs, box, note

3.4

• Belarusian translation
• New shortcode

3.3

• Changed: and (see docs in console)
• New shortcode:
• New parameter:
• New shortcode: guests
• German translation

3.0

• Button for WYSIWIG editor (search it near Upload/Insert buttons)
• New shortcode: private (private notes for editors)
• Patched and secure timthumb.php

2.7

• French translation
• Fixed for work with new jQuery 1.6 in WP 3.2

2.5

• Theme integration

2.4

• New shortcode: jcarousel

2.3

• New admin page: Demo

2.2

• New shortcode: document
• New shortcode: members
• New shortcode: feed
• New attr: link=»caption» for
• New attr: p for
• New tabs style (style=3)

2.1

• New option: disable any script
• New option: disable any stylesheet
• New attribute for column shortcode — style
• New attribute for spoiler shortcode — style

2.0

• New shortcode: menu
• New shortcode: subpages
• New shortcode: siblings
• Some admin fixes
• New button attribute — class
• New button attribute — target
• Different tabs styles (1 old + 1 new)

1.9

• New shortcode: permalink
• New shortcode: bloginfo

1.8

• Some small additions
• Ajax admin page
• No-js compatibility
• Multiple tabs support

1.7

• Improved settings page design
• Added shortcode nivo_slider
• Added shortcode photoshop

1.6

• New admin panel
• Custom CSS editor with syntax hughlight
• Small fixes
• Добавлена форма для поддержки проекта

1.5

• Добавлена настройка «Режим совместимости»
• Добавлены новые стили кнопки
• Добавлены новые стили списков
• Добавлен новый шорткод медиа
• Добавлен новый шорткод таблица

1.4

• Добавлен шорткод «Красивая ссылка»

1.3

• Некоторые исправления

1.2

• Поддержка локализации

Использование шорткодов в вордпресс позволяет создавать в текстовом редакторе оригинальное «сложное» оформление для контента без HTML или специальных знаний. Вы сможете добавлять кнопки, табы, слайдеры типа «аккордеон», разбивать тексты на колонки или выделять их определенным цветом, вставлять красивые списки или , таблицы с ценами, галереи/видео и т.д. и т.п. Шорткоды помогут сделать ваш сайт более функциональным, а контент — выразительным и эффективным. Данное решение подходит для многих задач и весьма полезно в работе.

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

WP Shortcode by MyThemeShop

70000+ загрузок, оценка — 5.

• 6 разновидностей шорткодов: блоки, табы, кнопки, слайдер аккордеон и т.п.;
• 6 уникальных решений: форма логина, подсветка и т.п.;
• разбиение на колонки (до 5-ти);
• поддержка FontAwesome для списков, табов и других элементов;
• поддержка адаптивности дизайана.

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

Итого. Если вы ищете максимально простой shortcode wordpress плагин, то последние два варианта (Arconix Shortcodes, Simple Shortcodes) вам вполне подойдут. Хотите создавать свои уникальные шорткоды с параметрами? — посмотрите детальнее модуль Shortcoder. Самые функциональные решения — Shortcodes Ultimate и Easy Bootstrap Shortcode. Но из этих двух первый, мне кажется, все равно получше будет. Я бы начал именно с него.

А какой плагин шорткодов в вордпресс вы используете?