wordpress как вывести шорткод в коде

Как правильно вставить шорткод [shortcode] в PHP-файл или шаблон сайта

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

Как вставить шорткод в 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 в wordpress, если нет готовой php-функции в плагине?

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

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

Источник

Шорткоды

Шорткоды – могут содержать в себе какой-то PHP-код и функции, которые можно задействовать прямо в контенте записей и страниц. Появились в версии WordPress 2.5.

Например можем взглянуть на шорткод галереи, который выглядит так:

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

Даже с приходом Gutenberg, вряд ли шорткоды в скором времени будут вытеснены блоками.

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

Так же, как у функции могут быть аргументы, так и шорткод может иметь собственные параметры. Ещё один пример с шорткодом:

В параметре ids перечислены ID изображений, входящих в галерею, параметр size — размер вставляемых изображений.

Стандартные шорткоды WordPress

В WordPress уже есть определённый набор шорткодов, например тот же шорткоды галереи, с которым мы уже познакомились ранее.

Другие стандартные шорткоды это:

Экранирование шорткодов

А точнее, как сделать так, чтобы шорткод присутствовал в контенте вашего поста, но не выполнялся? Или другими словами, как я вывел шорткоды в предыдущей главе поста, не выполняя их?

Всё, что нужно сделать, это обернуть его ещё в одни квадратные скобки, вот так:

Если же у вашего шорткода есть открывающий и закрывающий тег, то он будет выглядеть следующим образом:

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

Ну и про HTML-сущности тоже помним, да? [шорткод]

На самом деле именно в этом моменте можно кекнуть, потому что часто встречаю уроки по WordPress, где их отображают с пробелом, типо [ gallery] и при этом уточняют, что пробел нужно удалить 😹

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

1. Простой пример

2. Шорткод с параметрами (атрибутами)

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

3. Закрывающиеся шорткоды и шорткод внутри шорткода

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

В соответствии с этим давайте переделаем наш код из предыдущего примера:

Теперь шорткод следующего вида [trueurl anchor=»главная»][misha][/trueurl] выведет ссылку на главную страницу вашего сайта (про шорткод [misha] я писал выше).

4. Используем буферизацию для вывода прямо в шорткоде

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

Решается это довольно легко – при помощи буферизации.

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

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

PHP-код

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

В этом примере для получения URL папки с текущей темой я использовал функцию get_stylesheet_directory_uri(). true_button.js — собственно сама кнопка, создайте этот файл в директории с темой (или там, где вам удобно, но не забудьте в этом случае поменять путь к нему).

JavaScript. Пример простой кнопки

Текстовый вариант кнопки вставки шорткода в визуальном редакторе TinyMCE.

Кнопка с иконкой, выпадающим списком и с возможностью задавать параметры шорткода

Начну с того, что вставлю (а точнее заменю) код в файл true_button.js :

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

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

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

Если использовали этот же способ и иконка не появилась — попробуйте прописать к ней абсолютный URL.

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

Если вы хотите использовать dashicons, то ваш CSS для иконки перца будет выглядеть примерно следующим образом:

Применение шорткодов в коде PHP

Тут всё сводится к использованию одной функции — do_shortcode().

do_shortcode()

Функция в качестве параметра может содержать лишь один шорткод:

Или шорткод и какой-то контент:

Популярный пример, позволяет получить или вывести содержимое поста с применением шорткодов при помощи функции get_the_content():

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

Ещё пара интересных примеров шорткодов

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Источник

Как легко вставить шорткод в WordPress: в шаблон, в страницу и в виджет

Вставить шорткод в запись или страницу

Вывести шорткод в записях и страницах WordPress просто. Открываем редактирование записи и делаем пару действий.

В классическом редакторе WordPress

Если вы любите пользоваться классическим редактором, то входим в статью и во вкладке визуально в необходимое место нужно вставить. Разберу на примере форм от плагина Contact Form 7.

Можно через предварительный просмотр WordPress увидеть, что отображается на экране.

