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

Опубликовано: 2020-06-20

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

Итак, есть два способа, которыми вы можете найти шорткоды WordPress, которые вам пригодятся:

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

Процесс подготовки WordPress для пользовательских шорткодов

Хотя это ни в коем случае не является необходимостью, обычно рекомендуется хранить ваши пользовательские шорткоды в отдельном файле. В противном случае вы можете добавить их в файл functions.php вашей темы. Начните с создания нового файла с именем «custom-shortcodes.php» и сохраните его в той же папке, что и файл functions.php вашей темы. Затем во вновь созданный файл вы должны добавить следующий блок кода:
<?php
?>
После этого вы хотите открыть файл functions.php и добавить следующую строку кода:
include('custom-shortcodes.php');
Поздравляем! Теперь вы готовы приступить к созданию пользовательских шорткодов в WordPress.

Создание базовых шорткодов в WordPress

Мы объясним процесс создания базового шорткода WordPress на примере вставки простого изображения аватара. Первый шаг — создание функции шорткода. Внутри файла custom-shortcodes.php вы добавите следующее:

функция simpleavatar_function() {
вернуть '<img src="https://simpleavatar.com/wp-content/uploads/avatar-simple.png"
alt=”doti-avatar” width=”96″ height=”96″ class=”left-align” />':
}

В приведенном выше примере кода функция simpleavatar_function возвращает предопределенное изображение с именем avatar-simple.png. Следующим шагом будет регистрация шорткода в WordPress с помощью встроенной функции add_shortcode. Все еще внутри custom-shortcodes.php убедитесь, что вы добавили следующую строку кода:

add_shortcode('простой аватар', 'простой аватар_функция');

После того, как вы зарегистрировали шорткод с помощью функции add_shortcode, вы передадите тег шорткода ($tag) и соответствующую функцию ($func)/hook, которая будет выполняться при каждом использовании этого ярлыка. В данном конкретном случае тег ярлыка — simpleavatar, а хук — dotiavatar_function.
Убедитесь, что вы используете только строчные буквы при именовании тегов , не используя дефисы. Однако подчеркивания допустимы.
Итак, теперь, когда вы создали шорткод и зарегистрировали его, было бы здорово попробовать его. Всякий раз, когда вы хотите, чтобы простой аватар отображался внутри контента публикации, просто используйте вместо этого шорткод: [simpleavatar]

Процесс кодирования на мониторе компьютера
После создания и регистрации шорткода всегда хочется его опробовать.

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

В предыдущем примере у вас не было много места, чтобы что-то изменить. И давайте предположим, что вместо отправки одного изображения вы хотели бы иметь возможность установить, какое изображение использовать, используя параметр. Отличный способ сделать это — добавить некоторые атрибуты ($atts). Итак, как и раньше, внутри custom-shortcodes.php добавляем еще одну функцию:

function simplerating_function( $att=array() ) {

// устанавливаем параметры по умолчанию

извлечь (shortcode_atts (массив (

'рейтинг'=> '5'

), $atts));

вернуть «<img src=\»http://simpleavatar.com/wp-content/uploads/$raing-star.png\»

alt=\"простой рейтинг\" width=\"130\" height=\"190\" class=\"left-align\" />";

}

То, что вы написали выше, принимает единственный параметр: рейтинг. Если значение рейтинга не передано, будет использоваться строковое значение по умолчанию, равное 5. Это делается путем развертывания массива атрибутов с помощью встроенной функции shortcode_atts, а затем объединения значений по умолчанию со значениями, которые могли быть переданы в функцию. . Убедитесь, что вы не забыли зарегистрировать код :
add_shortcode('упрощение', 'упрощение_функции');

После создания функции шорткода и добавления хука шорткод готов найти свое место в содержимом вашего сообщения:

[упрощенный рейтинг=3]

В этом суть создания самозакрывающихся шорткодов WordPress. Тем не менее, есть еще один вид, который вы можете создать.

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

Дополнительный тип коротких кодов, которые вы можете создать: вложенные короткие коды

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

Это позволяет вам использовать формат в стиле BBCode. Такой стиль будет выглядеть так:

[короткий код]контент[/короткий код]

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

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

Создание вложенных шорткодов

Вы должны еще раз добавить в файл custom-shortcodes.php следующее:

function simplefollow_function($atts, $content = null) {

return '<a href="https://twitter.com/simpleavatar/" target="blank" class="doti-follow">' . $контент . '</а>';

}

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

add_shortcode('simplefollow', 'simplefollow_function');

Вуаля! Шорткод готов к использованию.

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

К чему это приводит

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