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

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

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

  • Перейдите в Панель управления ▸ Плагины ▸ Добавить новый;
  • Выполните поиск Shortcodes Ultimate ;
  • Нажмите Установить, затем Активировать.
    • Установка вручную
  • Скачайте плагин в виде zip-архива;
  • Распакуйте скачанный архив и выгрузите папку shortcodes-ultimate в папку /wp-content/plugins/ (в итоге путь к папке плагина должен быть /wp-content/plugins/shortcodes-ultimate/**);
  • Перейдите в Консоль ▸ Плагины и активируйте плагин.
    • Часто задаваемые вопросы Как работает плагин Шорткоды не работают. Почему? Кнопка Вставить Шорткод не работает. Почему? Могу ли я удалить стандартные шорткоды?

    Yes, you can remove default shortcodes using ‘su/data/shortcodes’ filter. Tutorial: How to remove default shortcodes .

    Могу ли я создавать свои шорткоды?

    Yes, you can create custom shortcodes using ‘su/data/shortcodes’ filter. Tutorial: How to add custom shortcodes .
    Alternatively, you can use Shortcode Creator add-on .

    Могу ли я использовать шорткоды в файлах темы? Будет ли плагин работать с моей темой?

    Да! Shortcodes Ultimate создан для работы с любой темой, но ваша тема должна иметь базовые вещи, такие как: теги шаблона ‘wp_head’ и ‘wp_footer’. Иногда, плагин может работать неправильно из-за ошибок javascript, вызванных другими плагинами или темой.

    Где я могу сообщить об ошибке? Где я могу получить поддержку или пообщаться с другими пользователями?

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

    Отзывы

    Many of the codes are now redundant with the standard Gutenberg blocks (heading, divider, quote, pullquote, columns, list, many embeds , and others), but there are some still useful to me, and I"ve had no problems. Thanks for the plugin.

    Участники и разработчики

    «Shortcodes Ultimate» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

    Участники Журнал изменений 5.5.0

    Что нового

    • New option outline for which allows disabling carousel outline (when it gets focus)
    • New option mobile for which allows disabling tab stacking on mobile devices
    • New option texttrack for which allows enabling video subtitles

    Improvements

    • is now always served through https
    • : improved compatibility with various themes
    • : the gallery can now be loaded through AJAX
    • : improved keyboard navigation
    • Insert Shortcode window will now remain open if the dark background clicked
    • Fixed issue with empty image captions (with whitespace)
    • Fixed issue where images weren’t shown when crop is disabled
    5.4.1

    This update fix various issues related to version 5.4.0

    5.4.0

    Что нового

    • New shortcode which will take place of and in the future
    • New attribute download for the shortcode (allows immediate downloading of specified URL in a button)
    • New attribute id for the shortcode (allows linking to a heading)
    • New attribute wrapper for the shortcode (allows disabling of the div wrapper)
    • New attribute mobile for the shortcode (allows disabling lightbox on mobile devices)

    Improvements

    • Custom CSS code field now has syntax highlighting
    • with target=blank will now be displayed with rel="noopener noreferrer
    • Slightly improved appearance of the Available shortcodes screen
    • Vertical tabs are now aligned with CSS flexbox, not JS
    • Added shortcodes.full.css file to reference the default shortcode styles
    • Minor improvements to , , and shortcodes
    • Fixed issue with on iOS
    • Removed !important from column styles for mobile devices

    Security

    • and are now allow only templates from active theme or plugin folders
    • Error messages are now displayed only to allowed users (user must have required capability)
    5.3.0

    Что нового

    • New shortcode for displaying CSV tables
    • New option indent for the shortcode, which allows adjusting of list indentation
    • Fixed inaccessible fields in media modal (while inserting Gallery/Slider/Carousel shortcodes)
    • Fixed close icon class name in the presets menu
    • Fixed issue with unwanted content inside single shortcodes
    • Fixed warning when non-numeric value is used for the button size attribute
    • Min-width for responsive tables is set to 100%
    5.2.0

    Improvements

    • Вкладки и аккордионы/спойлеры теперь доступны с клавиатуры
    • Вкладки теперь работают лучше с вложенными слайдерами/каруселями
    • Улучшена стабильность некоторых адаптивных элементов, как Google Maps
    • Описание функционала YouTube и его расширенных настроек теперь более ясные
    • Новый параметр Требуемые полномочия пользователя, который позволяет включать кнопку Вставить шорткод для пользователей не являющихся администраторами
    • Новый параметр Включить шорткоды в который позволяет включить шорткоды в текстовых виджетах и описаниях рубрик
    • Параметр youtube_advanced showinfo устарел и был удалён из плагина. Почему?
    • Font Awesome заменён на Fork Awesome . Таблица стилей Font Awesome (v 4.7.0) будет полностью удалена при следующем обновлении. Все иконки теперь используют CSS-класс sui вместо fa
    5.1.1
    • Совместимость с Gutenbrg включена по умолчанию
    5.1.0

    Что нового

    • Добавлена совместимость с редактором Gutenberg. .
    • Fixed icon appearance of the shortcode
    5.0.8
    • Fixed Live Preview, wasn’t representing changed settings
    • Fixed , now it works again at top-level pages
    • Various code improvements
    • New filters for gallery, slider, and carousel
    • Returned su_cmpt() and su_compatibility_mode_prefix() utils
    5.0.7

    Security update

    • Fixed shortcode generator preview vulnerability. Description .
    5.0.6
    • Added missing images for su_audio , su_video , su_slider and su_carousel
    • Fixed Fatal error: Call to a member function get_page_permastruct() on null in link-template.php:357
    • Added missing su_get_icon() utility function
    • Added missing su_scattr() utility function
    • Added missing su_do_shortcode() utility function
    5.0.5

    Improvements

    • Improved compatibility with fitvid.js;
    • Improved appearance of the Show more and Show less links of the su_expand shortcode;
    • The new option mute for su_youtube and su_youtube_advanced shortcodes;
    • Support for the youtube-nocookie.com domain in su_youtube and su_youtube_advanced shortcodes;
    • Support for nested shortcodes in the title attribute of the su_button shortcode;
    • The new option dnt (do not track) for the su_vimeo shortcode, learn more ;
    • The new option mute for the su_vimeo shortcode;
    • https support for the su_dailymotion shortcode;
    • New options title and rel for the su_permalink shortcode;
    • The su_post shortcode now support slugs in the post_id attribute;
    • The new option zoom for su_gmap .
    • Shortcodes styles merged into a single stylesheet.
    • Fixed warning in su_siblings shortcode.
    5.0.4
    • Fixed: added missing FontAwesome icons
    • Fixed: is_plugin_active call removed on frontend
    • Fixed: nested shortcodes
    • Fixed: issue with spoiler loaded through ajax
    • Fixed: shortcode logic
    5.0.3
    • Changed: Inview.js library replaced with jQuery.Inview
    • Fixed: caching issue with
    • Fixed: PHP warning in shortcode when specified template does not exist
    • Updated: Font Awesome to version 4.7.0
    • Added: responsive styles for
    5.0.2
    • Fixed: an issue where RTL stylesheet won’t displayed if custom CSS field is empty
    • Fixed: icon sizes at ‘Dashboard — Available Shortcodes’ page
    • Fixed: shortcode now works when loaded through AJAX
    • Fixed: border-radius on shortcode
    • Fixed: compatibility with ‘Plugin Organizer’
    • Updated: OwlCarousel jQuery plugin
    • Added: new attribute ‘responsive’ for table shortcode:
    • Added: new attribute ‘playsinline’ for youtube_advanced shortcode:
    5.0.1
    • Fixed: serious security vulnerability, which allows attacker to run any code using filter in meta, post, or user shortcodes. Thanks to Robert L Mathews.
    • Fixed: changed admin menu position (it was replacing ‘Settings’ menu on some installations)
    • Fixed: shortcodes prefix field now accepts special characters
    • Fixed: old bug when unwanted code parts was added with shortcode
    • Fixed: bug, where backslashes were removed from custom CSS code
    • Added: new attribute ‘ID’ for shortcode
    • Added: new filter ‘su/slides_query’, which can be used to modify posts query for slider, carousel and custom_gallery shortcodes
    • Added: new filter ‘su/assets/custom_css/template’ to filter custom css output
    • Minor fixes
    5.0.0
    • Читайте пост в блоге чтобы узнать больше об этом обновлении
    • Новый сайт проекта getshortcodes.com
    • New documentation getshortcodes.com/docs
    • Добавлено: страница панели управления ‘Доступные шорткоды’
    • Удалено: страница панели управления ‘Примеры’
    • Удалено: страница панели управления ‘Шпаргалка’
    • Исправлено: шорткод (теперь используется SimplePie)
    • Изменено содержимое по умолчанию для шорткодов , и
    • Исправлено: шорткод теперь работает, когда пользователь не авторизован
    • Изменено: Улучшение безопасности. Теперь плагин убирает все HTML теги из пользовательского css кода
    • Мелкие улучшения и исправления
    4.10.2
    • Улучшено: совместимость с PHP7 (шорткоды и )
    • Исправлено: разметка и (пропущенные пробелы между атрибутами)
    • Удалено: проверка пользователя в шорткоде
    4.10.1
    • Исправлено: javascript лайтбокса
    4.10.0
    • Исправлено: уязвимость на странице в ‘Примеры’ панели управления (небезопасный вызов file_get_contents() в inc/core/tools.php:774)
    • Исправлено: добавлена проверка уровня доступа в шорткоде . Pull request #20 .
    • Добавлено: совместимость с PHP7. Проверено с помощью php7cc и PHP Compatibility Checker . Pull request #45 .
    • Добавлено: поддержка https для . Pull request #40 .
    • Добавлено: поддержка https для. Pull request #39 .
    4.9.9
    • Исправлено: всплывающее окно оценки на странице Плагины
    • Небольшие улучшения, исправления
    4.9.8.1
    • Исправлено: совместимость с WordPress 4.3+
    • Добавлено: заголовки лайтбокса для слайдера, карусели и галереи. Коммит от Valentino Pistis
    • Изменено: текстовый домен с ‘su’ на ‘shortcodes-ultimate’
    4.9.8
    • Добавлено: Испанская локализация
    • Обновлено: FontAwesome обновлен до 4.4.0
    • Исправлено: line-height в шорткоде кнопка на узких экранах
    • Исправлено: вложенные спойлеры
    4.9.7
    • Добавлено: теперь поддерживает https
    • Исправлено: расчет ширины элементов карусели
    • Добавлено: новый атрибут для , тема на форуме
    • Исправлено: stripslashes для содержимого
    4.9.6
    • Исправлено: небольшое исправление отключенного пользовательского css
    4.9.5
    • Добавлено: базовая поддержка RTL
    • Исправлено: JS ошибка (блокирующая настройки шорткодов) на WordPress 3.5
    • Fixed: minor improvement for slider/gallery posts query. Forum topic
    • Fixed: minor imrovements on , fixed markup bug for long values in cite, thanks to Anatoly Yumashev
    • Added: completely redesigned search feature. Now it’s like a Google, but for shortcodes =)
    • Added: Insert shortcode popup window hotkey. So now, you can open Insert shortcode window, choose shortcode and insert it with just one click
    • Updated: new demo video at plugin settings page (About tab)
    • Updated: new plugin’s banner and icon
    4.9.4
    • Updated: Japanese translation
    • Updated: Polish translation
    • Fixed: minor fixes in shortcode settings window
    • Fixed: vulnerability in Examples preview. Added wp_nonce check. Thanks to Kacper Szurek
    • Fixed: vulnerability at Custom CSS page. Added wp_nonce check. Thanks to Ryan Satterfield
    • Removed: skins directory creation
    4.9.3
    • Updated: owl-carousel.js
    • Added: minor UI improvements
    • Fixed: ssl issue (thanks to Adam)
    • Fixed: multiple errors on cheatsheet page
    • Fixed: errors when updating user profile, forum topic
    • Removed: global skin option at settings page
    4.9.2
    • Added: minor improvements for tabs/spoilers anchors (auto-removing extra # characters)
    • Added: compatibility with TablePress’s advanced editor
    • Added: new option for tabs. You can now link any tab to any webpage
    • Added: new option wmode for , forum topic
    • Added: new shortcode
    • Fixed: lightbox and galleries scripts, forum topic
    • Fixed: removed global function $.support.transition, forum topic
    • Updated: Russian language
    • Updated: Japanese language
    • Updated: FontAwesome, 4.1.0
    • Updated: Magnific Popup, 0.9.9
    4.9.1
    • Added: New shortcode
    • Added: New shortcode
    • Added: New options for
    • Added: New option rel for
    • Fixed: animations script has been changed. CSS animations will be skipped in non-supported browsers, forum topic
    • Fixed: templates/default-loop.php — removed extra n character in comments number, forum topic
    • Fixed: large DB query on sites with many users, forum topic
    4.9.0
    • New shortcode allows you to generate colorful and responsive QR codes!
    • Improved shortcode search. Just type shortcode name and hit Enter
    • Updated Animate.css (animations library)
    • Updated ACE editor (custom CSS editor)
    • Responsive CSS for
    • Highly decreased plugin size
    4.8
    • Minor UI fixes (compatibility with page builders)
    • Czech translation by Punc00
    • Added: full compatibility with multiple editors on same page — fourm topic
    • Fixed: extra CSS class for — forum topic
    • Fixed: Swiper click event, Swiper has been updated — forum topic
    • Fixed: ’s content is now hidden until the page is loaded
    • New dashboard page: Cheatsheet
    • Minor fix, for hidden spoiler content
    • Updated Japanese translation
    4.7
    • Long-awaited feature: slider, carousel and custom_gallery links can now be open with lightbox
    • Long-awaited feature: custom links in slider, carousel and custom_gallery shortcodes
    • Fixed https bug in FontAwesome enqueue
    • Fixed bug with multiple users queries — forum topic
    • New Ghost style for
    • Minor UI fixes (for WP 3.9+)
    • New shortcode
    • YouTube (advanced) can now use https protocol
    • Additional help notes in Shortcode Generator
    • Slovak language
    4.6
    • Auto-save for shortcodes settings. Now you don’t need to adjust it again and again
    • New premium add-on — Extra Shortcodes
    • Minor UX improvements
    • New locale — VI
    • Fixed bug with tax_term IDs in shortcode, forum topic
    • Fixed bug with service title, forum topic
    • Fixed bug with animations names in shortcode generator, forum topic
    • Updated settings pages capabilities
    • Added some hooks
    • Updated .pot file
    • Font-Awesome is now loaded from bootstrap CDN. Technical details .
    • New review — Shortcodes Ultimate: Ultimatize your written content
    • New review —
    • New review — Show Me the Shortcode + Video
    • Updated readme.txt
    • SiteOrigin page builder — it’s free!
    • Compatibility with recent version of Visual Composer
    • Compatibility with recent version of Elegant Themes page builder
    4.5
    • Updated some examples
    • Removed import functions. Old versions of plugin (like 3.9.5) is not supported anymore
    • Updated custom formatting filter
    • Updated Japanese translation
    • Added NL translation
    • Minor fixes
    • Presets. Now you need to adjust the shortcodes only once
    • New WP filters for shortcodes attributes
    • New option for compatibility mode prefix
    • Compatibility mode is now enabled by default
    • Font-awesome updated to 4.0.3
    • New shortcode
    • New shortcode
    • New shortcode
    • New attribute limit for , and
    • Minor UX improvements
    4.4
    • IMPORTANT : new galleries mechanism. Your created galleries will work but will not be visible in admin panel. Now, you’re able to create galleries right in «Insert shortcode» window. Also, you can now create galleries from posts, categories or even custom taxonomies.
    • Removed all default links (default youtube videos)
    • Updated admin page framework Sunrise
    • Minor admin panel fixes
    • Fixed file_get_contents() (disabled http wrappers) issue at the examples page
    • Added classes Shortcodes_Ultimate_Generator, Shortcodes_Ultimate_Shortcodes and Shortcodes_Ultimate_Data
    • Removed unused classes MediaUpload and ImageMeta
    • New shortocde
    • New shortocde
    • New shortocde
    • New shortocde
    • New admin page — Examples
    • New admin page — Add-ons
    • Font Awesome updated to version 4
    • New attr
    • Fixed issue with date format in
    • New slider control for shortcode generator
    • Small fixes
    4.3
    • New text-shadow picker for
    • Anchor navigation for spoilers and tabs — forum topic
    • Small fixes
    • IMPORTANT: removed old list icons. These icons replaced with new font-awesome icons
    • New icon picker for , and
    • Media manager is now works on widgets page
    • Shortcodes inside of
    • Fixed fatal error in
    • New media manager added for galleries manager
    • New media manager added to the file fields in Generator
    • Z-index for visual composer — forum topic
    • New attr for onclick
    • Fixed settings page
    • Fixed player
    4.2
    • Font Awesome icons (in Generator)
    • Fixed warning in footer — forum topic
    • Removed warning at settings page — forum topic
    • Removed another warning (undefined index) — forum topic
    • Changed syntax for shortcodes inside of attributes — documentation
    • Small performance improvemets
    • Aded font-awesome.css. Will be completely included in closest versions
    • Added default taxonomy value for
    • Added default post_type value for
    • Added ability to use shortcodes inside of attributes
    • Translated into Japanese
    • Fixed
    • Fixed media query for
    • Added new attr
    • Improved js code for spoilers and tabs
    • Improved js code for generator
    • Добавлен pot файл
    • Fixed css code
    • Updated , and js code
    • Fixed
    • Updated Greek translation
    • Fixed
    • Disabled wp_footer check
    • Fixed wp_footer notice, again
    • Small fix for tooltips
    • Fixed wp_footer notice
    • Greek translation
    • Added compatibility mode prefix for spoilers inside of accordion
    • Updated qTip plugin
    • Added shortcode
    • Added new attribute. . Now, any tab can be disabled. Forum topic
    • Added scrolling. Forum topic
    • Added wp_footer check. User will be noticed if current theme doen’t includes wp_footer
    • Updated caching mechanism. Cache will be reseted when you add or remove terms
    • Updated galleries mechanism. Removed some conflicts
    • Fixed spoiler background for style=fancy
    • Additional access check option for Shortcode Generator
    4.1
    • New screencast — How to create image gallery
    • New attribute «center» for . Buttons can now be centered on the page
    • Updated . Now it can contain other shortcodes
    • Updated caching mechanism. Cache now will be reseted on plugin activation
    • Fixed many PHP warnings when debug mode enabled
    • Added backward compatibility for . Shortcode has basic support for youtube and vimeo videos
    • Fixed bug with hidden single
    • Added attribute «active» for tabs container. This option allows you to select tab number that will be open by default
    • Fixd button style 3D
    • Added backward compatibility for
    • Fixed margins
    • Added backward compatibility for . Now it accepts style=3 and vertical attributes
    • Added backward compatibility for . Now it accepts 0 and 1 as values for attribute open. Also, it now accepts style attribute (1, 2, default, fancy, simple)
    • Added custom CSS import from previous versions. Styles will be imported automatically and prepended to the existing CSS-code
    • Added backward compatibility for . Now it accepts bg and background attributes
    • Added backward compatibility for . Now it accepts style and type attributes
    • Added backward compatibility for . Now it accepts 1, 2 and 3 as style values
    • Added backward compatibility for . Now it accepts p and id attributes
    • Added backward compatibility for . Need to test
    • Added backward compatibility for . Now it accepts style and login attributes
    • Added backward compatibility for . Now it accepts color and box_color attributes
    • Added backward compatibility for . Now it accepts color and note_color attributes
    • Added backward compatibility for . Now it accepts attribute last and can be not wrapped with
    • Added backward compatibility for . Now it accepts file and url attributes
    4.0
    • Plugin based on Sunrise Plugin Framework
    • GitHub repo . Now you can easily fork and modify best plugin in the world (:
    • Brand new Shortcode Generator, demo video
    • Completely reorganized code. Added and removed some shortcodes
    • For security maniacs: timthumb.php replaced by native WordPress mechanism
    • For speed-up maniacs: completely rewritten assets mechanism. Now css and js files included on page depend on used shortcodes
    • Added new shortcode . This is awesome and flexible mechanism to display your content in many different ways
    • Now you can create your own custom skins for shortcodes
    • Columns, google maps, google document viewer, youtube player, vimeo player and custom audio player is now fully responsive
    3.9
    • More screencasts
    • Special widget for shortcodes
    • Small fixes
    • Hebrew translation
    • Partners section on settings page
    • Generator select improved with Chosen
    • Farbtastic color picker
    3.8 (security release)
    • 2 new translations (Sk, Lt)
    • Donate button in control panel
    • Updated timthumb.php (version 2.8.10)
    • Added 2 useful screencasts
    3.7
    • Complete support for nested shortcodes. Check the FAQ page.
    • New shortcode
    • New style for buttons
    • Fixed images ordering for , and
    3.6
    • Descriptions for
    • Custom options for jwPlayer
    • Fixed size option for sliders and gallery
    3.5
    • New shortcode for muliple spoilers
    • Improved spoiler shortcode (check settings page)
    • Multiple tabs bugfix
    • Authors can also use shortcode generator
    • Nested shortcodes: spoiler, column, tabs, box, note
    3.4
    • Belarusian translation
    • New shortcode
    3.3
    • Changed: and (see docs in console)
    • New shortcode:
    • New parameter:
    • New shortcode: guests
    • German translation
    3.0
    • Button for WYSIWIG editor (search it near Upload/Insert buttons)
    • New shortcode: private (private notes for editors)
    • Patched and secure timthumb.php
    2.7
    • French translation
    • Fixed for work with new jQuery 1.6 in WP 3.2
    2.5
    • Theme integration
    2.4
    • New shortcode: jcarousel
    2.3
    • New admin page: Demo
    2.2
    • New shortcode: document
    • New shortcode: members
    • New shortcode: feed
    • New attr: link=»caption» for
    • New attr: p for
    • New tabs style (style=3)
    2.1
    • New option: disable any script
    • New option: disable any stylesheet
    • New attribute for column shortcode — style
    • New attribute for spoiler shortcode — style
    2.0
    • New shortcode: menu
    • New shortcode: subpages
    • New shortcode: siblings
    • Some admin fixes
    • New button attribute — class
    • New button attribute — target
    • Different tabs styles (1 old + 1 new)
    1.9
    • New shortcode: permalink
    • New shortcode: bloginfo
    1.8
    • Some small additions
    • Ajax admin page
    • No-js compatibility
    • Multiple tabs support
    1.7
    • Improved settings page design
    • Added shortcode nivo_slider
    • Added shortcode photoshop
    1.6
    • New admin panel
    • Custom CSS editor with syntax hughlight
    • Small fixes
    • Добавлена форма для поддержки проекта
    1.5
    • Добавлена настройка «Режим совместимости»
    • Добавлены новые стили кнопки
    • Добавлены новые стили списков
    • Добавлен новый шорткод медиа
    • Добавлен новый шорткод таблица
    1.4
    • Добавлен шорткод «Красивая ссылка»
    1.3
    • Некоторые исправления
    1.2
    • Поддержка локализации

    Было ли у вас такое, что хотелось добавить какой-то специальный контент на страницу или запись блог на WordPress, но вы не были уверены как именно это лучше сделать? Может быть вы хотели встроить виджет Twitter или другой контент, вызываемый с другого сайта через API? Получится ли без проблем добавить его на страницу? К счастью, у WordPress есть такая фишка как шорткод , который и поможет в решении вышеописанных задач. Эта статья научит вас создавать, устанавливать и использовать шорткоды в вашем блоге на ВП. Давайте разберемся для начала, что такое этот шорткод.

    WordPress шорткод — кто ты?

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

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

    Как видно из вышеприведенного примера, шорткод похож на обыкновенный тег HTML, однако он заключается в квадратные скобки, вместо. Этот код заменяется другим кодом в то время, когда загружается браузером. И, естественно, WordPress позволяет нам создавать собственные шорткоды для вывода всего, чего угодно! Можно использовать его для видео на Youtube , выводить ваши свежие твиты , а также настраивать по собственному усмотрению.

    Давайте рассмотрим реальный пример. Скажем, нам нужно вывести рекламу AdSense в моей записи. Для этого можно зайти в текстовый режим визуального редактора WordPress и скопировать/вставить код блока AdSense в него, но это будет утомительно и обезобразит исходный код записи. К тому же, если появится необходимость изменить рекламный блок, тогда придется править каждый пост, в который мы вставили рекламу. Простым же решением (и более рациональным) вставки блока рекламы в любое место на блоге будет использование шорткода adsense. Он может выглядеть примерно так:

    Когда же вы будете просматривать запись на своем сайте (не в админ.панели), шорткод заменится блоком рекламы от Adsense. Так как же его создать? Очевидно, что нужно сообщить Ворпдессу, что нужно заменить и чем.

    Как создать шорткод?

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

    Function get_adsense($atts) { return " "; }

    Эта функция довольно проста — она просто возвращает код Google Adsense в виде строки. Шорткод будет заменен на все то, что возвратит наша функция, т.е. теоретически можно получить html для виджета Twitter, или список записей блога, или что-то еще…

    Теперь у нас есть функция, которая возвращает нужные нам значения, как же сделать шорткод для нее? Теперь в дело вступает WordPress API. Опять же, давайте посмотрим как это делается, а потом объясним что происходит. Вот вызов для определения шорткода adsense.

    Add_shortcode("adsense", "get_adsense");

    Вот и все! Первый передаваемый параметр — это название шорткода, в нашем случае ‘adsense’, которое говорит Ворпдессу создать шорткод . Второй параметр определяет функцию, которая будет вызвана, когда встретится новый шорткод. В нашем случае ‘get_adsense’ говорит ВП заменить шорткод результатами функции get_adsense.

    Неплохо, да? Это самый простой шорткод, однако WordPress позволяет проделывать с ними различные вещи (добавлять параметры для переключения блоков Адсенса, например). Полное API можно найти на WordPress Codex.

    Как использовать шорткод?

    Это самая простая часть: просто добавьте в визуальном/текстовом редакторе записи либо страницы. Всё. Вы создали свой первый шорткод.

    Использование шорткодов в вордпресс позволяет создавать в текстовом редакторе оригинальное «сложное» оформление для контента без 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. Дело в том, что сначала нужно прописать функцию, присвоить ей название и действие, а потом назначить шорткод и привязать его к этой функции. Давайте попробуем создать простейший шорткод, который будет вызывать текст. Даже такой простой код может понадобится, если вам надо внутри записи постоянно вставлять какой-то длинный текст.

    Как и со всеми функциями, добавление осуществляется в файл 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.

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

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