Can contain other shortcodes images text or html content

Overview of the Extra Shortcodes add-on

This article is outdated, please see an appropriate User Guide:

As of writing this, the Extra Shortcodes add-on adds 17 new shortcodes (including 2 complement shortcodes). The full list of shortcodes and their descriptions are presented below.

Splash Screen

Allows to display the splash screen (pop-up window) to users. The splash screen can be displayed with adjustable delay. You can select one of 9 style options of pop-up window, adjust its width, background transparency, and action at closing of the window.

Besides, splash screen can be displayed to each user only once, at the first visiting of the page.

Exit Popup

Allows to display pop-up window at closing of browser tab.You can select one of 9 style options of pop-up window, adjust its width, background transparency, and action at closing of the window.

Pop-up window can be displayed only one to each user.

Panel

Panel is a block with adjustable appearance, inside of which you can place any contents. The panel can contain simple text, HTML code or even other shortcodes. You can customize background colour, text colour, text alignment, block border, block shade according to your preferences.

Besides, you can make the panel clickable (as a big button) with specifing the link.

Photo Panel

This is the analogue of a simple panel su_panel, but with possibility to add custom image at the top of the block.

Icon Panel

This is the analogue of a simple panel su_panel, but with possibility to add a vector icon at the top of the block.

Text With Icon

This shortcode allows to display text blocks with vector icons. You can customize text colour, as well as colour and size of the icon.

Besides, you can make the block clickable (as a big button) with specifing the link.

Progress Pie

This shortcode allows to show chart in the form of a pie on the page. You can adjust percent of pie filling, its size, colours, and alignment. You can also add text into the pie.

Progress bar

This shortcode will show the block partially filled with colour. You can choose the bar style, adjust colours of empty and filled parts of the bar, percent of filling, and display of a custom text, instead of the percents.

Member

Using this shortcode, you can show cards of the project or team members on the site. You can select a photo for every member/employee, change background and text colours, etc. You can also add up to three icons of social networks with links.

Section / Parallax section

Section is a big block which can contain simple text, HTML code or other shortcodes. You can adjust section’s background by filling with colour or upload of background image. Besides, you can adjust section sizes by changing the padding. You can also make the section clickable (as a big button) by adding the link to shortcode settings.

The most interesting function of the section is a possibility to create parallax effect. The parallax effect is an effect, with which the block background image does not change its position at page scrolling or moves in the opposite direction.

Pricing tables

You should use two shortcodes for creation of pricing tables. The first shortcode [su_pricing_table] serves as a container for pricing plans. Pricing plans are created with the help of [su_plan] shortcode. Appearance of each pricing plan can be adjusted individually. You can change background, text, and border colours of the pricing plan. You can also add icon or any image to the pricing plan headline.

These two shortcodes operate by analogy with tabs/tab and row/column shortcodes. This means that the first shortcode, su_pricing_table, serves as a container for the second shortcode – su_plan. Several shortcodes can be nested in the container.

Testimonial

Using this shortcode you can display client reviews. The shortcode allows to add (or not to add) a photo of review’s author, his/her name, and link to the site.

Icon

This shortcode allows to show various icons on site pages. The icon can be selected from the list of included vector icons or uploaded. Besides, you can add the text to the icon or turn the icon into button by adding the link.

Content slider

This is incredibly powerful and useful shortcode allowing you to create slider from almost anything. You can place simple text, HTML code or even other shortcodes in the slide. For example, you can create slider with customer reviews by placing each review in a separate slide. You can also create a carousel using row and column shortcodes in slides.

These two shortcodes operate by analogy with tabs/tab and row/column shortcodes. This means that the first shortcode su_content_slider serves as a container for the second shortcode – su_content_slide. Several shortcodes can be nested in the container.

Shadow

Shadow shortcode allow to add a beautiful shadow to almost any block or shortcode. Just place the necessary block into this shortcode and the shadow will be added automatically. There are several shadow kinds available.

Источник

Шорткоды в WordPress: создание и применение на практике

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

В этой статье мы расскажем, как легко добавить шорткод в WordPress, а также создавать кастомные шорткоды с помощью Shortcode API.

Что такое шорткод в WordPress

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

Синтаксис шорткода представляет собой текст (ключевое число) внутри квадратных скобок.

Простой шорткод без параметров выглядит так:

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

Шорткод с текстом в качестве параметра обычно выглядит, так:

[shortcode]Здесь может быть любой текст[/shortcode]

Косая черта может применяться, как в одиночных, так и в контентных шорткодах:

[shortcode /] [shortcode]Еще один пример[/shortcode]

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

Shortcode API

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

Это означает, что вы можете писать HTML-разметку в своих постах, но не можете выполнить PHP-код и сценарии JavaScript.

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

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

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

Как добавить шорткод на страницу в WordPress

Если вы используете редактор Gutenberg, добавьте новый блок с типом Шорткод в процессе редактирования записи:

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

Для добавления шорткода на боковую панель, перейдите на экран Внешний вид -> Виджеты и добавьте новый виджет типа Блок:

Для вставки шорткода в шаблон WordPress используйте функцию do_shortcode() :

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

В качестве примера напишем простой кастомный шорткод с помощью функции add_shortcode() , который вернет некоторый результат.

Добавим код в functions.php :

Вставим шорткод [shortcode] в текст записи и увидим результат выполнения функции:

Шорткод с поддержкой параметров

Пример шорткода с поддержкой параметров:

 'Марка автомобиля', 'hp' => 0, ], $atts ); return "Мощность автомобиля — лошадиных сил"; > ?>

Размещаем шорткод с двумя параметрами [car brand=»Porsche» hp=»220″] в тексте записи и получаем результат:

Мощность автомобиля Porsche — 220 лошадиных сил.

Контентный шорткод

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

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

Чтобы использовать этот шорткод, добавьте его в текст записи:

[blockquote]Еще одна цитата[/blockquote]

Контентный шорткод с поддержкой атрибутов

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

 'example', ], $atts ); return '
' . $text . '
'; > ?>

Теперь мы сможем задать класс для тега и добавить текст:

[blockquote ]Внимание! Продукция для лиц старше 16 лет.[/blockquote]

Шорткод с буферизацией вывода

Чтобы вставить в текст записи фрагменты HTML, PHP-код или JS-сценарий, воспользуемся буферизацией вывода в PHP.

Например, добавим рекламный блок Рекламной сети Яндекса в контент на странице с помощью шорткода. Вывод рекламного блока без буферизации:

 '; return $string; > ?>

Пример кода c буферизацией вывода:

В результате шорткод [sponsored] покажет рекламное объявление на странице.

Удаление шорткодов в WordPress

Чтобы удалить шорткод воспользуйтесь функцией remove_shortcode() . Функция принимает лишь один параметр: имя шорткода, который требуется снять с регистрации.

Источник