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

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

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

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

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

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

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

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

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

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

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

Плагин Shortcodes Ultimate

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

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

Установка Shortcodes Ultimate

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Изучение Shortcodes Ultimate

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

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

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

Источник

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу 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. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpressТекст

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpressФильтр

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

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

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

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

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

Источник

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Шорткод – что это?

Его можно охарактеризовать следующим образом – короткий код для внедрения какой-либо функции в выбранном месте сайта. Состоит из легко запоминающегося текста. Он скрывает отображение длинного кода, записанного в PHP-файле, что упрощает работу для новичков и малоопытных вебмастеров. Для профессионалов shortcode позволяют экономить время на заранее разработанных функциях.

С их помощью можно выводить текст, оформлять контент, добавлять видео, слайды, изображения, графики и другие элементы. Такие плагины, как Nextgen Gallery, Visual Composer, Contact Form 7 используют шорткоды для размещения блоков и контента.

Регистрируется несколькими способами:

Известно, что большое количество дополнительных модулей и приложений подтормаживает работу ресурса, поэтому рассмотрим наиболее оптимизированный вариант. Следует зайти в functions.php, находящийся в корневой папке текущей темы и открыть его через текстовый редактор Notepad++. После чего можно вставить шорткод в тему WordPress. Регистрация осуществляется следующим образом:

На примере видно, как можно организовать регистрацию рекламного блока AdSense:

// Регистрация функцию
function add_adsense () <

‘;
>
//Регистрация шорткода
add_shortcode( ‘adsense’, ‘add_adsense’ );

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

Следующий пример позволяет сократить время добавления атрибута nofollow к ссылкам на внешний ресурс. В обычной ситуации процесс происходит так: переключение в режим HTML, поиск ссылки, добавление тегов. Использование shortcode не требует переключения режимов – достаточно работать в визуальном редакторе. Регистрация:

$link =
explode ( “href”,
$content )
;

Для скрытия URL, следует обернуть его в зарегистрированные теги:

[nf] Внешняя ссылка [/nf]

Подключение стиля к контенту:

Добавив текст в теги, фоновая часть заполняется желтым цветом:

[yb] Участок текста [/yb]

Названия указываются на свое усмотрение – чем короче, тем проще запоминать и вписывать.

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

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

Ситуация с квадратными скобками не работает с файлами темы, применяется специальная функция «do_shortcode»:

Текст в квадратных скобках – название требуемого шорткода. Также, данная конструкция работает с виджетами.

Плагины для работы с shortcode

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

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

Shortcodes Ultimate

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Перейти

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

Обладателям премиальной версии предлагаются дополнительные элементы – 15 штук, 60 скинов и возможность создавать пользовательские шорткоды. Все это можно приобрести по отдельности либо вместе. Скачано более 700 000 копий, средняя оценка вебмастеров – 5 звезд. Версия со всеми аддонами обойдется в 59 долларов для одного сайта.

Column Shortcodes

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Перейти

Отличный вариант для создания столбцов, достаточно вставить шорткод в страницу WordPress с необходимыми параметрами. В панели управления можно выбрать 10 колонок, каждая из которых отличается по ширине. Доступно редактирование отступов и подключение собственных стилей. Скачано более 100 000 копий, оценка пользователей – 4,5 из 5. На странице расширения размещена подробная инструкция и ответы на часто задаваемые вопросы.

WP Shortcode by MyThemeShop

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Перейти

Интересное решение, в особенности для тех вебмастеров, которые часто меняют темы или их настройки. Все функции сохраняются даже при смене шаблона. Доступно около 24 шорткодов для создания кнопок, блоков, ценовых таблиц, переключателей. После установки, в редакторе записей/страниц появляется кнопка добавления shortcode. Во всплывающем окне имеется строка выбора и некоторые параметры. Настройка легкая и не требует особых навыков.

Распространяется на бесплатной основе, скачано более 70 000 раз. Оценка пользователей – 4,5 балла.

Bootstrap Shortcodes

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Перейти

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

Бесплатное расширение скачано более 50 000 раз, оценка вебмастеров – 5 из 5. Русский язык недоступен.

Shortcake

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Основные возможности:

Распространяется на бесплатной основе. Скачан порядка 20 000 раз и оценен пользователями в 4 балла.

Заключение

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

Источник

Шорткоды в WordPress — правильное создание и вставка

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

В этом материале вы узнаете, что такое шорткоды WordPress. Как создавать и подключать их вывод в сайдбарах и описаниях рубрик. Также покажу, как shortcodes правильно вставлять в файлы темы.

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Выглядит она примерно так:

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Для чего вообще, это нужно?

Во-первых, такой вариант значительно упрощает вставку громоздкого кода. Гораздо легче задавать короткие коды на страницах, чем прописывать громоздкие скрипты.

