Как вставить шорткод в статью. Как создать шорткод shortcode и как записать переменные в add_shortcode WordPress. Типы шорткодов по структуре

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

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

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

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

Создать шорткод / shortcode WordPress

Задача создать шорткод в WordPress не такая уж и сложная. Для этого нужно создать PHP функцию и записать ее в файл вашей теми. Например, создадим функцию myTxt и запишем ее в functions.php:

function myTxt(){
$str="

Заголовок

Текст описание

";
return $str;
}

также в function.php нужно записать вот такой коротенький код:

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

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

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

$str="

".$atts["title"]."

".$atts["txt"]."

";
return $str;
}

add_shortcode("myCodeInPost", "myTxt"); - оставляем как и было, без изменений

А в посте пишем вот такой вызов шорткода:

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

function myTxt($atts, $content = null){
$str="

".$atts["title"]."

";
$str=""
return $str;
}
add_shortcode("myCodeInPost", "myTxt");

Вызывать этот шорткод с параметрами мы будем вот так: Текст для модернизации

Все ваш шорткод с параметрами готов, можете использовать на здоровье.

Как можно узнать сдесь.

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

Заключение

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

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

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

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

Шорткод — это короткий код (shortcode), который вставляется непосредственно в текст страницы, заголовка, виджета — то есть в контент и расширяет возможности Вордпресса.

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

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

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

Типы шорткодов по структуре

Они бывают без параметров, с параметрами и с контентом.

Шорткоды без параметров

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

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

Этот вызов выводит текущий год. Удобно, чтобы не редактировать тексты каждый год.

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

Порой нужно передать параметры, чтобы получать разные результаты.

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

Он содержит два параметра: title — это надпись на кнопке, например, Заказать, Подписаться и т.д.

url — это адрес перехода по клику.

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

Здесь параметр s — это цена в долларах.

Шорткоды с контентом

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

Вот так можно выделить фрагмент текста или часть поста, «подложив» под него цветную подложку:

Тут какой-то текст, который будет отображаться на цветном фоне.

Параметр color задаёт цвет подложки в привычном 16-ричном коде.

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

Шорткод в коде php состоит из функции, которая его обрабатывает, и из команды, которая назначает коду соответствующую функцию.

Вот типичный шорткод для кнопки:

function ha_but ($atts,$content=NULL) {
extract(shortcode_atts(array(
‘title’ => ‘Перейти’,
‘url’ => false
), $atts));

$output="’.$title."’;

return $output;
}
add_shortcode(‘but’,’ha_but’);

В данном примере функция имеет имя ha_but . Ей передаются два параметра — title и url . Причём для title назначено значение по умолчанию Перейти . Если при вызове кода параметр title пропустить, то на кнопке по умолчанию будет надпись Перейти.

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

Затем функция возвращает результат свой работы с помощью return .

Функция add_shortcode назначает для шорткода по имени but функцию-обработчик по имени ha_but .

А вот стили для кнопки жёлтого цвета во всю ширину страницы:

Btn {
display: inline-block;
color: #000000;
font: 300 16px «Roboto», sans-serif;
text-transform: uppercase;
background: #fde42b;
background: -webkit-gradient(linear, left top, left bottom, from(#fcea38), to(#ffcf00));
background: -webkit-linear-gradient(top, #fcea38 0%, #ffcf00 100%);
background: linear-gradient(to bottom, #fcea38 0%, #ffcf00 100%);
border-bottom: 3px solid #b27d00;
padding: 14px 15px 11px;
width: 90%;
border-radius: 2px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #ffec89;

}
.btn:hover {
opacity: 1;
background: -webkit-gradient(linear, left bottom, left top, from(#ffdd02), to(#fffe6d));
background: -webkit-linear-gradient(bottom, #ffdd02 0%, #fffe6d 100%);
background: linear-gradient(to top, #ffdd02 0%, #fffe6d 100%);
border-color: #bd8500;

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

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

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

Однако, если вы обновите или смените шаблон — шорткоды обрабатываться перестанут. Если планируется в будущем менять дизайн блога, то код всех шорткодов лучше разместить в одном файле, например, shortcodes.php, а его разместить в папке my в корне сайта.

В этом случае нужно организовать вызов, вставив в файл functions.php команду require_once(‘my/shortcodes.php’);

После смены или обновления темы Вордпресса не забудьте заново прописать эту команду.

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

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

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

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

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

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

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

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

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

Видео о шорткодах в 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 ""; } 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 = "

"; wp_reset_postdata(); return $out; }

Заметки

• Global. Массив. $shortcode_tags

Список изменений

С версии 2.5.0

Введена.

Код add shortcode : wp-includes/shortcodes.php WP 5.2.3

&/\[\]\x00-\x20=]@", $tag)) { /* translators: 1: shortcode name, 2: space separated list of reserved characters */ $message = sprintf(__("Invalid shortcode name: %1$s. Do not use spaces or reserved characters: %2$s"), $tag, "& / < > ="); _doing_it_wrong(__FUNCTION__, $message, "4.4.0"); return; } $shortcode_tags[ $tag ] = $callback; }