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

Содержание

Как вставить шорткод в html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вторая часть состоит из директивы add_shortcode() .

В ней мы вписываем название шорткода, который потом заключается в квадратные скобки. У меня это reklama . Затем указываем название своей функции. У меня это reklameasy .

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

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

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

Когда перейдете в статью и в редакторе добавите [reklama] , то в нужном месте у вас будет работать тот скрипт, который вы прописали.

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

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

Вам не нужно дополнительно устанавливать плагины 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 файлы темы.

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

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

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

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

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

Теперь вы знаете, что такое шорткоды в 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] [option].

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

Price -> вывод кода на страницу
Plan -> получение данных
Option -> получение данных

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

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

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

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

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

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

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

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

Заключение

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

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

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

Код вставки шорткода в PHP файл

Для тех, кто в теме, то вот этот код:

Теперь немного поясним.

Например, у нас есть такой шорткод — [contact-form-7 404 «Not Found»]

Мы берем этот шорткод и вставляем его вместо — [ваш_шорткод]

В результате получаем следующий код:

Далее, идём в редактор тем и вставляем данную конструкцию в нужное место нашего шаблона.

Что делать, если шорткод не работает?

Проблема решается элементарно. Если не хотите вникать, то просто вставьте ваш шорткод в этот код:

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

Как вставить видео на сайт wordpress

Новичкам, которые еще не разобрались как управлять движком WordPress, может показаться, что вставить видео — это сложная затея. Но на деле оказывается, что любое медиа очень легко можно добавить в Вордпресс, будь то галерея, изображение или видео. И существует для этого два способа:

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

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

А вот плагины — это верный способ добавить видеозапись к себе на сайт WordPress. И существует их большое множество. Рассмотрим в данной статье самые лучшие из них.

Содержание

Video Gallery WordPress Plugin

VideoPress
Video Player WordPress Plugin
YouTube SEO Playlist
TubePress
Когда использовать плагин, а когда шорткод?

Video Gallery WordPress Plugin

Это премиальный плагин, который распространяется на платной основе. С его помощью вы сможете добавить на сайт видео с Ютуба и сервиса Vimeo. Video Gallery WordPress Plugin позволит вам создавать видео-сборники. Галерея, созданная при помощи данного модуля, может быть размещена в любой части сайта. Пользователь сможет легко переключаться между различными видео-дорожками, и при этом сайт будет быстро загружаться.

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

Преимущества плагина Video Gallery WordPress Plugin:

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

VideoPress

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

Ранее VideoPress для WordPress предоставлялся платно (около 60 долларов), теперь его распространяют бесплатно. При помощи него вы сможете вставить на сайт HD видео до 1 Гб, так что фильмы загружать через VideoPress не получится. Зато можно добавить короткие ролики с возможностью скачивать их. А поскольку все они будут храниться прямо на хостинге WordPress, скорость загрузки страницы не упадет.

Video Player WordPress Plugin

Еще один мощный видео-плагин. С ним галерея может быть размещена в любой части страницы. Сможете добавить ролики различного формата (с Ютуба, Avi, flv и другие), а также аудио в MP3. Одновременно есть возможность добавить сразу несколько плееров, и все они будут иметь оригинальный, неповторимый вид, который можно настроить в панели администрирования.

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

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

Video Player WordPress Plugin удобен не только для вас, но и для посетителей. Они смогут прятать плеер, когда тот мешается, переключаться между плейлистами, категориями и быстро прокручивать видеозапись. Чтобы вставить видео в пост, плагин предоставит вам несложный шорткод для размещения. У вас будет возможность заранее настроить размер, цвет плеера и позиции видеозаписей в нем.

YouTube SEO Playlist

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

Слово «SEO» не спроста значится в названии это инструмента. Кроме того, что он позволяет легко добавить неограниченное количество роликов на страницу, он еще и помогает ресурсу индексироваться. Плагин использует Google Data API — технологию копирования описания с Ютуба, которое в дальнейшем будет индексироваться поисковыми машинами.

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

TubePress

Еще один инструмент для работы с медиа с Ютуба и Vimeo. С TubePress можно добавить видео в любую часть страницы (в средине поста, на главной, сбоку и т. д.). Пользователю будет доступно видео без перехода на отдельный сайт — оно загрузится прямо в лайтбоксе. А для поисковых машин разработчики предусмотрели алгоритм вытягивания мета-информации из роликов, размещенных на посторонних сервисах. Таким образом, добавленные видеозаписи будут удобны посетителям, и привлекательны для Гугла и Яндекса.