Также это полезно при дальнейшем редактировании кода.

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

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

Это намного удобнее и экономит время. Да и к тому же безопаснее.

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

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

То есть, если кто-то у вас в комментариях что-нибудь пропишет, то это не будет работать. Код не вступит в силу.

Конечно же, можно снять запрет на исполнение кода в статьях. Но я рекомендую это делать только в крайних случаях.

А если захотите что-то выводить в записях, то делайте это через шорткоды. Либо добавляйте код непосредственно в файлы установленной темы. Например, вывод рекламы вначале всех статей.

Также можно подключать и дополнительные плагины для вставки кода в статьях.

Создаем шорткоды в WordPress

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

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

Простой вывод без плагина

Чтобы было понятно, как все это работает, давайте создадим свой shortcode без плагина.

Это файл установленной темы. Именно через него добавляется основной функционал. От сюда и соответствующее название.

Итак, в этот файл добавляем вот такую функцию:

Она состоит из двух частей.

А выводить я буду простую фразу «Исполняемый код». Вам же рекомендую сюда вставить какой-нибудь код для вывода. Например, кнопки или реклама.

Вот в принципе, и все!

Функцию мы добавили и привязали к определенному короткому коду. Теперь идем в редактор статьи. Там в нужном месте прописываем этот шорткод WordPress.

Не забывайте про квадратные скобки!

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

Создание таких элементов кода очень полезно при оптимизации сайта.

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

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

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

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

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Главное вначале вручную проставить их в нужных местах!

Потом если нужно будет поменять рекламу, то сделать вы это сможете в самой функции. То есть вам не нужно заходить в каждую статью и править ее. Достаточно просто зайти в файл functions.php и заменить исполняемый код.

Помимо рекламы можно выводить и другие элементы на сайте. Например, подписку на e-mail рассылку и ссылки. А также кнопки, текстовые или графические предложения.

Shortcode WordPress с параметрами

Давайте усложним пример и в shortcode WordPress добавим свои параметры. Они пригодятся если нужно выводить один и тот же элемент, но немного в измененном виде.

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

В параметрах anchor и url прописываем свои значения.

В качестве исполняемого кода будет такая строка:

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

Далее можете указать свое название функции и шорткода.

Теперь при вставке ссылки с другими параметрами не нужно создавать новый wp шорткод. Достаточно в редакторе вставить такой же короткий код, но со своими параметрами.

Вот как нужно вставить шорткод в страницу WordPress:

Можно выводить и без своих параметров. Вот так:

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

Для разных размеров изображений можно использовать такой пример.

В параметрах width и height задаем высоту и ширину картинки. У меня, это 100 px.

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

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

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

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

Теперь в редакторе вставляем такой код со своим урлом ссылки:

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

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

Тогда в редакторе выделенный фрагмент обрамляем двумя шорткодами. Получится так:

Но я рекомендую подключать CSS отельным файлом. Поэтому в примере лучше использовать так:

Плагин для создания шорткодов в WordPress

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

Устанавливаете это расширение с бесплатного каталога Вордпресс. Переходите в меню «Настройки» —> «Shortcoder».

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpressСоздание шорткода с помощью плагина

В поле «Content» вставляем исполняемый код. Например, вывод рекламы. Чуть выше прописываем название латинскими буквами.

Жмем на «Create Shortcode».

Затем переходим в визуальный редактор. Там вы увидите новую кнопку для удобной вставки шорткода. Отмечаете курсор в нужном месте записи и нажимаете на эту кнопку.

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpressКнопка плагина Shortcoder в визуальном редакторе

Во всплывающем окне выбираем подходящий вариант короткого кода и нажимаем на «Insert Shortcode».

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpressВыбираем подходящий короткий код

Плагин очень полезен. Особенно для новичков.

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

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

Теперь поговорим о том, как правильно вставить шорткод в тему WordPress. Для начала начнем со вставки в сайдбар и описании таксономий.

Это очень важные функции.

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

Итак, чтобы включить такую поддержку в описании таксономий, в файл functions.php нужно добавить такой код:

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

Чтобы это сделать, в файл functions.php добавляем следующий код:

При желании можно прикрутить поддержку коротких кодов в комментариях:

Для использования в анонсах постов, вставьте такую строку:

Теперь давайте рассмотрим, как можно добавить шорткоды WordPress в php файлы темы.

Как вставить шорткод в страницу wordpress. Смотреть фото Как вставить шорткод в страницу wordpress. Смотреть картинку Как вставить шорткод в страницу wordpress. Картинка про Как вставить шорткод в страницу wordpress. Фото Как вставить шорткод в страницу wordpress

Иногда и такое необходимо.

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

Короткий код [reklama] заменяем на свой. Только так система поймет исполняемый код и без ошибок запустит его в действие.

На этом у меня все!

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *