WordPress shortcode

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

 

Специально для тех, кто и так все знает, а просто ищет быстрый ответ, как вставить шорткод в шаблон wordpress или на другой движок, то вот, пожалуйста, используйте этот код:

Однако не забывайте про пунктуацию! Кавычки в вашем шорткоде и в php коде должны быть разными.

Т.е., если в вашем шаблоне сайта на wordpress, вы используете такой же шорткод, но с двумя кавычками внутри ( [«…»] ), и в вашем php-коде вы также используете двойные кавычки ( «[…]» ), то нужно одни из них поменять на одинарные. Именно из-за таких мелких причин часто не работают шорткоды в wordpress. Подробнее об этом ниже.

 

Что такое шорткод (shortcode), и для чего он нужен?

Shortcode – это от англ. «короткий код». Используется он, в основном, при создании плагинов или модулей, предназначенных для работы с системами управления контентом (CMS), например, WordPress, Joomla и др. Проще говоря, этот короткий код является неким ярлыком, который, при добавлении на сайт, подтягивает за собой весь большой код из плагина.

Выглядит шорткод обычно так:  или так  или даже просто в одно слово

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

 

Как это работает?

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

а всего лишь вот такой короткий код (Shortcode) в одну строку:

 

Вставив подобный этому

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

 

А как вставить шорткод слайдера прямо в шаблон wordpress в php-код?

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

Такую «функцию» шорткода можно вставить в php-файл в нужное вам место на сайте. Например, в header.php, где-нибудь после body или, может быть, в sidebar.php, а лучше всего в файл шаблона страницы (он может называться как-нибудь так content-page.php), в результате, вы получите тот же слайдер, но уже встроенный в дизайн самого сайта.

Однако нужно быть очень внимательными при выводе шорткода в шаблоне wordpress в php-файлах. Для этого нужны хотя бы элементарные знания php. Поскольку, если его «не туда» вставить в php-файле, то на сайте будет выведена ошибка.

Обычно любой php-код начинается на <?php и заканчивается на ?>. Вот после окончания одного php-кода и перед началом другого можете вставлять свою php-функцию. К сожалению, разработчики плагинов не всегда делают готовую (как в данном примере) php-функцию для вывода шорткода. В таком случае, можно самим ее создать легко и просто, об этом ниже.

 

Как вывести шорткод в php в wordpress, если нет готовой php-функции в плагине?

Бывают плагины, в которых их разработчики решили не указывать готовую php-функцию для вставки шорткода в файлы шаблона сайта (как было в прошлом примере), а указывают лишь шорткод. Вот как, например, в этом плагине слайдера:

 

Что делать в этом случае, ведь нам нужно вставить шорткод в шаблон wordpress и непосредственно в php-файл на сайте? В таком случае необходимо просто самим обернуть шорткод php-функцией вывода, которая была показана в самом начале статьи. В результате, с учетом нашего шорткода, у нас получиться вот такой вид php-функции:

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

 

dumajkak.ru

Лучшие дополнения для работы с шорткодами WordPress

1. Simple Shortcodes

Это в первую очередь простой плагин, который позволяет размещать на страницах сайта основные шорткоды для переключателя, вкладок и функций редактора. Основное преимущество использования плагина в том, что независимо от установленной на сайте темы, его функции будут неизменными (функция «do shortcode» всегда будет активирована). Данный модуль постоянно обновляется. Но он рассчитан преимущественно на англоязычную аудиторию, потому русской поддержки нет. Распространяется плагин бесплатно. В пользовании очень простой.

2. Vision Shortcodes

Удивительная разработка от компании CodeCanyon. Значительно упрощает процесс вставки и использования шорткодов. Работает с абсолютно любой темой Вордпресс по принципу Easy to do. В запасе имеет более сотни рабочих шорткодов: прогресс бары, иконки загрузки, таблицы цен, меню типа «аккордеон», разделители, большие буквы для начала статей и другое. Подходит как для инфосайтов, так и для продающих. Модуль этот платный, но его возможности полностью себя окупают.

3. Shortcodes Pro

Нет объективной причины, чтобы не установить этот плагин. Он не содержит в себе бесполезные шорткоды, а позволяет пользователю самостоятельно пополнять их коллекцию. Таким образом, каждый создает для себя уникальный Shortcodes Pro, пополняя его шорткодами. А поскольку распространяется данный модуль на бесплатной основе, его стоит установить каждому, кто хоть когда-то планирует сменить тему сайта, и при это не потерять все его важные функции и элементы оформления.

