Как вставить шорткод в статью. Шорткоды WordPress: примеры использования. Основные ошибки! Или почему не работает шорткод wordpress

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

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

Рассмотрим действия шорткода на примере плагина галереи изображений. Итак, после его установки и активации, в админ-части вашего сайта WordPress появляется специальный раздел, в котором есть необходимые инструменты для создания галереи. После того, как изображения были добавлены и применены необходимые настройки, ваша галерея будет сохранена. Теперь остается ее вывести на сайте. Для этого плагин сообщает вам уникальный шорткод, на месте вставки которого будет отображена созданная вами галерея.

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

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

Инструменты “движка” позволяют не только пользоваться уже существующими шорткодами, но и создавать свои. Для этого необходимо иметь навыки программирования. Размещать всю нашу работу будем в основном конфигурационном файле активной WordPress-темы – functions.php .

Если Вы не знаете, как редактировать functions.php , то в этом случае Вам поможет плагин ProFunctions .

Для примера создадим шорткод, который будет выводить простой текст “Привет, WPSchool!”

Для этого в указанный выше файл следует добавить следующие строки:

Function wpschool_text_shortcode() { return "Привет, WPSchool!"; } add_shortcode("textshortcode", "wpschool_text_shortcode");

Наш код состоит из 2-х основных конструкций. Блок function wpschool_text_shortcode() является функцией, в которой собственно и происходит вывод необходимого значения шорткода. В нашем случае – это вывод текстовой строки “Привет, WPSchool!”

Директива add_shortcode() является служебной командой, которая создает сам шорткод. Она имеет два параметра. ‘textshortcode’ – это название шорткода, которое будет в итоге заключено в квадратные скобки. Во втором параметре мы указываем имя нашей функции с выводом текста.

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

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

В итоге на сайте это будет выглядеть так:

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

Function wpschool_picture_shortcode($atts) { extract(shortcode_atts(array("width" => 100, "height" => 100,), $atts)); return ""; } add_shortcode("picture", "wpschool_picture_shortcode");

Наш шорткод теперь содержит параметры функции, а также присутствует аргумент $atts . Для того, чтобы использовать параметры шорткода, нам понадобятся две функции: shortcode_atts() и extract() . Первая является встроенной в ядро WordPress функцией, которая сопоставляет атрибуты шорткода с переданными и присваивает значения по-умолчанию (если это необходимо). extract() – это функция языка PHP , которая создает переменные из значений массива. Наша функция возвращает значение, которое нам необходимо (HTML -разметка нашего изображения с заданными значениями высоты и ширины).

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

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

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

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

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

Шоткоды - это конструкция вида: или или текст в тексте, которые будут заменены другим текстом созданным функцией-хуком отвечающим за шоткод.

Видео о шорткодах в WordPress:

Хуков нет.

Возвращает

Ничего не возвращает.

Использование add_shortcode($tag , $func); $tag(строка) (обязательный)

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

В названии нельзя использовать пробелы и нестандартные символы вроде: & / < > = .
По умолчанию: нет

$func(строка) (обязательный)

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

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

    $atts (массив)
    Ассоциативный массив атрибутов указанных в шорткоде.
    По умолчанию: "" (пустая строка - нет атрибутов)

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

  • $tag (строка)
    Тег шорткода. Может пригодится для передачи в доп. функции. Пр: если шорткод - , то тег будет - foo .
    По умолчанию: текущий тег

По умолчанию: нет

Примеры #1. Пример регистрации шоткода : function footag_func($atts){ return "foo = ". $atts["foo"]; } add_shortcode("footag", "footag_func"); // результат: // шоткод в тексте будет заменен на "foo = bar" #1.2. Установка белого списка атрибутов шорткода

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

Add_shortcode("bartag", "bartag_func"); function bartag_func($atts){ // белый список параметров и значения по умолчанию $atts = shortcode_atts(array("foo" => "no foo", "baz" => "default baz"), $atts); return "foo = {$atts["foo"]}"; }

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

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

Add_shortcode("baztag", "baztag_func"); function baztag_func($atts, $content) { return "content = $content"; } // результат: // конструкция шоткода будет заменена на "content = здесь текст"

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

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

Add_shortcode("baztag", [ "MyPlugin", "baztag_func" ]); class MyPlugin { static function baztag_func($atts, $content) { return "content = $content"; } }

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

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

Function Generate_iframe($atts) { $atts = shortcode_atts(array("href" => "http://example.com", "height" => "550px", "width" => "600px",), $atts); return "

Your Browser does not support Iframes.

"; } add_shortcode("iframe", "Generate_iframe"); // использование:

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

Получим пост по ID, используя шорткод в файле темы functions.php .

Add_shortcode("testimonials", "testimonials_shortcode_handler"); function testimonials_shortcode_handler($atts){ global $post; $rg = (object) shortcode_atts([ "id" => null ], $atts); if(! $post = get_post($rg->id)) return ""; $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); $out = " logo) . "" alt="icon" />

". get_the_content() ."

author_image) ."" alt="image">

". esc_html($post->author_name) ." ". esc_html($post->author_designation) ."

"; wp_reset_postdata(); return $out; }

Заметки
  • Global. Массив. $shortcode_tags
Список изменений
С версии 2.5.0 Введена.
Код add shortcode : wp-includes/shortcodes.php WP 5.2.3