Не важно где выводить во вкладке Визуально или Текст (html редактор), шорткод сработает. Перед каждой проверкой очищаем кэш.

В Gutenberg

В Gutenberg существует специальный блок. Создаем запись, либо меняем старую и смотрим скриншот.

На экране появится новый блок, в который заносим скопированную конфигурацию.

Нажимаем на предварительный просмотр и видим ту же картину. Простые методы прошли переходим к более сложным.

В плагине Elementor

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

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

Вставить напрямую в шаблон

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

С помощью функций темы

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

Далеко не все темы поддерживают вставку текста в разные части документа. Если такой области нет, то переходим к следующему пункту.

В PHP документе

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

То есть в нашем случае получится такая картина:

Хочу разместить форму обратной связи под постами. Какой файл у вас отвечает за вывод того или иного элемента предсказать не могу. В моем случае content-single.

В виджетах

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

Разумное решение, безопасность превыше всего, но если набрались смелости залить в vidgets WordPress, то читаем дальше.

Виджет текст

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

Текст

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

Фильтр

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

С помощью плагина

Существует отличный плагин Shortcode Widget скачиваем или устанавливаем из админки WordPress, так он выглядит в поиске.

Заходим Внешний вид > Виджеты, там появиться новый раздел Shortcode Widget. Перетаскиваем в активную зону, прописываем и сохраняем

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

Источник

Шорткоды в WordPress

Шорткод (шоткод, shortcode, короткий код) в WordPress — это конструкция в тексте, которая будет обработана и заменена на указанный код/текст. Обрабатывается шорткод специальной PHP функцией, указанной при регистрации шорткода.

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

Для примера, следующий Шорткод (в контенте записи) добавит фотогалерею:

Видео о шорткодах в WordPress:

Список шорткодов WordPress

В WordPress по умолчанию регистрируются следующие шорткоды:

Синтаксис шорткода

Само-закрытие (self-closing)

Шорткод можно закрыть слэшем в конце (такой слэш называется self-closing маркером).

Пробел перед маркером необязателен. Пробелы после маркера не допускаются. Такой маркер является чисто косметическим и ни на что не влияет.

Контентные шорткоды не могут использовать self-closing маркер.

Имя шорткода

Атрибуты шорткода

Атрибуты указывать не обязательно, между именем и атрибутами нужен как минимум один пробел. Если указывается несколько атрибутов, каждый атрибут должен быть разделен по крайней мере одним пробелом.

Каждый атрибут должен соответствовать одному из этих форматов:

Имя атрибута

Значение атрибута

Заметки по значению атрибута:

Кавычки атрибута. Двойные кавычки » допускаются внутри значений в одинарных кавычках ‘ и наоборот: [name foo=’1 «2» 3’ bar=»4 ‘5’ 6″]

Экранировать спец-символы в атрибутах можно через кодирование HTML символов (HTML encoding).

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

Версия 4.0 умеет проверять HTML, так что следующий код будет работать:

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

Удаляемые символы. Следующие символы, если они не экранированы, будут:

Экранирование

Экранирование нужно, когда шорткод зарегистрирован, но его не нужно обрабатывать, а нужно показать как есть. Не зарегистрированный шорткод и так не будет обрабатываться.

Для экранирования нужно обрамить шорткод еще одними квадратными кавычками:

Вложенные шорткоды

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

Одинаковое название

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

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

На хуке the_content срабатывает функция do_shortcode(), которая ищет и обрабатывает все шорткоды в контенте.

То что вернула функция-обработчик заменят шорткод в контенте.

До срабатывания функции do_shortcode() (до парсинга шорткодов), контент обрабатывается тремя ключевыми функциями:

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

Для создания шорткода используется функция add_shortcode(). Она принимает два параметра: имя шорткода и название PHP функции, которая будет обрабатывать шорткод.

Вот самый простой PHP-код который регистрирует новый шорткод [foobar] :

Теперь [foobar] в контенте записи изменяться на строку: «Привет! Я шорткод.»

