Как создать библиотеку фрагментов сообщений для использования в сообщениях и на страницах

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

Вместо того, чтобы вставлять фрагменты кода вручную каждый раз, когда они необходимы, имеет смысл как систематизировать, так и сохранять их с помощью плагинов. В этой статье мы поговорим о преимуществах систематизации фрагментов кода, а затем покажем, как это сделать с помощью подключаемого модуля Code Snippets Extended в два этапа. Давай приступим к работе!

Почему вам следует организовать свои фрагменты кода

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

Многие пользователи WordPress добавляют собственные фрагменты кода в свои сообщения и страницы. Независимо от вашей ниши и размера, существует множество ситуаций, когда вам нужно добавить небольшой код на свой сайт. Возьмем, к примеру, Google AdSense или Facebook Pixel, которые требуют, чтобы вы добавили несколько строк JavaScript на свой веб-сайт, прежде чем они смогут работать. Многие плагины WordPress также требуют использования шорткодов, поэтому шансы добавить собственный код на ваш сайт высоки.

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

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

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

Представляем расширенный плагин Code Snippets

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

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

Хотя плагин в целом хорошо работает с Divi Builder, есть одна проблема, требующая решения. По умолчанию инструмент добавляет новую кнопку в редактор, которая позволяет вам добавлять любые фрагменты из вашей библиотеки в сообщение или страницу. Однако при переключении на Divi Builder кнопка исчезает. Исправление простое, и мы рассмотрим его подробнее через минуту.

Ключевая особенность:

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

Цена: БЕСПЛАТНО | Больше информации

Как создать библиотеку фрагментов сообщений для использования в сообщениях и на страницах (за 2 шага)

Прежде чем мы начнем, вам необходимо установить и активировать плагин. Как только вы будете готовы, переходите к шагу номер один!

Шаг №1: добавьте новые фрагменты в свою библиотеку

После установки плагина вы увидите новую вкладку под названием Snippets на панели инструментов WordPress. Щелкните его и найдите параметр « Добавить фрагменты» . На следующем экране вы сможете установить имя для идентификации вашего кода в библиотеке, а также загрузить любые медиафайлы, которые необходимы для выполнения кода:

Имейте в виду - код все равно будет работать, даже если вы не загрузите необходимые медиафайлы с этой страницы, пока они находятся в вашей библиотеке. Эта функция есть только для того, чтобы вы могли предварительно просмотреть эффекты вашего кода, используя кнопку « Тест» внизу страницы.

Далее вы также увидите редактор, в котором вы будете вводить свой код CSS, JavaScript, PHP и jQuery. Однако его нужно будет заключить в специальные теги для каждого языка. Вот несколько быстрых примеров для справки:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

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

После того, как вы закончите вводить или вставлять свой код, используйте кнопку « Сохранить фрагмент» внизу страницы, и он появится на вкладке « Фрагменты»> «Фрагменты » на панели инструментов WordPress:

Теперь все, что осталось, - это протестировать новый фрагмент кода с помощью редактора WordPress и Divi Builder.

Шаг № 2: вставьте свои фрагменты в свои сообщения и страницы Divi

Если вы не используете Divi Builder, вы можете просто открыть любые свои сообщения или страницы с помощью обычного редактора WordPress. Вверху вы увидите новую кнопку « Вставить фрагмент» :

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

Теперь плагин добавит код в редактор, и все готово - все очень просто. Однако, если вы используете Divi Builder, вы не сможете получить доступ к этой опции. Самый простой способ обойти эту проблему - открыть вкладку « Фрагменты » на панели инструментов в новом окне и скопировать соответствующий шорткод для кода, который вы хотите добавить. Получив его, вернитесь в Divi Builder и добавьте модуль кода на страницу, над которой вы работаете:

Как только вы войдете, вставьте свой шорткод в поле Content и сохраните изменения:

Теперь ваш фрагмент будет работать в обычном режиме. Использование Divi Builder добавляет один шаг к процессу, но вы по-прежнему можете хранить все фрагменты кода во внутренней библиотеке, к которой легко получить доступ.

Заключение

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

Плагин Code Snippets Extended позволяет вам это сделать. Просто установите его и выполните следующие два шага:

1. Добавьте новые фрагменты в свою библиотеку.
2. Вставьте свои фрагменты в свои сообщения и страницы Divi.

У вас есть вопросы о том, как добавить фрагменты кода на свой сайт Divi? Спросите в разделе комментариев ниже!

Миниатюра статьи Андрея Безвершенко / shutterstock.com.