Все о шорткодах WordPress

Если вы когда-либо работали с темой WordPress, вы, вероятно, сталкивались с шорткодом WordPress… что-то вроде этого:

 [button type="twitter"]

Другое дело, поняли ли вы, что такое шорткоды и как они работают! Авторы тем широко используют шорткоды, но иногда просто «предполагают», что пользователи знают, что это такое и как они работают, хотя на самом деле они могут сбивать с толку!

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

Давайте прыгать!

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

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

Итак, что такое шорткоды? Короче говоря (извините, не мог удержаться), шорткоды — это фрагмент кода, который можно использовать практически в любом месте вашего веб-сайта для вставки функции или функции. Таким образом, вместо того, чтобы кропотливо кодировать, скажем, значок социальной сети с использованием HTML, вы можете вместо этого вставить шорткод, который «говорит» WordPress вставлять значок социальной сети везде, где вы вставляете определенный шорткод. Стиль и функция (в этом примере) значка социальной сети заранее определены разработчиком темы, поэтому вся тяжелая работа с точки зрения программирования была сделана за вас.

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

 social icon="facebook"]

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

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

Что вы можете делать с шорткодами WordPress?

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

Пример шорткода с использованием плагина Contact Form 7

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

Для этого после того, как вы установили Contact Form 7, все, что вам нужно сделать, чтобы добавить форму на страницу или опубликовать на своем веб-сайте, это следующее.

Шаг первый:

Перейдите в меню «Контакты» > «Контактные формы» и создайте новую форму или используйте существующую, с которой поставляется плагин.

Скопируйте шорткод [contact-form-7 title="Contact form 1"] , соответствующий форме.

Шаг второй:

Вставьте шорткод в то место, где вы хотите, чтобы форма отображалась, как показано ниже:

Сохраните страницу, и вы должны увидеть это:

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

Использование шорткодов WordPress по умолчанию

Хотя большинство шорткодов, которые вы, вероятно, будете использовать, будут введены в результате установки темы или плагина. Однако в самом WordPress есть несколько шорткодов «по умолчанию», которые вы можете использовать. Это включает:

• Аудио
• Подпись
• Встроить
• Галерея
• Плейлист
• видео

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

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

Итак, что вы делаете, когда ни WordPress, ни тема/плагин, которые вы используете, не предоставляют шорткод, необходимый для вашей конкретной цели? Легко… создай свой собственный!

Создайте свой собственный шорткод WordPress

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

Шаг первый:

В этом примере мы собираемся создать кнопку CTA (призыв к действию), которую читатель может щелкнуть, чтобы быть перенаправленным на контактную форму.

Чтобы все было организовано, мы предлагаем хранить все ваши шорткоды в отдельном файле (вместо того, чтобы добавлять код в существующий файл). Для этого создайте новый пустой файл в той же папке, что и файл functions.php вашей темы, и назовите его, например, my-shortcodes.php . После этого включите этот файл в ваш файл functions.php следующим образом:

 include('my-shortcodes.php');

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

Мы будем использовать функцию add_shortcode , представленную в файле wp-includes/shortcodes.php . Этой функции нужны два параметра: тег шорткода и функция обратного вызова.

 add_shortcode( string $tag, callable $callback )

Шаг второй:

Вот фрагмент кода, который вы можете поместить в свой файл functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

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

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

Кроме того, вы можете дополнительно использовать этот код CSS в файле style.css , чтобы сделать кнопку более привлекательной:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Шаг третий:

Отображение вашего шорткода в содержимом веб-сайта выполняется так же, как и для любого другого шорткода. В этом примере наш шорткод будет [my_cta_button] . Добавьте это в сообщение или страницу, и вы должны увидеть что-то вроде этого при просмотре страницы:

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

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

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

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

В приведенном выше коде мы использовали функцию shortcode_atts для объединения определенных пользователем атрибутов с известными атрибутами. Таким образом, вам нужно создать другую функцию шорткода для каждой кнопки CTA, которая вам понадобится, но только такую, которая каждый раз перенаправляет в любое место, которое указывает пользователь.

Использование этого кода должно быть указано следующим образом: [my_cta_button title='My Custom Title' url='MY_URL']

Добавьте шорткод в файл шаблона

С точки зрения разработчиков, есть также быстрый способ принудительно включить шорткод в предварительно определенную позицию на вашем веб-сайте, вызвав его в соответствующем файле шаблона. Например, если мы хотим, чтобы кнопка CTA отображалась в нижней части каждой отдельной публикации или страницы, мы можем отредактировать отдельный шаблон и использовать функцию do_shortcode . В теме Twenty Twenty мы отредактировали файл singular.php и вставили эту строку под закрытие основного контейнера div:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Результат будет отображаться под содержимым сообщения и перед виджетами нижнего колонтитула.

Вывод

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

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