Вордпресс shortcode. Шорткоды 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("" ) ; } } ] } ) ; } ) ; } ) () ;

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

Начиная с версии 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

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

    Шорткоды WordPress являются мощной, но до сих пор малоизвестной функцией системы управления сайтом. Чтобы показать рекламу в блоге, достаточно просто напечатать слово adsense. С помощью команды post_count можно мгновенно узнать количество публикаций. Подобных примеров множество. Наборы функций могут существенно упростить работу блогера.

    Пример простого шорткода

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

    Первая часть записи является массивом, состоящим из атрибутов id и color. Вместо этих значений в открывающем теге можно указать любые параметры с желаемыми именами. Вторая часть записи является текстом. Для того чтобы обработать его, необходимо перевести всю запись в PHP. Пользователь получит строку следующего содержания: my_shortcode(array("id"=>"1", "color"="white"), "Какое-то предложение").

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

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

    Использовать наборы функций очень просто. Блогеру нужно создать новый пост или открыть для редактирования уже имеющуюся запись. Затем необходимо переключить редактор текста на HTML-режим и указать код в . Можно также использовать атрибуты. Запись будет выглядеть так: .

    В шорткоды можно встраивать любой контент: текст. В WordPress 2.5 введен набор функций, называемый Shortcode API. После сохранения поста содержание записи обрабатывается. Параллельно Shortcode API преобразует шорткоды для исполнения возложенных на них функций.

    Назначение

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

    Создание шорткодов

    Если пользователь знает, как напечатать простую PHP-функцию, то он с легкостью достигнет поставленной цели. Для создания шорткода нужно найти и открыть один из файлов WordPress functions.php. Затем необходимо вставить строку function hello() {return "Привет, мир!";}. Этим действием будет создана функция, отвечающая за вывод указанного текста. Чтобы трансформировать ее в шорткод, требуется вставить команду add_shortcode()» после опции «hello().

    Строка будет выглядеть так: add_shortcode("hw", "hello");. После создания шорткода пользователь может использовать его в заметках и на страницах. Для этого необходимо переключиться в HTML-режим и ввести строку . Этот шорткод является наглядным примером того, насколько просто создавать подобные наборы функций.

    Использование плагинов

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

    WP Shortcode by MyThemeShop

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

    Shortcodes Ultimate

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

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

    Fruitful Shortcodes

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

    Блогер может работать с горизонтальными и вертикальными табами, колонками, разделителями и т. д. Добавленные элементы мгновенно отображаются в графическом редакторе. Пользователь может выключить их для постов или веб-страниц с помощью раздела «Настройки».

    Shortcoder

    Этот плагин также часто встречается в разных подборках. Расширение обновляется очень редко. Пользователь может создавать наборы функций с применением HTML и JavaScript-кодов. Одним из самых простых примеров является размещение рекламного блока в тексте. Для этого нужно создать набор функций adsenseAd.

    Плагин Shortcoder - это очень гибкий инструмент. Здесь не удастся найти базовые шорткоды. Пользователь может создать необходимые элементы самостоятельно.

    Easy Bootstrap Shortcode

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

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

    WP Canvas - Shortcodes

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

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

    Arconix Shortcodes

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

    Simple Shortcodes

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

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

    Шорткоды WordPress: настройка

    Как вывести ссылку для публикации поста в социальной сети «Твиттер»? Для этого требуется открыть файл functions.php и вставить рядом с другими шорткодами WordPress в PHP строку следующего содержания: function twitt(){return "ID).""title="поделись заметкой с друзьями!" >отправить";}add_shortcode("twitter", "twitt");.

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

    Набор функций "подпишись на RSS"

    Одним из самых эффективных способов увеличения числа подписчиков является показ правильно оформленного сообщения. Блогеру не нужно менять весь код темы для WordPress. Пользователь должен решить самостоятельно, где будет выводиться набор функций. Код выглядит так: function subscribeRss() {return "Подписка ";} add_shortcode("subscribe", "subscribeRss");.

    Добавление Google AdSense

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

    Добавление RSS-канала

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

    Добавление постов из базы данных

    Чтобы вызвать перечень статей прямо в редакторе, нужно создать шорткод, переключиться на HTML-режим и вставить строку . Эта команда позволит вывести список пяти постов из категории с ID 2. Стоит обратить внимание на то, что плагины WordPress могут отображать связанные между собой записи. Однако с помощью шорткода блогер легко получит список любого количества публикаций из отдельной категории.

    Вызов картинки последней статьи

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

    Добавление наборов функций в виджеты

    Стоит обратить внимание на то, что в боковых колонках сайта ни один шорткод WordPress не работает. Ограничение платформы можно обойти. Для этого необходимо открыть файл темы для WordPress functions.php и вставить строку add_filter(‘widget_text’, ‘do_shortcode’);. Шорткод будет добавлен в виджет.

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

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

    WP Shortcode by MyThemeShop

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

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

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

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

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

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

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

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

    Плагины WordPress

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

    1. Shortcode

    Простой плагин, который добавляет несколько полезных шорткодов , предназначенных для отображения количественных характеристик вашего блога:

    [ postcountbr ] — отображает общее количество опубликованных в блоге записей;
    [ catcountbr ] — отображает общее количество категорий, которые содержат одну или более запись;
    [ tagcountbr ] — отображает общее количество тегов, которые содержатся в одной или более записи;
    [ totalwords ] — отображает общее количество слов в опубликованных записях;
    [ commentcount ] — отображает общее число одобренных комментариев;
    [ PageCount ] — отображает общее количество опубликованных страниц.

    2. WordPress Shortcodes

    Этот плагин включает в себя более 20 шорткодов WordPress и простой редактор шорткодов.

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

    • SEO-ready вкладки, кнопки;
    • Карточки авторов;
    • Окна сообщений;
    • Смарт-ссылки;
    • Разделы;
    • Списки и т.д.

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


    Другие варианты : Существует два аналогичных плагина J Shortcodes и Arconix Shortcodes — которые также включают в себя набор полезных шорткодов. Например, для создания контента и информационных панелей, кнопок, вкладок, выпадающих панелей, переключателей и многого другого. 3. Post Content Shortcodes

    Этот плагин добавляет в блог два шорткода:

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

    — отображает список записей внутри другой записи. Этот шорткод также поддерживает опциональные аргументы для настройки списков: опции упорядочения элементов, типы/статусы сообщений, вывод изображений и т.д. Вы даже можете подтянуть список записей из другого блога, добавив ID блога в качестве аргумента в шорткод.

    4. Shortcoder

    Плагин Shortcoder позволяет создавать пользовательские шорткоды через визуальный редактор. Вы также можете хранить часто используемые тексты, HTML и фрагменты JavaScript.

    Плагин имеет встроенную кнопку TinyMCE, которую можно использовать в редакторе блога, чтобы вставлять шорткоды. Это позволит вам добавлять свои собственные шорткоды:


    Другие варианты : Если вы ищете нечто подобное, попробуйте плагин Shortcode Manager, который позволяет создавать, управлять, импортировать и экспортировать шорткоды. 5. Hide Broken Shortcodes

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

    Другие варианты : Hide Unwanted Shortcodes аналогичный плагин, который делает «битые» шорткоды недоступными для просмотра на сайте. После этого вы можете отредактировать шорткод на странице настроек плагина.

    6. Column Shortcodes

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

    На выбор предлагается 10 размеров столбцов: от одной шестой до всей ширины страницы. Вы также можете настроить заполнение каждого отдельного столбца:

    7. Metaphor Shortcodes

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

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

    • Post Block Shortcode — отображает название и выдержку из любого типа сообщений в любом месте вашего блога;
    • Post Slider Shortcode — создает горизонтальный слайдер для любого типа сообщений и выводит его в контенте блога;
    • Pricing Table Shortcode — создает различные типы таблиц прайсов для отображения в контенте вашего блога.
    8. ShortCodes UI

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

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

    Другие варианты : My Shortcodes — это аналогичный плагин с красивым интерфейсом, который позволяет создавать собственные шорткоды.

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

    9. Last Updated Shortcode

    Это очень простой плагин, который позволяет добавить шорткод [ LastUpdated ] в ваши записи и страницы. Данная функция будет отображать дату и / или время последнего обновления.

    Есть также опции для изменения формата отображения даты / времени.

    10. Geoportail Shortcode

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

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

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

    Шорткоды

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

    Для каждого шорткода мы предоставим вам:

    • Тело шорткода — длинный кусок кода, который должен быть вставлен в файл функций темы (functions.php) вашего блога, вставка осуществляется через «Редактор», доступный в панели инструментов WordPress (Дизайн > Редактор);
    • Шорткод , который может быть размещен в любом месте вашей записи или страницы, через него подключается функционал.

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

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

    Insert AdSense Ads

    Вставляет блок объявления Google AdSense в том месте вашего контента, где вам нужно.

    Шорткод :

    Код :

    function adsense_shortcode($atts) { extract(shortcode_atts(array("format" => "1",), $atts)); switch ($format) { case 1: $ad = " "; break; } return $ad; } add_shortcode("adsense", "adsense_shortcode");

    Show Related Posts

    Выводит список похожих записей выше или ниже контента страницы.

    Шорткод :

    Код :

    function related_posts_shortcode($atts) { extract(shortcode_atts(array("limit" => "5",), $atts)); global $wpdb, $post, $table_prefix; if ($post->ID) { $retval = "

      "; // Get tags $tags = wp_get_post_tags($post->ID); $tagsarray = array(); foreach ($tags as $tag) { $tagsarray = $tag->term_id; } $tagslist = implode(",", $tagsarray); // Do the query $q = "SELECT p.*, count(tr.object_id) as count FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ="post_tag" AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID AND p.post_status = "publish" AND p.post_date_gmt < NOW() GROUP BY tr.object_id ORDER BY count DESC, p.post_date_gmt DESC LIMIT $limit;"; $related = $wpdb->get_results($q); if ($related) { foreach($related as $r) { $retval .= "
    • post_title)."" href="".get_permalink($r->ID)."">".wptexturize($r->post_title)."
    • "; } else { $retval .= "
    • No related posts found
    • "; } $retval .= "
    "; return $retval; } return; } add_shortcode("related_posts", "related_posts_shortcode");

    Insert PayPal Donation Link

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

    Шорткод :

    Код :

    function donate_shortcode($atts, $content = null) { global $post;extract(shortcode_atts(array("account" => "your-paypal-email-address", "for" => $post->post_title, "onHover" => "",), $atts)); if(emptyempty($content)) $content="Make A Donation"; return " "940", "height" => "300", "src" => ""), $atts)); return " "; } add_shortcode("googlemap", "rockable_googlemap");

    Display External Files

    Вставляет дополнительные файлы, такие как текст и изображения, в ваши сообщения.

    Шорткод :

    Код :

    function show_file_func($atts) { extract(shortcode_atts(array("file" => ""), $atts)); if ($file!="") return @file_get_contents($file); } add_shortcode("show_file", "show_file_func");

    Add A Login Form