Как добавить шорткоды в WordPress

Опубликовано: 2021-07-10

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

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

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

Шорткод запускает часть кода, указанную именем шорткода, которое всегда заключено в квадратные скобки, например: [shortcode-name]

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

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

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

[ shortcode val1='hi' val2='ok' ]

А также может использоваться в качестве тега HTML при открытии и закрытии коротких кодов, подобных этому [ shortcode ] some text [ /shortcode ] .

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

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

Если вам нужна дополнительная информация, ознакомьтесь с этим полным руководством по шорткодам.

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

Как добавить шорткоды в WordPress

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

Как мы упоминали ранее, существуют разные типы шорткодов, и шорткоды WooCommerce являются одними из наиболее распространенных. Например, шорткод [ woocommerce_cart ] будет отображать корзину WooCommerce, куда бы вы ее ни вставили.

Чтобы протестировать его, просто вставьте шорткод в сообщение или на страницу или введите его следующим образом: [ woocommerce_cart ] . Затем взгляните на интерфейс, и вы увидите корзину WC прямо там, где вы вставили шорткод.

ПРИМЕЧАНИЕ . Поскольку мы будем редактировать некоторые основные файлы, прежде чем мы начнем, мы рекомендуем вам сделать полную резервную копию вашего сайта и создать дочернюю тему. Вы можете создать его программно или с помощью любого из этих плагинов.

Добавьте шорткоды WordPress со значениями

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

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

Например, если мы хотим отобразить изображения с идентификаторами 720, 729, 731 и 732, мы добавляем шорткод к сообщению или странице следующим образом: [ gallery ids=”729,732,731,720” ]

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

Добавить шорткоды в WordPress — идентификатор изображения в медиатеке

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

Гутенберг

Блок шорткода Гутемберга

Классический редактор

Вставьте шорткод в классический редактор

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

Шорткод галереи WordPress

Использование шорткодов в файлах шаблонов

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

Вы можете использовать шорткоды в файле шаблона с помощью PHP-функции do_shortcode() . Это функция WordPress по умолчанию, которую вы можете использовать в любом файле.

Чтобы запустить шорткод из файла, просто добавьте следующее:

echo do_shortcode(' [ gallery ids=”21,42,32,11” ] ');

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

На панели инструментов WordPress добавьте шорткод в заголовок, выбрав « Внешний вид» > «Редактор тем» и открыв файл header.php . Перейдите в конец файла и вставьте код, как показано ниже:

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

После включения вышеуказанного скрипта в файл вы увидите галерею в шапке.

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

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

Чтобы использовать шорткод с хуками, вам нужна do_shortcode() , как мы видели в предыдущем разделе.

Следующий скрипт будет работать с файлом functions.php дочерней темы. Мы используем wp_footer() , поэтому он будет напечатан в нижнем колонтитуле сайта.

/* Shortcode with wp_footer hook*/ add_action('wp_footer','QuadLayers_footer_shortcode'); function QuadLayers_footer_shortcode(){ echo do_shortcode(' /* Shortcode with wp_footer hook*/ add_action('wp_footer','QuadLayers_footer_shortcode'); function QuadLayers_footer_shortcode(){ echo do_shortcode(' [ products ids="623" ] '); } '); }

Этот шорткод поставляется с WooCommerce по умолчанию и используется для отображения продуктов. В данном случае мы используем его для отображения одного продукта с ID = 623.

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

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

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

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

WordPress предоставляет нам add_shortcode() для создания и добавления собственных шорткодов. Давайте посмотрим, как использовать эту функцию для создания собственного шорткода с некоторыми примерами скриптов.

Отображать разные сообщения для вошедших и вышедших из системы пользователей

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

 /* Вход по шорткоду*/
add_shortcode('Вход в систему','QuadLayers_shortcode_loggedin');
функция QuadLayers_shortcode_loggedin($atts){
    если(is_user_logged_in()==true){
        $response='вы вошли в систему';
    }
    еще{
        $response='вы вышли из системы';
    }
вернуть $ответ;
}

Используя if, мы проверяем, вошел ли пользователь в систему, и отображаем сообщение «Вы вошли в систему», если это правда, и «Вы вышли из системы» в противном случае.

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

Показать один пост по ID

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

 add_shortcode('get-post','QuadLayers_shortcode_post');
функция QuadLayers_shortcode_post($atts) {
    $a = shortcode_atts(array('id' => '',), $atts); 
    $args = array('post_type' => 'post','p' => $a['id']); 
    $query = новый WP_Query($args); 
    $запрос->the_post();
    $string = '<h3>'.get_the_title().'</h3>' ; 
    $string.=the_post_thumbnail();
    $строка .= get_the_content();
    вернуть $строку;
}

В этом примере мы добавили шорткод [ get-post ] , и он выглядит так:

Показать один пост по ID

Запускайте разные шорткоды по логическому условию

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

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

 add_shortcode('show-form','QuadLayers_custom_shortcode');
функция QuadLayers_custom_shortcode(){
    если(is_user_logged_in()==true){
        $response='<h3>Свяжитесь с нами</h3>';
        $ответ.='[wpforms]';
    }
    еще{
        $response='<h3>Подпишитесь на нашу рассылку</h3>';
        $ответ.='[wpforms]';
    }
    эхо do_shortcode ($ ответ);
}

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

Запускайте разные шорткоды по логическому условию

Примечания

Всегда возвращайте данные при создании шорткода. Если вы повторите это, вы можете столкнуться с некоторыми проблемами, связанными с позицией, в которой вы должны отображать контент.
do_shortcode(); функция отлично работает в большинстве файлов шаблонов, но поскольку ее необходимо повторить, это также может вызвать некоторые проблемы.
Многие плагины предоставляют шорткоды, которые вы можете использовать бесплатно. Однако некоторые шорткоды могут не работать в сообщениях, на страницах или при попытке использовать их в виджетах верхнего и нижнего колонтитула или боковой панели. Это зависит от того, насколько сложен шорткод и как он был построен.
Если вы видите некоторые ошибки при использовании пользовательского шорткода в редакторе Gutenberg, это означает, что ваш шорткод несовместим с Gutenberg. В любом случае он будет работать во внешнем интерфейсе, и вы можете попробовать переключиться на редактор по умолчанию, чтобы избавиться от этой ошибки.

Вывод

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

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

Чтобы узнать больше о шорткодах и о том, как настроить свой сайт, ознакомьтесь со следующими сообщениями:

Шорткоды WooCommerce: полное руководство
Как настроить страницу магазина WooCommerce
Настройте страницу продукта в WooCommerce

Вы добавили шорткоды на свой сайт WordPress? Были ли у вас какие-либо проблемы после этого руководства? Дайте нам знать в комментариях ниже!