короткий код для 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 запрещает вывод шорткода, тогда идем в файл Function активной темы, помещаем следующее правило и сохраняем.

Фильтр

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

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

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

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

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

Источник

Короткий код для wordpress

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

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Про шаблоны WordPress

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

Самые первые настройки после установки движка WordPress

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

10 стратегий эффективного продвижения статей в блогах на WordPress

Топ WordPress альтернатив для создания персонального сайта

Нужен персональный сайт, но вы не хотите задействовать WordPress? Тогда данная подборка для вас.

В поисках профессионального рабочего окружения для WordPress

За время работы проекта мы не раз рассказывали о настройках рабочего окружения для движка WordPress. WAMP для Windows, MAMP для Mac или XAMPP для обеих операционных систем. Сегодня мы бы хотели поговорить о минусах перечисленных инструментов, а также пролить свет на новые решения.

Работа с WordPress CLI

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

Источник

Шорткоды

Шорткоды – могут содержать в себе какой-то 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

Шорткод (шоткод, 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 CMS

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

Начиная с версии 2.5, разработчики WordPress ввели понятие «Shortcodes API». Этот функционал позволяет создавать и использовать макрокоды в страницах сайта или в записях блога. Например, простая и короткая запись добавит на странице целую фотогалерею.

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

Подготовка почвы

Прежде чем начать создавать что-либо, предлагаю свой вариант размещения файлов:

Практически в каждом руководстве предлагают создавать шорткоды прямо в файле functions.php. Скажу сразу: я — противник такого подхода. Вместо этого настоятельно рекомендую вынести все шорткоды в отдельный файл (includes/shortcodes.php) и подключить его в functions.php одной строкой. Это значительно разгрузит functions.php и сделает код более читабельным.

Заметка: WordPress, конечно, поддерживает подключение файлов через require, но очень не рекомендует делать этого. Вместо этого предлагается использовать get_template_part().

Подключение скриптов

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

Пример такой реализации:

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

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

Пример такой реализации:

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

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

Есть еще пара проблем, с которыми могут столкнуться начинающие разработчики:

Теперь — более детально.

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

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

[price]
— [plan title=’Plan 1’ price=’99’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]
— [plan title=’Plan 2’ price=’499’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]
…
[/price]

В данном примере используется три шорткода: [price] [plan] [option].

add_shortcode( ‘price’, ‘price_code’ );
add_shortcode( ‘plan’, ‘plan_code’ );
add_shortcode( ‘option’, ‘option_code’ );

Для предотвращения использования внутренних шорткодов в качестве отдельных предлагается следующая схема:

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

Описание функций внутренних шорткодов:

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

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

Повторяющиеся шорткоды

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

[column_half]
[column_half] Content [/column_half]
[column_half] Content [/column_half]
[/column_half]
[column_half] Content [/column_half]

К сожалению, для WordPress уже такая вложенность “не по зубам”. Верстка разлетится уже на втором контенте. Происходит это потому что при открытии шорткода WordPress сразу же ищет вторую (закрывающую) часть этого шорткода, т.е. в данном примере первая колонка будет закрыта на первом же вложенном шорткоде.

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

Заключение

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

Автор: Дмитрий Кабаков, Senior Front-end Developer.

Источник