Как создавать шорткоды WordPress и работать с ними

Опубликовано: 2018-03-28

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

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

Подробнее:
Курсы WordPress от Udemy

Как использовать шорткоды WordPress

Шорткоды в текстовом и визуальном редакторах

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

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

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

Параметры шорткода

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

Также можно определить размер галереи и многое другое, задав дополнительные параметры. Вот пример:

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

Начальные и конечные теги

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

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

[[maps]] Нью-Йорк, США [[/ maps]]

Как видно из примера, конечный тег всегда начинается со знака косой черты «/». Имея оба тега, WordPress может легче идентифицировать части шорткодов.

Работа в текстовом редакторе

Шорткоды WordPress

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

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

Шорткоды WordPress по умолчанию

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

Например, плагин, который помогает отображать местоположение на Google Maps, может иметь шорткод [[maps]], тот, который отображает формы подписки, будет использовать [[form]] и так далее.

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

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

  • [audio] - вставлять аудиофайлы
  • [caption] - заключать подписи вокруг контента
  • [галерея] - показать галерею изображений
  • [плейлист] - показать коллекцию аудио и видео файлов
  • [видео] - вставлять видео файлы

Экранирование шорткодов (отображение текста шорткодов, не выполняя его)

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

Чтобы отобразить текст шорткода, используйте двойные скобки: [[шорткод]]

Если вы хотите отобразить шорткод с начальным и конечным тегами, используйте только первую и последнюю двойные скобки: [[карты] Нью-Йорк, США [/ карты]]

При работе в текстовом редакторе квадратные скобки можно также заменить их кодами. Таким образом, вместо «[» вы можете использовать «& # 91;», а вместо «]» использовать «& # 93;». Например: & # 91; шорткод & # 93 ; также отобразит шорткод, не выполняя его.

Как создать простой шорткод

Когда вы ежедневно пишете статьи в WordPress, бывают моменты, когда вы повторяете себя, и когда вам нужно вводить что-то снова и снова. Неважно, URL-адрес веб-сайта, длинное предложение или, может быть, кусок HTML-кода, который вы постоянно пишете с нуля, вам следует подумать о написании для него шорткода.

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

  1. Откройте файл function.php в меню Внешний вид -> Редактор.
  2. Поместите следующий код в конец файла:
 function fsg_shortURL () {
вернуть 'http://www.firstsiteguide.com';
}
add_shortcode ('fsg', 'fsg_shortURL');
  1. Перейдите в текстовый редактор и введите [fsg], чтобы получить URL вместо шорткода.

Это было не так уж сложно, правда?

Более сложный пример: добавить шорткод изображения

Поместив следующий код в functions.php, вы можете создать шорткод для размещения изображения с настраиваемыми атрибутами ширины и высоты:

  1. Перейдите в файл functions.php
  2. Вставьте следующий код:
 function img_shortcode ($ atts, $ content = null) {

	извлечь (shortcode_atts (
		множество(
			'width' => '',
			'height' => '',
		), $ atts)
	);
возвращение '';
}
add_shortcode ('img', 'img_shortcode');
  1. Открыть текстовый редактор:

Здесь вы можете использовать шорткод [img width = 'x' height = 'y'] http: //… [/ img], где «x» и «y» - числа, которые представляют ширину и высоту в пикселях.

Вы можете легко добавить другие атрибуты изображения, если они вам понадобятся; ознакомьтесь со списком всех атрибутов изображений на сайте W3 Schools.

Как использовать шорткоды в текстовом виджете

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

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

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

Например, если вы используете плагин 5sec Google Maps PRO, который позволяет вам легко создавать карты с бесчисленными контактами на нем, вы можете вставить карту с помощью шорткода прямо в текстовый виджет и показать свое местоположение на боковой панели вместо одного Почта. Но если ваша тема не поддерживает шорткоды в виджетах, вам нужно будет включить эту функцию самостоятельно, и это то, что мы собираемся показать в этой статье.

Если вам нужно использовать шорткод в ваших файлах PHP (например, если вы хотите запустить код в файле header.php и запустить шорткод везде, где присутствует заголовок), вы можете легко сделать это, обернув код вокруг него. . Но если вы пытались использовать шорткод в текстовом виджете, как в примере, который мы упомянули выше, вы были разочарованы, потому что это просто не сработало, и виджет отображал шорткод вместо своего содержимого. Если в вашей теме еще не зарегистрирована функция, вам нужно будет включить ее самостоятельно.

Итак, если вы хотите иметь возможность вставить шорткод в текстовый виджет и заставить его работать, не беспокойтесь; вы можете сделать это за считанные секунды:

  1. Откройте functions.php
  2. Скопируйте и вставьте следующие две строки:
 add_filter ('widget_text', 'shortcode_unautop');
add_filter ('widget_text', 'do_shortcode');
  1. Сохранить изменения

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

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

Точно так же вы можете запускать PHP-код из текстового виджета. Это было достаточно просто, не правда ли? Наслаждайтесь своими короткими кодами.

Шорткоды везде

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

Их использование станет обычным делом, и вы быстро привыкнете писать квадратные скобки в каждом новом сообщении, которое вы создаете. Так что уделите несколько минут и воспользуйтесь этой статьей, чтобы изучить основы.