Атрибуты шорткода

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

Теперь [foobar name=»Виктор» age=»25″] в контенте измениться на строку: «Меня зовут Виктор мне 25 лет».

shortcode_atts() определяет какие у шорткода могут быть атрибуты, задает им дефолтные значения и удаляет неопознанные атрибуты.

Ассоциативный массив который описывает возможные атрибуты шорткода (это ключи массива) и их дефолтные значения.

Неочищенный массив с данными, которые были указаны в шорткоде. Они будут сравниваться с массивом выше.

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

Если указать значение без названия параметра, то они будут добавлены в индексные элементы массива. Например для шорткода [name value attr=»val2″ val3] получим:

Рассмотрим еще один пример.

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

Вывод функции обработчика

Возвращаемое значение функции обработчика шорткода вставляется в контент записи вместо самого шорткода.

Буфиризация вывода

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

Для Enclosing шорткода функция-обработчик получит второй параметр содержащей контент.

Теперь если написать шорткод так:

Получим такой результат:

$content передается в функцию без какой-либо очистки, поэтому в нём может быть HTML:

Иногда наоборот, когда HTML недопустим нужно очищать вывод, удаляя все HTML теги функцией wp_strip_all_tags().

Атрибуты в Контентном шорткоде

В Контентном шорткоде можно также как и в Одиночном, указать атрибуты. Например разрешим атрибут class :

Вложенные шорткоды

Если в Контентном шорткоде есть вложенный шорткод, он не будет обработан.

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

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

Также в Shortcode API есть функция которая удаляет все зарегистрированные шорткоды разом: см. remove_all_shortcodes().

PHP Функции

Заметки

wpautop

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

wpautop() распознает зарегистрированные шорткоды и не обрабатывает их (не добавляет p или br теги вокруг или внутри).

wptexturize

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

Чтобы этого не происходило шорткод можно обернуть в тег или

Или можно добавить шорткод в список не-текстурируемых шорткодов. Делается это через хук no_texturize_shortcodes.

Разные функции для одного шорткода

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

Одна функция для разных шорткодов

Смешанный вызов одного шорткода

Парсер не умеет обрабатывать смешанный вызов одно шорткода, когда он вызывается как Self-closed и Enclosing. Например:

Незарегистрированные шорткоды

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

Незарегистрированные шорткоды будут считаться обычным текстом, который не имеет особого значения. Чтобы шорткод имел значение для wptexturize() его можно добавить в список через хук no_texturize_shortcodes:

Незакрытые шорткоды

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

Однако так проанализирует оба:

Шорткод в атрибуте HTML тега

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

Обойти это можно создав шорткод, который выводит весь необходимый HTML, а не только одно значение.

Источник

Полное руководство: как добавить шорткоды в WordPress

И снова приветствую вас, друзья, на моем блоге, посвященному WordPress.

Сегодня я бы хотел поговорить о шорткодах. Что это такое и каким плагином их можно реализовать.

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

Чтобы избавить вас от всех этих неприятностей, WordPress предлагает что-то, что делает задачу такого рода очень простой — шорткоды.

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

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

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

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

Чтобы использовать шорткод, просто вставьте его на страницу или пост WordPress.

Шорткод выглядит примерно так — [shortcode-name].

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

Вот еще один пример синтаксиса шорткода с использованием гипотетического объекта шорткода «shortcode_ex».

[shortcode_ex] Здесь появляется ваш контент [/ shortcode_ex]

WordPress поставляется со следующими шорткодами по умолчанию:

Видео шорткоды

Аудио шорткоды

Изображения и документы

Разнообразный

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

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

Плагин Shortcodes Ultimate

Плагины для шорткодов позволяют нам создавать шорткоды легко и гибко, без кодирования. Он содержит набор предопределенных шорткодов, которые вы можете скопировать и вставить на свою страницу/пост. На рынке доступно множество плагинов для шорткодов. В этой статье мы сосредоточимся на плагине Shortcodes Ultimate от Владимира Анохина.

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

