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

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

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

  • Подключение сторонних скриптов и запуск только при наличии шорткода на странице.
  • Многоуровневый шорткод.
    • Составной шорткод.
    • Вложенность шорткодов.
  • Подготовка почвы Прежде чем начать создавать что-либо, предлагаю свой вариант размещения файлов:/
    /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");

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

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

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

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

    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 = ""; if(is_array($GLOBALS["plans"])) { foreach ($GLOBALS["plans"] as $plan) { $planContent = ""; $planContent .= $plan; $planContent .= ""; $output .= $planContent; } } $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 = ""; $plan_title .= " "; $plan_title .= ""; // Подоготавливаем HTML: стоимость $f_price = round(floatval($price), 2); $f_price = ($f_Price > 0) ? $f_Price: 0; $s_price = "$".$f_Price; $price_plan = ""; $price_plan .= "

    ".$s_price."

    "; $price_plan .= " ".$text.""; $price_plan .= ""; // инициализация глобальных переменных для опций $GLOBALS["plan-options-count"] = 0; $GLOBALS["plan-options"] = array(); // читаем контент и выполняем внутренние шорткоды do_shortcode($content); // Подоготавливаем HTML: опции $plan_options = ""; if (is_array($GLOBALS["plan-options"])) { foreach ($GLOBALS["plan-options"] as $option) { $plan_options .= $option; } } $s_OptionsDiv.= ""; // Подоготавливаем 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 = ""; $plan_option .= "

    ".do_shortcode($content)."

    "; $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 "".do_shortcode($content).""; } В этом случае исходный синтаксис станет: Content Content Content

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

    Шорткоды — это функции 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("" ) ; } } ] } ) ; } ) ; } ) () ;

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

      Всем привет.

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

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

      Например,
      the_permalink()
      работает при вставке в контент и при вставке через шорткод, созданный через тему.

      Но, например, при использовании скрипта share42, все работает, кроме php-кода (the_permalink()) и т.д. Код курочить нельзя, другие возможности пока осваиваю.
      Пробовал вставлять в тему в разные места. Просто
      the_permalink()
      работает, а

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

      Собственно вопрос 1, так нормально? Не будет каких подводных камней?
      Такие простейшие плагины я видел в репозитарии вордпрес.

      И вопрос 2, как лучше, сделать отдельно плагин на каждый шорткод или один плагин на все шорткоды?

      Это называется велосипед велосипедистый на костылях. Зачем? Есть же правильный вариант — написать свой шорткод. Не умеете, или сложно разобраться? — наймите специалиста и пусть вам сделает правильно. Задача у вас простая — такса большой быть не должна. На том же кворке за 500р вам сделают

      Что значит написать свой шорткод?

      Например,

      Function my_title_shortcode($atts) { return get_the_title(); } add_shortcode("my_title", "my_title_shortcode");

      и затем использовать вместо the_title() .

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

      P.S. Выводить the_title() в атрибут не стоит, рискуете поломать верстку. Либо пользуйтесь экранированием esc_attr(get_the_title()), либо сразу выводите экранированный заголовок с помощью the_title_attribute().

      Плагином для шорткодов мне смысла пользоваться нет, тема сама позволяет их создавать. Просто при вставке share42 с помощью шорткодов или через тему — php код не срабатывает. Наверное потому, что он как-то обрабатывается через javascript share42. Собственно, чтобы не курочить код темы, я сделал простейший плагин для создания шорткода. Так работает. Думаю, что если сделать дочернюю тему и там создать шорткод — тоже будет работать. Собственно вопрос, как лучше, создавать дочернюю тему или сделать плагин? И если плагин, то лучше в одном плагине создать все шорткоды или отдельный плагин для каждого. Под плагином я имею введу код

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

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

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

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

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

    Как и со всеми функциями, добавление осуществляется в файл functions.php , в самый его конец, но перед закрывающим тегом ?> . Назовем функцию text_short . Внутри нее добавим нужный текст, который потом выведем вызовом.

    Function text_short() { return "Любой нужный текст. который нужно выводить внутри текста Вашей записи."; }

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

    Add_shortcode("ts", "text_short");

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

    Function text_short() { return "Любой нужный текст. который нужно выводить внутри текста Вашей записи."; } add_shortcode("ts", "text_short");

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

    Вот так все просто.

  • Создаем функцию
  • Делаем ее шорткодом
  • Вызываем внутри записи
  • Function reklama() { return " (adsbygoogle = window.adsbygoogle || ).push({}); "; } add_shortcode("rek_sh", "reklama");

    И шорткод

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

    Создаем шорткод

    Function gb_bgrnd($attr,$content= null){ return" .redbg{ background-color: #f00; padding:3px 5px;} ".$content.""; } add_shortcode("gbb_sh", "gb_bgrnd");

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

    Текст что будет выделяться

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

    Как вставить шорткод в виджет WordPress

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

    Add_filter("widget_text", "do_shortcode");

    Как вывести шорткод в любом месте темы WordPress

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

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

    У них вид как у закомментированного текста. поэтому стандартные методы не подойдут. Такие шорткоды использует, например, плагин - WpShop . Для вывода таких шорткодов от плагина, нужно использовать такой способ с фильтром:

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

    Используете ли Вы шорткоды у себя на сайте?

    На этом все, спасибо за внимание. 🙂