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

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

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

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

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

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

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

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

Предварительный просмотр
Форма

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

В Gutenberg

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

Блок гутенберга
Шорткод в гутенберге
  • Нажимаем плюс
  • Находим раздел Виджеты
  • Выбираем одноименный инструмент

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

Прописываем шорткод
Новый блок

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

Предварительный просмотр
Форма

В плагине Elementor

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

Вставить шорткод в elementor
Инструмент в elementor

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

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

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

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

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

Поля ввода html кода в шаблонах
Раздел Code Editor
  1. Нашел где можно прописать шорткод
  2. Вижу, что на предварительно просмотре форма работает
  3. Если все устраивает, то нажимаю опубликовать

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

В PHP документе

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

<?php echo do_shortcode('[шорткод]'); ?>

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

<?php echo do_shortcode('[contact-form-7 id="245" title="Контактная форма 1"]'); ?>

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

Помещаем PHP в файл вывода записей
Куда вставлять PHP
  1. Заходим в редактор тем
  2. Находим файл в который необходимо вставить информацию
  3. Определил, что блок вывода контента это div с классом entry-content, и перед закрывающим тегом прописал функцию
  4. Обновляем страницу и смотрим, элемент отобразился где нужно, под контентом.
Вывод элемента в контенте
Обратная связь под контентом

В виджетах

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

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

Виджет текст

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

Виджет текст
Текст

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

add_filter( 'widget_text', 'do_shortcode' );
PHP фильтр
Фильтр

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

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

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

Плагин в поиске
Shortcode widget в поиске

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

Возможность от SW
Shortcode widget

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

Пожалуйста, оцените материал:

Давно занимаюсь и разрабатываю сайты на Wordpress. Считаю что лучшего решения для ведения бизнеса не найти, поэтому считаю долгом делиться информацией с остальными.
Получай полезные материалы удобным способом!
Комментарии:
    1. Пожалуйста, скоро статью дополню, можно будет добавлять шорткод кнопкой из редактора.

  1. Как в поле TEXT или NUMB в CF7 (которое вы показали)
    вывести значение из шорткода другого плагина?

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