Вордпресс shortcode. Как сделать шорткоды для 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 "

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

Собственно вопрос, как лучше, создавать дочернюю тему

при вставке share42

P.S. Даже для ваших share42 есть плагин. Правда он такой же древний, как и сам способ share42

Не получилось у меня понятно задать вопрос. Такое ощущение, что его вообще никто не прочитал. Разобью вопрос на два. Кто знает, помогите плиз.

Задача создать простейший шорткод без плагина. Типа

Реализация через дочернюю тему или через плагин? Какой вариант лучше?

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

Не получилось у меня понятно задать вопрос. ..

Потому что в каждом вашем сообщении сразу по нескольку вопросов. Например:

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

… Разобью вопрос на два.

Теперь вы понимаете для чего существуют правила этого форума?

Такое ощущение, что его вообще никто не прочитал.

Точно такое же ощущение создается что вы не читаете ответов. Лично я рекомендовал вам самое главное — вместо того чтобы изобретая велосипед по вставке кнопок соц сетей от почти умершего share42 плясать с бубном и теряя время морочить голову себе и другим — воспользоваться правильными и готовыми решениями.

Хорошо, в самом начале первого поста я написал, что это общий вопрос. Шара42 чисто как пример. Реально мне поставлена задача выводить инфу через шорткоды. Таких плагинов не существует в природе вообще, ибо инфа берется с самописной программы заказчика. PHP-код вставленный через плагин для создания шорткодов не всегда работает. Там где виджеты обрабатываются javascript php-код не работает. Я в тестовом сайте вставил нужный код в functions.php и все заработало. Но заказчик запрещает изменять файлы темы. Значит нужно использовать дочернюю тему. Или оформить код в виде простого плагина. Собственно один вопрос. Если нужно несколько шорткодов, их лучше сделать в одном плагине или по плагину на шорткод?

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

Просмотр 9 ответов - с 1 по 9 (всего 9)

• Тема «Создание шорткодов» закрыта для новых ответов.

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, который решает нужные вам задачи.

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

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

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

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

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

Код можете вставить в файл functions.php (я имею ввиду тот, который находится в директории вашей текущей темы).

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

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

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

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

Параметров будет два: anchor и url — анкор (текст ссылки) и URL соответственно.. Если параметр не будет указан в самом шорткоде, то будет использоваться его значение по умолчанию, заданное в функции.

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

Давайте возьмём шорткод из предыдущего примера и немного переколдуем его. Напомню, что шорткод выглядел так:
.

Что, если мы переделаем его следующим образом: URL ссылки .

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

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

function true_url_external( $atts , $shortcode_content = null ) { $params = shortcode_atts( array ( "anchor" => "Миша Рудрастых" ) , $atts ) ; return "{$params["anchor"]} " ; } add_shortcode( "trueurl" , "true_url_external" ) ;

Теперь шорткод следующего вида выведет ссылку на главную страницу вашего сайта (про шорткод я писал выше).

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

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

1. PHP

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

// Хуки function true_add_mce_button() { // проверяем права пользователя - может ли он редактировать посты и страницы if ( !current_user_can( "edit_posts" ) && !current_user_can( "edit_pages" ) ) { return ; // если не может, то и кнопка ему не понадобится, в этом случае выходим из функции } // проверяем, включен ли визуальный редактор у пользователя в настройках (если нет, то и кнопку подключать незачем) if ( "true" == get_user_option( "rich_editing" ) ) { add_filter ( "mce_external_plugins" , "true_add_tinymce_script" ) ; add_filter ( "mce_buttons" , "true_register_mce_button" ) ; } } add_action ("admin_head" , "true_add_mce_button" ) ; // В этом функции указываем ссылку на JavaScript-файл кнопки function true_add_tinymce_script( $plugin_array ) { $plugin_array [ "true_mce_button" ] = get_stylesheet_directory_uri() ."/true_button.js" ; return $plugin_array ; } // Регистрируем кнопку в редакторе function true_register_mce_button( $buttons ) { array_push ( $buttons , "true_mce_button" ) ; // true_mce_button - идентификатор кнопки return $buttons ; }

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

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

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

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

В результате:

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

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

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

(function () { tinymce.PluginManager.add("true_mce_button" , function ( editor, url ) { // id кнопки true_mce_button должен быть везде один и тот же editor.addButton( "true_mce_button" , { // id кнопки true_mce_button icon: "perec" , // мой собственный CSS класс, благодаря которому я задам иконку кнопки type: "menubutton" , title: "Вставить элемент" , // всплывающая подсказка при наведении menu: [ // тут начинается первый выпадающий список { text: "Элементы форм" , menu: [ // тут начинается второй выпадающий список внутри первого { text: "Текстовое поле" , onclick: function () { editor.windowManager.open( { title: "Задайте параметры поля" , body: [ { type: "textbox" , name: "textboxName" , // ID, будет использоваться ниже label: "ID и name текстового поля" , // лейбл value: "comment" // значение по умолчанию } , { type: "textbox" , // тип textbox = текстовое поле name: "multilineName" , label: "Значение текстового поля по умолчанию" , value: "Привет" , multiline: true , // большое текстовое поле - textarea minWidth: 300 , // минимальная ширина в пикселях minHeight: 100 // минимальная высота в пикселях } , { type: "listbox" , // тип listbox = выпадающий список select name: "listboxName" , label: "Заполнение" , "values" : [ // значения выпадающего списка { text: "Обязательное" , value: "1" } , // лейбл, значение { text: "Необязательное" , value: "2" } ] } ] , onsubmit: function ( e ) { // это будет происходить после заполнения полей и нажатии кнопки отправки editor.insertContent( "" ) ; } } ) ; } } , { // второй элемент вложенного выпадающего списка, прост вставляет шорткод text: "Кнопка отправки" , onclick: function () { editor.insertContent("" ) ; } } ] } , { // второй элемент первого выпадающего списка, просто вставляет text: "Шорткод " , onclick: function () { editor.insertContent("" ) ; } } ] } ) ; } ) ; } ) () ;

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