Чтобы использовать плагин, просто установите его и нажмите кнопку «Шорткоды» на своей странице/посте. Он может быть интегрирован с надстройками премиум-класса для дальнейшего улучшения его функциональности.

Этот плагин очень популярен в сообществе WordPress, о чем свидетельствует тот факт, что он имеет более 800 000 активных установок и более 4000 5-звездочных оценок на момент написания этой статьи.

Ключевые особенности Shortcodes Ultimate Plugin

Установка Shortcodes Ultimate

Установка плагина проста и включает в себя несколько шагов, описанных ниже.

После завершения установки нажмите на «Активировать»

После активации вы будете перенаправлены на страницу плагинов, где вы сможете найти плагин Shortcodes Ultimate и другие. Вот и все, теперь вы готовы использовать плагин и создавать шорткоды на своем сайте WordPress.

Изучение Shortcodes Ultimate

После установки Shortcodes Ultimate на панели инструментов появится меню «Shortcodes». Нажмите на меню «Shortcodes», а затем на «Example Menu». Это откроет страницу примеров. На этой странице есть предварительно скомпилированный список наиболее часто используемых коротких кодов (shortcode (англ.) short — короткий), которые вы можете использовать.

«Accordions, Spoilers, Styles и Anchors» — это позволяет нам добавлять такие вещи, как аккордеоны и якоря. Аккордеоны используются, если вы хотите скрыть некоторый контент под знаком «+», который раскрывается, чтобы раскрыть ваш контент, при нажатии. Есть также несколько различных доступных стилей и значков, которые вы можете добавить на фасад.

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

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

Добавьте медиа-файлы, такие как YouTube, Vimeo, видеофайлы в ваш пост/страницу, используя этот шорткод.

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

Помимо основных шорткодов, есть также несколько других доступных шорткодов.

Создание шорткодов с помощью плагина Shortcodes Ultimate

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

Чтобы добавить шорткод на свою страницу, перейдите на панель администратора и нажмите «Страницы», а затем выберите страницу, на которую вы хотите добавить свой шорткод.

На экране редактора постов вы должны заметить, что в меню редактора добавлена новая кнопка под названием «Вставить шорткод».

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

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

Теперь нажмите на кнопку «Вставить шорткод», чтобы вставить ее на свою страницу/пост.

И все, ваш шорткод теперь вставлен в вашу страницу/пост.

Вот так будет выглядеть кнопка.

Шорткод для разделения содержимого нашей страницы на несколько столбцов

Перейдите на панель инструментов, а затем во вкладку «Страницы». Создайте новую страницу или выберите существующую и нажмите » Вставить шорткод», как указано выше.

В примере мы собираемся разделить содержимое, используя столбцы. Столбцы, однако, находятся в строках. Поэтому мы начнем с добавления шорткода «Rows», нажав на опцию «Row».

Откроется диалоговое окно «Добавить строку». Поскольку мы хотим создать макет из 3 столбцов, мы не будем вносить никаких изменений и не нажимаем кнопку «Установить шорткод».

Шорткод строки теперь должен быть вставлен в ваш пост. Вставьте содержимое между [su_row] и [/su_row].

Теперь вы можете вставить шорткоды «Column» в шорткоды «Rows», чтобы создать макет из нескольких столбцов.

Поместите курсор в начало шорткода строки и снова нажмите кнопку «Вставить шорткод» и выберите «Column» из параметров шорткода.

Настройте параметры из меню параметров шорткода «Column» и нажмите кнопку «Вставить шорткод», как только вы закончите.

Шорткод теперь будет отображаться в вашем редакторе сообщений.

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

Наконец, заполните пробелы между шорткодами своим содержимым. Когда вы закончите, нажмите кнопку «Обновить/Опубликовать», чтобы завершить процесс.

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

Подведем итог

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

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

Надеюсь вам будет интересна эта статья. А у меня на этом все — буду ждать вас снова на страницах своего блога.

Источник