4. GT Shortcodes

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

• меню «аккордеон»;
• анимация;
• добавление кнопки;
• графики и диаграммы;
• колонки;
• разные типы списков (цифровой, маркированный);
• выделение кавычками и создание цитат на странице;
• Гугл карты и другие шорткоды.

Прекрасно справляется с любой установленной темой (девиз плагина: «Do everything!»). Содержит множество стилевых и цветовых решений для функций шорткодов. Весьма прост в использовании, так как работает по принципу Easy to do.

5. Shortcodes Ultimate

Революционный плагин для вставки в WordPress shortcode. Модуль предоставляется бесплатно, потому уже сейчас можете установить его к себе на движок, и в редакторе страниц Вордпресс появится значок «Insert shortcode». Нажав на него перед вами откроется каталог из более, чем 30 различных функций для вставки. Это дополнение не требует каких-либо настроек — сразу после установки можно добавлять на площадку шорткоды боксов, кнопок, категорий, галерей, слайдеров и горизонтальных «каруселей».

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

6. Styles With Shortcodes

Styles With Shortcodes — превосходный генератор шортокодов для сайта. Это премиальный плагин, которые нельзя получить бесплатно. После приобретения модуля вы получите доступ примерно к 100 миникодов, которые в сумме обеспечивают весь набор важных функций для сайта (социальные кнопки, диалоговые окна для взаимодействия с пользователем, множество типов кнопок, кавычки). Плагин подойдет для тех, кто не знаком с языками CSS, PHP и Java, но хотел бы воспользоваться их функциями.

7. Zilla Shortcodes

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

8. WordPress Shortcodes

Этот плагин по всему миру собрал больше 100 тысяч пользователей. И это неспроста, ведь дополнение позволяет быстро и просто вставить самые необходимые шорткоды для украшения постов:

• разноцветные маленькие и большие кнопки или иконы (инфобоксы, загрузочные боксы, биографические и т. д.);
• разделители, которые позволяют скрывать часть текста и открывать после нажатия на кнопку;
• категории статей (функция отлично подходит для поэтапных уроков: чтобы сильно не растягивать полотно статьи, его можно поделить на разделы «DO 1», «DO 2», «DO 3» и т. д.);
• слайдеры для картинок и материалов другого формата;
• всплывающие подсказки;
• социальные кнопки «Поделиться» и «Мне нравится»;
• инфо об авторе;
• колонки;
• корпоративный прайс-лист;
• отзывы;
• заглавные буквы и цитирование.

9. Intense Shortcodes

Еще один плагин от разработчика CodeCanyon. Данное дополнение постоянно развивается. Примерно за год количество шорткодов в модуле увеличилось с 45 до 110. Чтобы добавить шорткоды на страницу при помощи данного приложения, достаточно после установки нажать кнопку Shortcodes в редакторе и выбрать из каталога один из кодов — принцип легкого управления Easy to do. Добавлять можно элементы страницы (кнопки, социальные иконы, RSS), разметки (боксы, таблицы и другое), поста и текста (выделение в скобки, заглавные, добавление тегов и т. д.). Intense Shortcodes содержит 19 готовых к использованию стилей постинга. Плагин предоставляется платно, и является одним из бестселлеров данной сферы дополнений.

10. Arconix Shortcode Collection

Это базовый плагин, который предоставляет самые основные шорткоды для пользователей (так сказать, список «Must Do»-кодов для любого блога и корпоративного ресурса):

• плавное меню аккордеон;
• удобный разделитель текста с кнопкой «+» для открытия второй части материала;
• категории для статей с иконками в заглавиях;
• больше 10 видов боксов (советы, загрузка, заметки, «Внимание», для комментариев и т. д.);
• разноцветные и прозрачные кнопки (классические, круглые, мелкие и большие, квадратные, с иконками);
• несколько типов списков.

11. Visual Composer For WordPress

Плагин Visual Composer For WordPress был скачан уже более миллиона раз. Это одновременно и строитель страниц для движка Вордпресс, и мощный каталог шорткодов для добавления на сайт. Работает как с телефона, так и с компьютера с любой темой. Используя данный модуль можно полностью самому оформить сайт без применения единого кода (конечно, за исключением шорткодов). Данный плагин платный, но количество его функционала заменит любой другой модуль подобного типа. Он предоставляет следующие возможности:

