Хотите узнать, как создать шорткод в WordPress?
Изучение того, как создать шорткод в WordPress, может стать эффективным способом настройки ваших сообщений и страниц. Однако, если вы новичок в этом процессе, вам может быть сложно понять, как использовать такую функцию на вашем веб-сайте.
Именно поэтому мы составили руководство, которое поможет вам начать работу. Посмотрев, как работают шорткоды и как их эффективно применять, вы сможете начать настраивать свой контент по своему вкусу без необходимости в дополнительных плагинах.
В этой статье мы обсудим, что такое шорткоды WordPress и почему вы можете их использовать. Затем мы покажем вам, как создать свой собственный.
Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге
Тогда вернемся к тому, почему мы здесь.
Что такое шорткоды WordPress?
Шорткоды WordPress действуют как ярлыки, которые позволяют быстро вставлять элементы в запись или страницу. Обычно это одна строка кода, заключенная в квадратные скобки. Например :
[exemplecodehortcode]Этот код будет отображать заранее определенную функцию в интерфейсе вашего веб-сайта.
WordPress впервые представил короткие коды с выпуском API шорткода. Это позволило пользователям легко добавлять привлекательные элементы в свои сообщения и страницы, такие как Google Maps или кнопку Facebook «Нравится».
Он существует в WordPress По умолчаниюt шесть шорткодов :
- подпись: Оборачивать подписи вокруг содержимого.
- галерея : отображает галереи изображений
- Аудио: встраивает и воспроизводит аудиофайлы
- видео : встраивает и воспроизводит видеофайлы
- плейлист : отображает коллекцию аудио- или видеофайлов.
- вставлять : оборачивает встроенные элементы
Вы также встретите два основных типа форматирования шорткода: self-closing et enclosing.
Шорткоды self-closing могут стоять сами по себе и не нуждаются в закрывающем теге.
В это время, enclosing окружить контент, который вы хотите отредактировать, и заставить вас закрыть тег вручную. Например, вы можете встроить видео с YouTube, заключив URL-адрес между тегами. embed et /embed :
Например, это создаст следующий результат:
Некоторые из лучшие плагины для WordPress приходят со своими шорткодами. Например, WP Forms et Contact Form 7 иметь шорткоды, которые позволяют быстро встроить Контактная форма в посте или на странице. Вы также можете использовать плагин, например Максбуттонс чтобы добавить шорткод кнопки в любое место на вашем сайте.
Почему вы должны рассмотреть возможность использования шорткодов WordPress?
Есть много причин, по которым вы можете использовать шорткоды WordPress. Например, это проще и быстрее, чем изучать и писать длинный фрагмент кода в HTML. Кроме того, они помогают поддерживать чистоту и доступность вашего контента.
Шорткоды можно использовать для автоматизации определенных функций, которые вы используете неоднократно. Например, если вы используете кнопку призыв к действию (СТА) для каждой из ваших статей наличие специального шорткода может быть быстрым и удобным решением.
Следует отметить, что Редактор Гутенберга работает так же, полагаясь на использование шорткодов. Это позволяет пользователям WordPress добавлять несколько интерактивных функций с помощью блоков.
Такой метод гораздо более удобен для новичков, потому что вы можете добавлять контент прямо в пользовательский интерфейс. Тем не менее, редактор блоков WordPress по-прежнему ограничен в своих возможностях. К счастью, он поставляется с блоком Короткий код, который позволяет добавлять пользовательский контент на ваши страницы.
Как создать шорткод в WordPress
Если у вас уже есть знания в области кодирования, вы можете создавать свои собственные короткие коды. Это дает вам полный контроль над внешним видом и функциональностью вашего сайта.
Давайте посмотрим, как создать собственный шорткод WordPress. В этом уроке мы добавим ссылки на социальные сети в статью в качестве примера.
Шаг 1 – Создайте новый файл темы
Прежде чем начать, рекомендуется сделать полную резервную копию вашего сайта WordPress. Вам также нужно будет создать отдельный файл для вашего пользовательского шорткода за пределами файла. functions.php ваш WordPress тема. Это обеспечит запасное решение на случай, если что-то пойдет не так.
Вы можете использовать клиент FTP (протокол передачи файлов) такой как FileZilla для доступа к файлам темы вашего сайта. Зайдя на свой сайт, перейдите на wp-content> themes и найдите папку с текущей темой. В нашем примере это будет пресс для сов:
Откройте свою папку WordPress тема, щелкните его правой кнопкой мыши и нажмите Создать новый файл.
Назовите ваш новый файл обычай-шорткоды.php затем нажмите OK. Затем вы можете отредактировать его, щелкнув правой кнопкой мыши и выбрав опцию Просмотр/редактирование :
Это откроет файл в текстовом редакторе по умолчанию. Затем вам просто нужно добавить следующий блок кода:
<?php ?>
Это гарантирует, что ваш новый файл будет интерпретирован как PHP, язык сценариев, на котором построен WordPress.
Затем вы можете сохранить изменения и закрыть файл. Обязательно установите следующий флажок, чтобы убедиться, что он будет обновлен на сервере и применен к вашему веб-сайту:
Затем откройте файл functions.php в той же папке темы и добавьте следующую строку кода внизу документа:
include('shortcodes-personnalises.php');
Это скажет системе включить любые изменения, которые вы вносите в файл. обычай-шорткоды.php в functions.php позволяя вам разделить их. Когда будете готовы, сохраните изменения и закройте файл.
Шаг 2 — Создайте функцию шорткода
Далее вам нужно создать функцию шорткода, указав, что делать. Выберите вариант еще раз Просмотр/редактирование вашего файла обычай-шорткоды.php. Используйте следующий фрагмент кода, чтобы добавить действие для подключения вашей функции:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Далее вам нужно будет добавить функцию обратного вызова, которая будет запускаться при активации действия ловушки. Добавление следующей строки кода сразу после упомянутой выше сообщит WordPress, что ваша функция является шорткодом:
add_shortcode('sabonner', 'subscribe_link');Когда вы создаете шорткод с помощью функции add_shortcode, вы назначаете тег шорткода « ($tag) " и соответствующий функциональный хук " ($func) который будет запускаться каждый раз, когда используется ярлык.
Другими словами, если тег шорткода [подписаться], то хук 'подписать_ссылка' перенаправляет посетителя на указанный URL.
Поэтому весь код, который вы используете в своем файле shortcodes-personnalises.php будет выглядеть так:
Следует отметить, что при именовании тегов следует использовать только строчные буквы, хотя можно использовать символы подчеркивания. Это также имеет решающее значение избегайте использования дефисов, так как это может мешать другим шорткодам.
Шаг 3. Добавьте шорткод для автоматического закрытия на веб-сайт.
Теперь вы можете протестировать исходный код в качестве самозакрывающегося шорткода на своем сайте WordPress. Используя редактор блоков WordPress, вы можете вставить тег [subscribe] прямо в сообщение:
Это будет отображать следующий контент для посетителей вашего сайта:
Если вас устраивает этот шорткод, вам больше ничего не нужно делать. Однако, если вы хотите настроить его, вы можете перейти к следующему шагу.
Шаг 4 — Добавьте параметры в шорткод
Вы можете адаптировать шорткод "подписываться" для дополнительной функциональности для отображения ссылок на другие социальные сети. Вы можете сделать это, добавив параметр для изменения URL-адреса.
Чтобы добавить атрибуты управления, вам нужно открыть файл обычай-шорткоды.php и добавьте следующий код:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Это позволит вам настроить ссылки в теге шорткода, чтобы добавить их в редактор Гутенберга. Вы можете вставить его поверх предыдущего кода в файле обычай-шорткоды.php. Это должно выглядеть примерно так:
Добавление функция шорткод_аттс () пользовательские атрибуты будут объединены со всеми известными атрибутами, а любые отсутствующие данные будут заменены их значениями по умолчанию. Когда будете готовы, сохраните изменения и закройте файл.
Шаг 5 - Проверьте настройки
Теперь вы можете протестировать обновленный шорткод в редакторе блоков WordPress. В нашем примере мы тестируем наши ссылки в Twitter и Facebook со следующими шорткодами:
[ссылка для подписки='https://www.facebook.com/live.blogpascher']Facebook[/подписаться]
[ссылка для подписки='https://twitter.com/BlogPasCher']Твиттер[/подписаться]
Это даст следующий результат на внешнем интерфейсе:
Этот самозакрывающийся шорткод отображает прямые URL-адреса ваших социальных профилей для посетителей. Тем не менее, вы можете захотеть, чтобы эта функция выглядела немного полированной.
Например, вы сможете создать прикрепленную версию, которая позволит вам полностью настроить якорный текст, отображаемый для пользователей, когда они собираются щелкнуть по нему. Мы покажем вам, как это сделать на следующем шаге.
Шаг 6 – Создайте прилагаемый шорткод
Окружающий шорткод будет отформатирован так же, как и в предыдущем примере автоматического закрытия. Однако он будет включать дополнительный параметр для функции.
Во-первых, вам нужно будет добавить $content = null, который идентифицирует эту функцию как закрывающий шорткод. Затем вы можете добавить do_shortcode из WordPress, который будет искать контент для шорткодов.
В файле обычай-шорткоды.php, добавьте новый закрывающий шорткод:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Когда вы будете готовы, ваш файл обычай-шорткоды.php должно выглядеть так:
Предыдущий код имеет атрибут " стиль " дополнительный, который изменит якорный текст на синий цвет. Не забудьте сохранить изменения, когда закончите.
Шаг 7 — Добавьте прилагаемый шорткод на веб-сайт
Теперь вы можете вставить свой шорткод в редактор блоков WordPress, чтобы увидеть окончательный результат:
Как вы заметили, вы можете легко изменить URL-адреса своих страниц в социальных сетях и якорный текст, отображаемый посетителю, с помощью этого шорткода-оболочки. В данном случае мы выбрали "Фейсбук" et "Twitter" :
Там ! Теперь вы создали собственный шорткод для ссылок на подписку на своих страницах и в сообщениях. Обратите внимание, что все шаги, упомянутые выше, могут быть изменены для создания всевозможных различных элементов с использованием функции WordPress. Короткие.
Добавлять дополнительные функции на ваш сайт WordPress намного проще с помощью шорткодов. Вы можете использовать их для персонализации существующего контента и добавления интерактивных функций, таких как контактные формы, галереи изображений или ссылки для подписки.
Другие рекомендуемые ресурсы
Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.
- Как создать плавающую кнопку с индексом Z с помощью Elementor
- Когда и как установить WordPress в подкаталоге
- Как создать простой плагин Gutenberg Block для WordPress
- Как добавить пользовательские шрифты на сайт WordPress
Заключение
В этой статье мы узнали, как создать собственный шорткод в WordPress. Если у вас есть какие-либо проблемы или предложения, сообщите нам об этом в течение Комментарии.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
В то же время, поделитесь этой статьей в разных социальных сетях.
...
