Что такое шорткоды wordpress
Создание шорткодов в 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.
Шорткоды в WordPress — правильное создание и вставка
В этом материале вы узнаете, что такое шорткоды WordPress. Как создавать и подключать их вывод в сайдбарах и описаниях рубрик. Также покажу, как shortcodes правильно вставлять в файлы темы.
Что такое шорткоды WordPress
Выглядит она примерно так:
Для чего вообще, это нужно?
Во-первых, такой вариант значительно упрощает вставку громоздкого кода. Гораздо легче задавать короткие коды на страницах, чем прописывать громоздкие скрипты.
Также это полезно при дальнейшем редактировании кода.
Вы создаете функцию и прикрепляете нужный код к определенному шорткоду. Далее такие шорткоды проставляете на страницах в нужных местах.
К примеру, вам нужно отредактировать код на всех этих страницах. В таком случае, не нужно редактировать каждую запись. Достаточно просто изменить код в самой функции, где создавали шорткод.
Это намного удобнее и экономит время. Да и к тому же безопаснее.
А вот если неправильно добавить сам код на страницу, то появятся ошибки. Сайт не будет работать должным образом.
Ну и во-вторых, по умолчанию, исполнение скриптов WordPress прямо в статьях запрещено. Это сделано для безопасности сайта.
То есть, если кто-то у вас в комментариях что-нибудь пропишет, то это не будет работать. Код не вступит в силу.
Конечно же, можно снять запрет на исполнение кода в статьях. Но я рекомендую это делать только в крайних случаях.
А если захотите что-то выводить в записях, то делайте это через шорткоды. Либо добавляйте код непосредственно в файлы установленной темы. Например, вывод рекламы вначале всех статей.
Также можно подключать и дополнительные плагины для вставки кода в статьях.
Создаем шорткоды в WordPress
Давайте теперь я покажу, как можно создавать свои шорткоды в WordPress. Как я говорил ранее, это урезанная версия исполняемого кода. Такие версии можно создавать самому и выводить в любых местах сайта.
Вы и сами замечали, что многие плагины выводят код с помощью специальных шорткодов. Например, вставка рекламы, различные выделения текста, создание галерей и тому подобное.
Простой вывод без плагина
Чтобы было понятно, как все это работает, давайте создадим свой shortcode без плагина.
Это файл установленной темы. Именно через него добавляется основной функционал. От сюда и соответствующее название.
Итак, в этот файл добавляем вот такую функцию:
Она состоит из двух частей.
А выводить я буду простую фразу «Исполняемый код». Вам же рекомендую сюда вставить какой-нибудь код для вывода. Например, кнопки или реклама.
Вот в принципе, и все!
Функцию мы добавили и привязали к определенному короткому коду. Теперь идем в редактор статьи. Там в нужном месте прописываем этот шорткод WordPress.
Не забывайте про квадратные скобки!
Как видите, не нужно постоянно добавлять громоздкий код и боятся ошибок при копировании. Достаточно поставить в нужных местах небольшой шорткод и дело сделано.
Создание таких элементов кода очень полезно при оптимизации сайта.
Вам не нужно дополнительно устанавливать плагины WordPress. Вы просто создаете новый функционал и в дальнейшем обрамляете его в такие метки.
К примеру, нужно вывести блок рекламы только в определенных статьях и местах.
Можно автоматом вывести в определенных статьях рекламу. Но вывести ее красиво, и чтобы в разных местах – это затруднительно.
Реклама куда лучше будет работать, когда вы ее вписываете вручную и по смыслу. Вот как-раз в таких случаях и проставляйте вручную WP shortcode.
Главное вначале вручную проставить их в нужных местах!
Потом если нужно будет поменять рекламу, то сделать вы это сможете в самой функции. То есть вам не нужно заходить в каждую статью и править ее. Достаточно просто зайти в файл functions.php и заменить исполняемый код.
Помимо рекламы можно выводить и другие элементы на сайте. Например, подписку на e-mail рассылку и ссылки. А также кнопки, текстовые или графические предложения.
Shortcode WordPress с параметрами
Давайте усложним пример и в shortcode WordPress добавим свои параметры. Они пригодятся если нужно выводить один и тот же элемент, но немного в измененном виде.
К примеру, мне нужно вывести одну и ту же ссылку с разными анкорами. Чтобы не создавать под каждый анкор новый шорткод, мы просто при вставке зададим свои параметры.
В параметрах anchor и url прописываем свои значения.
В качестве исполняемого кода будет такая строка:
Здесь потом будут выводиться наши параметры. Также я указал открытие ссылки в новой вкладке.
Далее можете указать свое название функции и шорткода.
Теперь при вставке ссылки с другими параметрами не нужно создавать новый wp шорткод. Достаточно в редакторе вставить такой же короткий код, но со своими параметрами.
Вот как нужно вставить шорткод в страницу WordPress:
Можно выводить и без своих параметров. Вот так:
Тогда будут использованы те параметры по умолчанию, что были указаны в функции.
Для разных размеров изображений можно использовать такой пример.
В параметрах width и height задаем высоту и ширину картинки. У меня, это 100 px.
В качестве исполняемого кода прописываем такую строку, но уже со своим изображением:
Теперь, если нужно поменять размер картинки в определенных записях, то в шорткоде задаем свои параметры. Например:
Создаем двойной шорткод WordPress
Сейчас покажу, как создавать открывающий и закрывающий шорткод WordPress. Это очень полезно при стилизации определенных элементов. Например, чтобы выделить текст и вставить его между двумя шорткодами.
Теперь в редакторе вставляем такой код со своим урлом ссылки:
Также можно вставить внутри дополнительный шорткод:
Если нужно выделить текст и задать определенный стиль, то можно использовать такой вариант:
Тогда в редакторе выделенный фрагмент обрамляем двумя шорткодами. Получится так:
Но я рекомендую подключать CSS отельным файлом. Поэтому в примере лучше использовать так:
Плагин для создания шорткодов в WordPress
Есть специальный плагин для создания шорткодов WordPress. Называется Shortcoder. Он пригодится тем, кто не хочет вручную возиться с созданием пользовательских кодов.
Устанавливаете это расширение с бесплатного каталога Вордпресс. Переходите в меню «Настройки» —> «Shortcoder».
Создание шорткода с помощью плагина
В поле «Content» вставляем исполняемый код. Например, вывод рекламы. Чуть выше прописываем название латинскими буквами.
Жмем на «Create Shortcode».
Затем переходим в визуальный редактор. Там вы увидите новую кнопку для удобной вставки шорткода. Отмечаете курсор в нужном месте записи и нажимаете на эту кнопку.
Кнопка плагина Shortcoder в визуальном редакторе
Во всплывающем окне выбираем подходящий вариант короткого кода и нажимаем на «Insert Shortcode».
Выбираем подходящий короткий код
Плагин очень полезен. Особенно для новичков.
В нем есть еще и дополнительные опции. Например, можно выводить разные коды как для декстопных, так и для мобильных устройств.
Как вставить шорткод в тему WordPress
Теперь поговорим о том, как правильно вставить шорткод в тему WordPress. Для начала начнем со вставки в сайдбар и описании таксономий.
Это очень важные функции.
К примеру, это очень хорошо поможет вам при оптимизации рубрик на сайте. Можно вывести определенные элементы и оформить описание более красиво и читабельно.
Итак, чтобы включить такую поддержку в описании таксономий, в файл functions.php нужно добавить такой код:
Также я рекомендую добавить поддержку и в сайдбарах. Это тоже очень важные места на мой взгляд.
Чтобы это сделать, в файл functions.php добавляем следующий код:
При желании можно прикрутить поддержку коротких кодов в комментариях:
Для использования в анонсах постов, вставьте такую строку:
Теперь давайте рассмотрим, как можно добавить шорткоды WordPress в php файлы темы.
Иногда и такое необходимо.
Поэтому, чтобы этого избежать, свой шорткод нужно обрамлять в специальный php-контейнер:
Короткий код [reklama] заменяем на свой. Только так система поймет исполняемый код и без ошибок запустит его в действие.
На этом у меня все!
Теперь вы знаете, что такое шорткоды в WordPress и для чего они нужны. Также мы рассмотрели разные варианты их создания и вставки на сайт. Обязательно используйте их на своем проекте. В общем, изучайте и внедряйте!
Что такое шорткод (shortcode) WordPress?
Давайте разберемся с таким понятием, с которым можно встретится работая в системе WordPress, это понятие шорткода.
Что же это такое и для чего они нужны, давайте разбираться в этом видео.
Первое, что нужно понимать, что шорткоды создавались для того чтобы нам можно было бы вставить какую-либо информацию внутрь нашей записи или страницы, которую мы создаем в вордпресс.
Что же это за информация? Давайте будем разбираться!
Предположим мы создаем с вами какую-либо страницу, или запись в вордпресс и нам нужно внутрь этой записи добавить какую-то информацию из так называемой бэкенд (backend) части нашего сайта, то есть из серверной части. Нам нужно взять какую то информацию из этого сервера, обработать ее каким то определенным способом по определенной логике, и вставить ее на нашу страницу.
В общем, какая-то программная задача, которая требует выполнения определенной логики, какой-либо программной обработки, и вывода результата программной обработки в нашу запись или страницу, она решается с помощью шорткодов.
Обычная php-функция, которая может принимать какие-либо аргументы, производить вычисления, связываться с базой данных и т.д.
Самое важное, что делает эта функция, она должна вернуть какой-либо результат, который будет выводиться в нашем шорткоде.
Далее, с помощью конструкции add_shortcode() регистрируется шорткод в системе вордпресс, и мы можем его использовать внутри нашей страницы или записи, вставив его в нужное место.
Вот такое основное назначение шорткодов в вордпресс, надеюсь стало более понятно что это такое и для чего это нужно.
Давайте в следующих видео на практике будем разбираться, как их создавать, как с ними работать, и какие возможности у вас при этом появляются.
Как легко вставить шорткод в 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 различными методами и способами, напишите пожалуйста, статья вам помогла?
20 шорткодов и плагинов WordPress, которые вы возможно захотите попробовать
Если коротко, то шорткод, как правило, используется для быстрого вызова длинного сценария или фрагмента кода. Несмотря на то, что WordPress имеет свой собственный набор шорткодов, которые можно использовать в записях и страницах вашего блога, кроме них существует большое количество шорткодов, которые предлагают почти безграничные возможности.
Шорткоды можно вставлять в тему блога вручную или через плагин. Проблема состоит только в том, чтобы найти среди огромного их количества именно тот, который подойдет вам.
Не волнуйтесь, в этой статье, мы представим 10 плагинов для WordPress, которые добавляют в ваш блог функциональный шорткод, а также 10 кодов, которые можно добавить самостоятельно.
Плагины WordPress
Вот некоторые из плагинов, которые позволяют применять или настраивать шорткоды WordPress. В соответствующих случаях предлагается альтернативный плагин, который делает почти то же самое.
1. Shortcode
[ postcountbr ] — отображает общее количество опубликованных в блоге записей;
[ catcountbr ] — отображает общее количество категорий, которые содержат одну или более запись;
[ tagcountbr ] — отображает общее количество тегов, которые содержатся в одной или более записи;
[ totalwords ] — отображает общее количество слов в опубликованных записях;
[ commentcount ] — отображает общее число одобренных комментариев;
[ PageCount ] — отображает общее количество опубликованных страниц.
2. WordPress Shortcodes
Этот плагин включает в себя более 20 шорткодов WordPress и простой редактор шорткодов.
Вы можете использовать его для добавления в свой блог таких крутых элементов, как:
Вы можете даже объединять несколько встроенных шорткодов, чтобы создавать такие уникальные элементы, как список кнопок или ссылок.
Другие варианты : Существует два аналогичных плагина J Shortcodes и Arconix Shortcodes — которые также включают в себя набор полезных шорткодов. Например, для создания контента и информационных панелей, кнопок, вкладок, выпадающих панелей, переключателей и многого другого.
3. Post Content Shortcodes
Этот плагин добавляет в блог два шорткода:
[post-content] — позволяет отображать содержимое одиночной записи или страницы, внутри другой записи или страницы. Вы должны использовать в шорткоде аргумент, чтобы указать ID поста. Вы также можете использовать аргументы, чтобы отображать характерное изображение, фрагмент записи и заголовок поста;
[post-list] — отображает список записей внутри другой записи. Этот шорткод также поддерживает опциональные аргументы для настройки списков: опции упорядочения элементов, типы/статусы сообщений, вывод изображений и т.д. Вы даже можете подтянуть список записей из другого блога, добавив ID блога в качестве аргумента в шорткод.
4. Shortcoder
Плагин Shortcoder позволяет создавать пользовательские шорткоды через визуальный редактор. Вы также можете хранить часто используемые тексты, HTML и фрагменты JavaScript.
Плагин имеет встроенную кнопку TinyMCE, которую можно использовать в редакторе блога, чтобы вставлять шорткоды. Это позволит вам добавлять свои собственные шорткоды:
Другие варианты : Если вы ищете нечто подобное, попробуйте плагин Shortcode Manager, который позволяет создавать, управлять, импортировать и экспортировать шорткоды.
5. Hide Broken Shortcodes
Иногда, вы можете отключить шорткод, случайно оставив часть его функционала. Вместо того чтобы перебирать каждую страницу или запись, чтобы удалить « битые » шорткоды, проще будет скрыть их. Данный плагин поможет вам это сделать.
Другие варианты : Hide Unwanted Shortcodes аналогичный плагин, который делает «битые» шорткоды недоступными для просмотра на сайте. После этого вы можете отредактировать шорткод на странице настроек плагина.
6. Column Shortcodes
Если вам нужен простой способ создания столбцов внутри ваших сообщений и страниц — это идеальный шорткод-плагин. Просто выберите нужную ширину столбца из всплывающего окна плагина, и он будет добавлен в редактор сообщения.
На выбор предлагается 10 размеров столбцов: от одной шестой до всей ширины страницы. Вы также можете настроить заполнение каждого отдельного столбца:
7. Metaphor Shortcodes
Если вы хотите использовать для ваших сообщений и страниц адаптивную сетку столбцов, попробуйте плагин Metaphor Shortcodes. С его помощью вы можете установить определенные параметры для столбцов: такие как интервал, начало, конец и классы.
Этот плагин также поддерживает несколько других удобных шорткодов, в том числе:
8. ShortCodes UI
ShortCodes UI это еще один плагин для создания шорткодов, которые используют собственные кнопки TinyMCE и Quicktag. Вы можете легко вставлять шорткоды в ваши сообщения и страницы через визуальный и HTML редакторы.
Данный плагин отлично подходит для новичков, которые плохо знакомы с кодами, для них предназначены обучающие видеоуроки. Те, кто знает о кодах немного больше, вероятно, оценят цветовую разметку синтаксиса в редакторе кода.
Присутствует также функция импорта / экспорта, с помощью которой вы можете переместить ваши шорткоды с одного сайта на другой и даже поделиться с друзьями.
Другие варианты : My Shortcodes — это аналогичный плагин с красивым интерфейсом, который позволяет создавать собственные шорткоды.
В административной панели плагина, вы можете управлять, редактировать, включать / выключать, а также экспортировать элементы и шорткоды. Интерактивный просмотр позволяет увидеть, как выглядит ваш шорткод еще до его добавления в запись или на страницу.
9. Last Updated Shortcode
Это очень простой плагин, который позволяет добавить шорткод [ LastUpdated ] в ваши записи и страницы. Данная функция будет отображать дату и / или время последнего обновления.
Есть также опции для изменения формата отображения даты / времени.
10. Geoportail Shortcode
Данный плагин добавляет с помощью шорткода карту Geoportail в ваши сообщения и страницы. После этого вы можете задать размер карты, масштаб, местоположение (широту и долготу), размер (обычный, мини), территорию, слои и многое другое.
Карта поддерживает геотеги (которые можно подключить через плагин Геолокации ), чтобы в блоге отображалось место написания (публикации) ваших сообщений.
Плагин также включает в себя шорткод-билдер, для настройки шорткода карты, а также функцию предварительного просмотра, с помощью которой вы сможете просмотреть вашу карту, прежде чем публиковать ее.
Шорткоды
Существуют также простые шорткоды, которые можно использовать в блоге — без необходимости устанавливать их через плагин.
Для каждого шорткода мы предоставим вам:
Для некоторых шорткодов, возможно, потребуется дополнительная настройка (например, добавление вашего личного кода Google AdSense), так что некоторые знания о редактировании кодов вам все же понадобятся.
Другие шорткоды могут иметь дополнительные параметры, которые вы можете добавить: например, ширина и высота. Узнать больше вы можете кликнув ссылку для каждого шорткода.
Insert AdSense Ads
Вставляет блок объявления Google AdSense в том месте вашего контента, где вам нужно.
Show Related Posts
Выводит список похожих записей выше или ниже контента страницы.