• разделительные линии для статей и заголовков;
• 10+ диалоговых окон;
• колонки;
• категории для статей с фоновым оформлением и рамками;
• видеоплеер;
• прогресс бар;
• кнопка призыва к действию;
• виджеты;
• иконки и многое другое.

В данном обзоре рассмотрены 11 лучших дополнений для работы с шорткодами.

Если у вас небольшой бюджет, и вы просто хотите украсить содержимое своей площадки, лучше воспользуйтесь бесплатными модулями. В Рунете самый популярный — это Shortcodes Ultimate.

Он содержит все необходимое для работы, и доступен на русском языке. А если хотите что-то посерьезнее, тогда придется немного потратиться на Visual Composer For WordPress. Зато и шорткоды сможете добавлять на ресурс, и страницы генерировать.

Похожие статьи

wordpresslib.ru

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

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

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

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

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

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

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

Назначение

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

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

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

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

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

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

WP Shortcode by MyThemeShop

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

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

Shortcodes Ultimate

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

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

Fruitful Shortcodes

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

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

Shortcoder

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

Затем необходимо добавить туда код рекламного блока. Далее следует вызвать его в посте командой [sc: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 ‘<div id=»twitit»><a href=»страница входа на сайт =Currently reading ‘.get_permalink($post->ID).'»title=»поделись заметкой с друзьями!» >отправить</a></div>’;}add_shortcode(‘twitter’, ‘twitt’);.

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

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

Одним из самых эффективных способов увеличения числа подписчиков является показ правильно оформленного сообщения. Блогеру не нужно менять весь код темы для WordPress. Пользователь должен решить самостоятельно, где будет выводиться набор функций. Код выглядит так: function subscribeRss() {return ‘<div class=»rss-box»><a href=»ссылка на сайт «>Подписка </a></div>’;} add_shortcode(‘subscribe’, ‘subscribeRss’);.

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

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

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

Чтобы выполнить эту задачу, нужно преобразовать функцию в шорткод. Затем необходимо включить HTML-режим и вставить в поле редактора строку [rss feed=»ссылка » num=»3″]. Первый атрибут указывает на URL RSS-ленты, а второй – на количество заметок для вывода.

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

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

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

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

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

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

fb.ru

1. Shortcodes Ultimate

Shortcodes Ultimate – наиболее популярный плагин в репозитории WordPress, имеющий более 780 000 загрузок. Он обещает «супервозможности для вашей темы WordPress с мега-пакетом шорткодов» и предоставляет их.

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

Особенности плагина:

• Генератор шорткодов
• 50+ шорткодов
• Адаптивный дизайн
• CSS3
• Пользовательский CSS редактор с подсветкой синтаксиса
• Пользовательские виджеты
• Богатый API.

Имеются также премиум-аддоны – 15+ дополнительных шорткодов, 60+ дополнительных скинов и шорткод-блок для создания пользовательского кода.

 

2. WordPress Shortcodes

WordPress Shortcodes – ещё один популярный плагин, имеющий почти 150 000 загрузок в репозитории WordPress.

Он позволяет создавать SEO-адаптивные вкладки, разделы/секции, кнопки, ссылки на контент, авторские карты, списки, макеты и другие элементы.

Другие особенности:

• 26+ шорткодов
• Редактор шорткодов с моментальным предпросмотром
• Настройка вида шорткодов с помощью CSS.

 

3. Shortcoder

Shortcoder — позволяет создавать собственные пользовательские шорткоды на языках HTML и JavaScript для использования их в записях и на страницах.

Этот простой в использовании плагин особенно удобен при добавлении на сайт объявления, а также вставки видео и других медиа.

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

4. Easy Bootstrap Shortcode

Easy Bootstrap Shortcode — легко добавит на ваш сайт стиль Bootstrap.

Этот совместимый с Bootstrap 3.0.3 плагин имеет 500+ шрифтов и иконок, возможность добавления иконок в редактор, пользовательские CSS, новый виджет сайдбара и опции для добавления префикса в пользовательский код.

5. Simple Shortcodes

Если вы ищете простой плагин шорткодов без всяких наворотов, тогда Simple Shortcodes – для вас.

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

Хотя Simple Shortcodes был разработан специально для работы с темами от simplethemes.com, он по-прежнему работает с любой темой.

clubwp.ru

The Shortcode API

The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages. For instance, the following shortcode (in the body of a post or page) would add a photo gallery of images attached to that post or page:

The API enables plugin developers to create special kinds of content (e.g. forms, content generators) that users can attach to certain pages by adding the corresponding shortcode into the page text.

The Shortcode API makes it easy to create shortcodes that support attributes like this:

The API handles all the tricky parsing, eliminating the need for writing a custom regular expression for each shortcode. Helper functions are included for setting and fetching default attributes. The API supports both self-closing and enclosing shortcodes.

As a quick start for those in a hurry, here’s a minimal example of the PHP code required to create a shortcode:

 //[foobar] function foobar_func( $atts ){ 	return "foo and bar"; } add_shortcode( 'foobar', 'foobar_func' ); 

This will create [foobar] shortcode that returns as: foo and bar

With attributes:

 // [bartag foo="foo-value"] function bartag_func( $atts ) { 	$a = shortcode_atts( array( 		'foo' => 'something', 		'bar' => 'something else', 	), $atts );  	return "foo = {$a['foo']}"; } add_shortcode( 'bartag', 'bartag_func' ); 

This creates a «[bartag]» shortcode that supports two attributes: [«foo» and «bar»]. Both attributes are optional and will take on default options [foo=»something» bar=»something else»] if they are not provided. The shortcode will return as foo = {the value of the foo attribute}.

Overview

Shortcodes are written by providing a handler function. Shortcode handlers are broadly similar to WordPress filters: they accept parameters (attributes) and return a result (the shortcode output).

Shortcode names should be all lowercase and use all letters, but numbers and underscores should work fine too. Be wary of using hyphens (dashes), you’ll be better off not using them.

The add_shortcode function is used to register a shortcode handler. It takes two parameters: the shortcode name (the string used in a post body), and the callback function name.

Three parameters are passed to the shortcode callback function. You can choose to use any number of them including none of them.

• $atts — an associative array of attributes, or an empty string if no attributes are given
• $content — the enclosed content (if the shortcode is used in its enclosing form)
• $tag — the shortcode tag, useful for shared callback functions

The API call to register the shortcode handler would look something like this:

add_shortcode( 'myshortcode', 'my_shortcode_handler' ); 

When the_content is displayed, the shortcode API will parse any registered shortcodes such as «[myshortcode]», separate and parse the attributes and content, if any, and pass them the corresponding shortcode handler function. Any string returned (not echoed) by the shortcode handler will be inserted into the post body in place of the shortcode itself.

Shortcode attributes are entered like this:

[myshortcode foo="bar" bar="bing"] 

These attributes will be converted into an associative array like the following, passed to the handler function as its $atts parameter:

array( 'foo' => 'bar', 'bar' => 'bing' ) 

The array keys are the attribute names; array values are the corresponding attribute values. In addition, the zeroeth entry ($atts[0]) will hold the string that matched the shortcode regex, but ONLY IF that is different from the callback name. See the discussion of attributes, below.

Handling Attributes

The raw $atts array may include any arbitrary attributes that are specified by the user. (In addition, the zeroeth entry of the array may contain the string that was recognized by the regex; see the note below.)

In order to help set default values for missing attributes, and eliminate any attributes that are not recognized by your shortcode, the API provides a shortcode_atts() function.

shortcode_atts() resembles the wp_parse_args function, but has some important differences. Its parameters are:

shortcode_atts( $defaults_array, $atts ); 

Both parameters are required. $defaults_array is an associative array that specifies the recognized attribute names and their default values. $atts is the raw attributes array as passed into your shortcode handler. shortcode_atts() will return a normalized array containing all of the keys from the $defaults_array, filled in with values from the $atts array if present. For example:

 $a = shortcode_atts( array( 	'title' => 'My Title', 	'foo' => 123, ), $atts ); 

If $atts were to contain array( 'foo' => 456, 'bar' => 'something' ), the resulting $a would be array( 'title' => 'My Title', 'foo' => 456 ). The value of $atts['foo'] overrides the default of 123. $atts['title'] is not set, so the default ‘My Title’ is used. There is no ‘bar’ item in the defaults array, so it is not included in the result.

Attribute names are always converted to lowercase before they are passed into the handler function. Values are untouched. [myshortcode FOO="BAR"] produces $atts = array( 'foo' => 'BAR' ).

A suggested code idiom for declaring defaults and parsing attributes in a shortcode handler is as follows:

 function my_shortcode_handler( $atts, $content = null ) { 	$a = shortcode_atts( array( 		'attr_1' => 'attribute 1 default', 		'attr_2' => 'attribute 2 default', 		// ...etc 	), $atts ); } 

This will parse the attributes, set default values, eliminate any unsupported attributes, and store the results in a local array variable named $a with the attributes as keys — $a['attr_1'], $a['attr_2'], and so on. In other words, the array of defaults approximates a list of local variable declarations.

---

IMPORTANT TIP — Don’t use camelCase or UPPER-CASE for your $atts attribute names

$atts values are lower-cased during shortcode_atts( array( 'attr_1' => 'attr_1 default', // ...etc ), $atts ) processing, so you might want to just use lower-case.

---

---

NOTE on confusing regex/callback name reference

The zeroeth entry of the attributes array ($atts[0]) will contain the string that matched the shortcode regex, but ONLY if that differs from the callback name, which otherwise appears as the third argument to the callback function.

(Appears to always appear as third argument as of 2.9.2.)

 add_shortcode('foo','foo'); // two shortcodes referencing the same callback  add_shortcode('bar','foo');  produces this behavior:  [foo a='b'] ==> callback to: foo(array('a'=>'b'),NULL,"foo");  [bar a='c'] ==> callback to: foo(array(0 => 'bar', 'a'=>'c'),NULL,""); 

This is confusing and perhaps reflects an underlying bug, but an overloaded callback routine can correctly determine what shortcode was used to call it, by checking BOTH the third argument to the callback and the zeroeth attribute. (It is NOT an error to have two shortcodes reference the same callback routine, which allows for common code.)

Output

The return value of a shortcode handler function is inserted into the post content output in place of the shortcode macro. Remember to use return and not echo — anything that is echoed will be output to the browser, but it won’t appear in the correct place on the page.

Shortcodes are parsed after wpautop and wptexturize post formatting has been applied. This means that your shortcode output HTML won’t automatically have curly quotes applied, p and br tags added, and so on. If you do want your shortcode output to be formatted, you should call wpautop() or wptexturize() directly when you return the output from your shortcode handler.

wpautop recognizes shortcode syntax and will attempt not to wrap p or br tags around shortcodes that stand alone on a line by themselves. Shortcodes intended for use in this manner should ensure that the output is wrapped in an appropriate block tag such as <p> or <div>.

If the shortcode produces a lot of HTML then ob_start can be used to capture output and convert it to a string as follows:-

 function my_shortcode() { 	ob_start(); 	?> <HTML> <here> ... <?php 	return ob_get_clean(); } 

Enclosing vs self-closing shortcodes

The examples above show self-closing shortcode macros such as [myshortcode]. The API also supports enclosing shortcodes such as [myshortcode]content[/myshortcode].

If a shortcode macro is used to enclose content, its handler function will receive a second parameter containing that content. Users might write shortcodes in either form, so it is necessary to allow for either case by providing a default value for the second parameter to your handler function:

function my_shortcode_handler( $atts, $content = null ) 

empty( $content ) can be used to distinguish between the self-closing and enclosing cases.

When content is enclosed, the complete shortcode macro including its content will be replaced with the function output. It is the responsibility of the handler function to provide any necessary escaping or encoding of the raw content string, and include it in the output.

Here’s a trivial example of an enclosing shortcode:

 function caption_shortcode( $atts, $content = null ) { 	return '<span class="caption">' . $content . '</span>'; } add_shortcode( 'caption', 'caption_shortcode' ); 

When used like this:

My Caption 

The output would be:

<span class="caption">My Caption</span> 

Since $content is included in the return value without any escaping or encoding, the user can include raw HTML:

<a href="http://example.com/">My Caption</a> 

Which would produce:

<span class="caption"><a href="http://example.com/">My Caption</a></span> 

This may or may not be intended behaviour — if the shortcode should not permit raw HTML in its output, it should use an escaping or filtering function to deal with it before returning the result.

The shortcode parser uses a single pass on the post content. This means that if the $content parameter of a shortcode handler contains another shortcode, it won’t be parsed:

Caption: [myshortcode] 

This would produce:

<span class="caption">Caption: [myshortcode]</span> 

If the enclosing shortcode is intended to permit other shortcodes in its output, the handler function can call do_shortcode() recursively:

function caption_shortcode( $atts, $content = null ) { 	return '<span class="caption">' . do_shortcode($content) . '</span>'; } 

In the previous example, this would ensure the «[myshortcode]» macro in the enclosed content is parsed, and its output enclosed by the caption span:

<span class="caption">Caption: The result of myshortcode's handler function</span> 

The parser does not handle mixing of enclosing and non-enclosing forms of the same shortcode as you would want it to. For example, if you have:

[myshortcode example='non-enclosing' /] non-enclosed content [myshortcode] enclosed content [/myshortcode] 

Instead of being treated as two shortcodes separated by the text » non-enclosed content «, the parser treats this as a single shortcode enclosing » non-enclosed content [myshortcode] enclosed content».

Enclosing shortcodes support attributes in the same way as self-closing shortcodes. Here’s an example of the caption_shortcode() improved to support a ‘class’ attribute:

 function caption_shortcode( $atts, $content = null ) { 	$a = shortcode_atts( array( 		'class' => 'caption', 	), $atts );  	return '<span class="' . esc_attr($a['class']) . '">' . $content . '</span>'; } 

My Caption 

<span class="headline">My Caption</span> 

Other features in brief

• The parser supports xhtml-style closing shortcodes like «[myshortcode /]», but this is optional.

• Shortcode macros may use single or double quotes for attribute values, or omit them entirely if the attribute value does not contain spaces. [myshortcode foo=’123′ bar=456] is equivalent to [myshortcode foo=»123″ bar=»456″]. Note the attribute value in the last position may not end with a forward slash because the feature in the paragraph above will consume that slash.

• For backwards compatibility with older ad-hoc shortcodes, attribute names may be omitted. If an attribute has no name it will be given a positional numeric key in the $atts array. For example, [myshortcode 123] will produce $atts = array( 0 => 123 ). Positional attributes may be mixed with named ones, and quotes may be used if the values contain spaces or other significant characters.

• The shortcode API has test cases. The tests — which contain a number of examples of error cases and unusual syntax — can be found at http://svn.automattic.com/wordpress-tests/trunk/tests/shortcode.php

Function reference

The following Shortcode API functions are available:

function add_shortcode( $tag, $func ) 

Registers a new shortcode handler function. $tag is the shortcode string as written by the user (without braces), such as «myshortcode». $func is the handler function name.

Only one handler function may exist for a given shortcode. Calling add_shortcode() again with the same $tag name will overwrite the previous handler.

function remove_shortcode( $tag ) 

Deregisters an existing shortcode. $tag is the shortcode name as used in add_shortcode().

function remove_all_shortcodes() 

Deregisters all shortcodes.

function shortcode_atts( $pairs, $atts ) 

Process a raw array of attributes $atts against the set of defaults specified in $pairs. Returns an array. The result will contain every key from $pairs, merged with values from $atts. Any keys in $atts that do not exist in $pairs are ignored.

function do_shortcode( $content ) 

Parse any known shortcode macros in the $content string. Returns a string containing the original content with shortcode macros replaced by their handler functions’ output.

do_shortcode() is registered as a default filter on ‘the_content’ with a priority of 11.

Limitations

Nested Shortcodes

The shortcode parser correctly deals with nested shortcode macros, provided their handler functions support it by recursively calling do_shortcode():

[tag-a]  [tag-b]  [tag-c]  [/tag-b] [/tag-a] 

However the parser will fail if a shortcode macro is used to enclose another macro of the same name:

[tag-a]  [tag-a]  [/tag-a] [/tag-a] 

This is a limitation of the context-free regexp parser used by do_shortcode() — it is very fast but does not count levels of nesting, so it can’t match each opening tag with its correct closing tag in these cases.

In future versions of WordPress, it may be necessary for plugins having a nested shortcode syntax to ensure that the wptexturize() processor does not interfere with the inner codes. It is recommended that for such complex syntax, the no_texturize_shortcodes filter should be used on the outer tags. In the examples used here, tag-a should be added to the list of shortcodes to not texturize. If the contents of tag-a or tag-b still need to be texturized, then you can call wptexturize() before calling do_shortcode() as described above.

Unregistered Names

Some plugin authors have chosen a strategy of not registering shortcode names, for example to disable a nested shortcode until the parent shortcode’s handler function is called. This may have unintended consequences, such as failure to parse shortcode attribute values. For example:

[tag-a unit="north"]  [tag-b size="24"]  [tag-c color="red"]  [/tag-b] [/tag-a] 

Starting with version 4.0.1, if a plugin fails to register tag-b and tag-c as valid shortcodes, the wptexturize() processor will output the following text prior to any shortcode being parsed:

[tag-a unit="north"]  [tag-b size=”24”]  [tag-c color=”red”]  [/tag-b] [/tag-a] 

Unregistered shortcodes should be considered normal plain text that have no special meaning, and the practice of using unregistered shortcodes is discouraged. If you must enclose raw code between shortcode tags, at least consider using the no_texturize_shortcodes filter to prevent texturization of the contents of tag-a:

add_shortcode( 'tag-a', 'my_tag_a_handler' ); add_filter( 'no_texturize_shortcodes', 'ignore_tag_a' );  function ignore_tag_a( $list ) {  $list[] = 'tag-a';  return $list; } 

Unclosed Shortcodes

In certain cases the shortcode parser cannot correctly deal with the use of both closed and unclosed shortcodes. For instance in this case the parser will only correctly identify the second instance of the shortcode:

[tag] [tag]  CONTENT [/tag] 

However in this case the parser will identify both:

[tag]  CONTENT [/tag] [tag] 

Hyphens

Note: The behavior described below involving shortcodes with hyphens (‘-‘) still applies in WordPress 3+. This could be due to a bug in do_shortcode() or get_shortcode_regex().

Take caution when using hyphens in the name of your shortcodes. In the following instance WordPress may see the second opening shortcode as equivalent to the first (basically WordPress sees the first part before the hyphen):

[tag] [tag-a] 

It all depends on which shortcode is defined first. If you are going to use hyphens then define the shortest shortcode first.

To avoid this, use an underscore or simply no separator:

[tag] [tag_a]  [tag] [taga] 

If the first part of the shortcode is different from one another, you can get away with using hyphens:

[tag] [tagfoo-a] 

Important: Using hyphens can have implications that you may not be aware of; such as if other installed shortcodes also are use hyphens, the use of generic words with hyphens may cause collisions (if shortcodes are used together within the same request):

// plugin-A [is-logged-in]  // plugin-B [is-admin] 

Square Brackets

The shortcode parser does not accept square brackets within attributes. Thus the following will fail:

[tag attribute="[Some value]"] 

Tags surrounded by cosmetic brackets are not yet fully supported by wptexturize() or its filters. These codes may give unexpected results:

[I put random text near my captions. ] 

Note: these limitations may change in future versions of WordPress, you should test to be absolutely sure.

HTML

Starting with version 3.9.3, use of HTML is limited inside shortcode attributes. For example, this shortcode will not work correctly because it contains a ‘>’ character:

[tag value1="35" value2="25" compare=">"] 

Version 4.0 is designed to allow validated HTML, so this will work:

[tag description="<b>Greetings</b>"] 

The suggested workaround for HTML limitations is to use HTML encoding for all user input, and then add HTML decoding in the custom shortcode handler. Extra API functions are planned.

Full usage of HTML in shortcode attributes was never officially supported, and this will not be expanded in future versions.

Starting with version 4.2.3, similar limitations were placed on use of shortcodes inside HTML. For example, this shortcode will not work correctly because it is nested inside a scripting attribute:

<a onclick="[tag]"> 

The suggested workaround for dynamic attributes is to design a shortcode that outputs all needed HTML rather than just a single value. This will work better:

[link onclick="tag"] 

Also notice the following shortcode is no longer allowed because of incorrect attribute quoting:

<a title="[tag attr="id"]"> 

The only way to parse this as valid HTML is to use single quotes and double quotes in a nested manner:

<a title="[tag attr='id']"> 

Registration Count

The API is known to become unstable when registering hundreds of shortcodes. Plugin authors should create solutions that rely on only a small number of shortcodes names. This limitation might change in future versions.

Formal Syntax

WordPress shortcodes do not use special characters in the same way as HTML. The square braces may seem magical at first glance, but they are not truly part of any language. For example:

[gallery] 

The gallery shortcode is parsed by the API as a special symbol because it is a registered shortcode. On the other hand, square braces are simply ignored when a shortcode is not registered:

[randomthing] 

The randomthing symbol and its square braces are ignored because they are not part of any registered shortcode.

In a perfect world, any [*] symbol could be handled by the API, but we have to consider the following challenges: Square braces are allowed in HTML and are not always shortcodes, angle braces are allowed inside of shortcodes only in limited situations, and all of this code must run through multiple layers of customizeable filters and parsers before output. Because of these language compatibility issues, square braces can’t be magical.

The shortcode syntax uses these general parts:

[name attributes close] 

[name attributes]Any HTML or shortcode may go here.[/name] 

Escaped shortcodes are identical but have exactly two extra braces:

[[name attributes close]] 

[[name attributes]Any HTML or shortcode may go here.[/name]] 

Again, the shortcode name must be registered, otherwise all four examples would be ignored.

Names

Shortcode names must never contain the following characters:

• Square braces: [ ]
• Angle braces: < >
• Ampersand: &
• Forward slash: /
• Whitespace: space linefeed tab
• Non-printing characters: x00 — x20

It is recommended to also avoid quotes in the names of shortcodes:

• Quotes: ‘ «

Attributes

Attributes are optional. A space is required between the shortcode name and the shortcode attributes. When more than one attribute is used, each attribute must be separated by at least one space.

Each attribute should conform to one of these formats:

attribute_name = 'value' 

attribute_name = "value" 

attribute_name = value 

"value" 

value 

Attribute names are optional and should contain only the following characters for compatibility across all platforms:

• Upper-case and lower-case letters: A-Z a-z
• Digits: 0-9
• Underscore: _
• Hyphen: — (Not allowed before version 4.3.0)

Spaces are not allowed in attribute names. Optional spaces may be used between the name and the = sign. Optional spaces may also be used between the = sign and the value.

It should be noted that even though attributes can be used with mixed case in the editor, they will always be lowercase after parsing.

Attribute values must never contain the following characters:

• Square braces: [ ]
• Quotes: » ‘

Unquoted values also must never contain spaces.

HTML characters < and > have only limited support in attributes.

The recommended method of escaping special characters in shortcode attributes is HTML encoding. Most importantly, any user input appearing in a shortcode attribute must be escaped or stripped of special characters.

Note that double quotes are allowed inside of single-quoted values and vice versa, however this is not recommended when dealing with user input.

The following characters, if they are not escaped within an attribute value, will be automatically stripped and converted to spaces:

• No-break space: xC2xA0
• Zero-width space: xE2x80x8B

Self-Closing

The self-closing marker, a single forward slash, is optional. Space before the marker is optional. Spaces are not allowed after the marker.

[example /] 

The self-closing marker is purely cosmetic and has no effect except that it will force the shortcode parser to ignore any closing tag that follows it.

The enclosing type shortcodes may not use a self-closing marker.

Escaping

WordPress attempts to insert curly quotes between the [name] and [/name] tags. It will process that content just like any other. As of 4.0.1, unregistered shortcodes are also «texturized» and this may give unexpected curly quotes:

[randomthing param="test"] 

A better example would be:

<code>[randomthing param="test"]</code> 

The <code> element is always avoided for the sake of curly quotes.

Registered shortcodes are still processed inside of <code> elements. To escape a registered shortcode for display on your website, the syntax becomes:

[[caption param="test"]] 

… which will output …

[caption param="test"] 

The <code> element is optional in that situation.

For enclosing shortcodes, use the following syntax:

[[caption]My Caption] 

History

The Shortcode API was introduced in WordPress 2.5.

External Resources

• WordPress Shortcodes Generator
• Add Shortcode – WordPress Code Snippet Generator — A snippet generator and full documentation about how to add the code to a WordPress website.
• Make Shortcodes User-Friendly — Explains how to add buttons to the rich-text editor so that users don’t have to memorize shortcodes and insert them manually.
• Shortcode summary by Aaron D. Campbell — Explains shortcodes and gives examples including how to incorporate shortcodes into a meta box for sending them to the editor using js.
• Innovative WordPress Shortcodes In Action — a WordPress plugin that shows you how to effectively use shortcodes to change your post content designs.
• WordPress Shortcode API Overview — explanations on usage and example of plugin using shortcodes.
• Simple shortcode-powered BBCode plugin — a simple plugin that adds support for BBCode via shortcode. A good way to see shortcodes in action.
• A Flickr Badge using WordPress Shortcodes — a demonstration of how to pass variables to shortcode handler functions.
• Added Permalinks Shortcode Simple Tutorial how to added Permalinks Shortcode on WordPress

Default Shortcodes

• 

codex.wordpress.org