Как добавлять фрагменты кода в WordPress

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

Что такое фрагмент кода WordPress

В WordPress фрагмент кода — это просто кусочек кода на PHP, JS, CSS или HTML. Они используются для изменения стандартных функций ВордПресс вместо добавления совершенно нового файла или установки плагина.

Примеры фрагментов кода WP:

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

Как вручную добавить фрагменты кода в WordPress

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

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

Создайте резервную копию сайта

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

Создание дочерней темы

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

Чтобы сохранить файлы темы в идеальном состоянии, а также любой кастомный код, следует использовать дочернюю тему. Представьте себе ее как клон основной «родительской» темы.

Добавление файлов

Для создания дочерней темы понадобится редактор кода, а также доступ по FTP к сайту ВордПресс. Сначала разработайте новую папку шаблона в каталоге wp-content/themes. Загрузите в неё файл style.css, который будет таблицей стилей дочерней темы (для редактирования дизайна), а также functions.php, который должен содержать код для добавления в очередь таблицы стилей из родительской темы.

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

Редактирование файлов

Теперь можете открыть файл functions.php дочерней темы в редакторе кода (или в разделе WordPress «Внешний вид» > «Редактор файлов темы») и добавить в него свои сниппеты. Большинство фрагментов вставляются в functions.php (хотя есть и несколько исключений).

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

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

Как добавлять фрагменты кода в WordPress с помощью WPCode

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

Установите бесплатный плагин WPCode

Для начала нужно установить плагин. Это очень просто, так как бесплатная версия WPCode доступна прямо из дашборда WordPress. Просто перейдите в раздел «Плагины» > «Добавить новый» и введите в поиске «WPCode».

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

Добавление фрагмента кода

В новом разделе «Фрагменты кода» в дашборде ВордПресс нажмите на пункт меню «+ Добавить фрагмент».

Кроме того, чтобы добавить кастомный фрагмент кода, нажмите на ссылку «Пустой фрагмент» на экране «+ Добавить фрагмент». Откроется редактор, в котором возможно ввести свой код. Поскольку вы начинаете с пустого сниппета, никакие настройки не будут установлены или выбраны.

Чтобы использовать существующий фрагмент из библиотеки кода, воспользуйтесь полем поиска. В бесплатной версии плагина доступно 59 вариантов, а в Pro — 100+.

Предположим, вы хотите заменить надпись «Howdy, Username», отображаемую в правом верхнем углу дашборда, на что-то более профессиональное.

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

Редактирование настроек фрагмента

Откроется редактор фрагментов с кодом и настройками по умолчанию, уже добавленными для этого сниппета. В данном случае у фрагмента уже есть заголовок и описание, тип кода заранее установлен как PHP, а сам предварительный просмотр кода создан для замены «Howdy» на «Welcome». Если хотите, чтобы вместо «Howdy» отображалось что-то другое, просто отредактируйте код в строке 4.

Под предварительным просмотром кода вы найдёте правила вставки для фрагмента. Поскольку я выбрал готовый к использованию сниппет, параметры уже выбраны. В качестве метода для этого фрагмента установлено «Автоматическая вставка», но есть опция «Шорткод», если хотите вставлять его на определённые страницы или в записи. Что касается места вставки, то здесь установлен вариант «Только для админ-панели», так как фрагмент предназначен для изменения слова «Howdy» в админ-панели сайта WP.

Другие варианты размещения в бесплатной версии включают:

• Глобально: везде, только на фронтенде, только в админ-панели, условная логика на фронтенде, заголовок по всему сайту, основной контент по всему проекту, футер по всему сайту.
• Для конкретной страницы: перед/после записи, перед/после контента, перед/после абзаца, перед/после выдержки, между записями.

А в версии Pro добавлено ещё больше мест размещения, доступных только для фрагментов PHP: «Везде» (CSS-селектор), WooCommerce, Easy Digital Downloads и MemberPress.

Далее идет тип устройства. Для большинства фрагментов, включая тот, что приведён в моем примере, лучшим выбором будет опция «Любой тип устройства».

WPCode также предлагает возможность добавления интеллектуальной условной логики. Это позволяет задавать более конкретные условия для загрузки фрагмента кода. Например, возможно, вы хотите, чтобы приветствие «Howdy» отображало разные сообщения в зависимости от роли пользователя. Можете добавить условную логику, чтобы версия «Welcome» отображалась только для администраторов, а затем добавить другие варианты для остальных соответствующих ролей пользователей на сайте.

В конце увидите раздел для ревизий кода, который доступен только в версии Pro, а за ним — основную информацию о фрагменте кода. Сюда входят теги, которые хотите использовать для упорядочивания сниппетов, приоритет (он определяет порядок загрузки фрагментов) и примечание для себя о назначении кода.

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

Активация фрагмента кода

Теперь вы готовы запустить фрагмент кода в работу. Перейдите в главный пункт меню «Фрагменты кода» — именно там вы сможете увидеть все свои сниппеты в удобном виде списка.

Чтобы активировать фрагмент, нажмите переключатель в крайнем столбце, чтобы он находился в положении «включено». Теперь обновите или просмотрите страницу, на которой должен сработать сниппет.

Поскольку в моем примере фрагмент редактирует сообщение администратора, я обновил страницу и увидел, что в правом верхнем углу верно отображается надпись «Добро пожаловать».

Другие возможности плагина

Теперь, когда вы знаете, как добавить фрагмент кода в WordPress с помощью плагина WPCode, давайте кратко рассмотрим несколько других его функций, которые могут пригодиться.

С помощью функции «Глобальный хедер и футер» вы можете быстро добавить скрипт на сайт.

Если хотите подключить Google Analytics для сайта WP, нужно будет добавить код отслеживания в файл header.php. Вместо того чтобы вручную редактировать его, можете просто вставить код отслеживания здесь.

Подобно библиотеке фрагментов кода, WPCode Generator предоставляет готовые к работе сниппеты, которые вы можете редактировать в соответствии с потребностями сайта. Разница заключается в том, что фрагменты из Generator требуют чуть большего доработки, поскольку они более сложные (например, регистрация новых таблиц стилей, добавление типов записей и таксономий или даже настройка заданий для выполнения определенных задач).

На странице «Инструменты» доступны настройки для импорта сниппетов из другого источника (или другого плагина с фрагментами), а также для экспорта фрагментов текущего сайта.

А в разделе «Настройки» вы найдёте общие параметры для подключения к библиотеке WPCode (чтобы получить доступ ко всем 59 бесплатным фрагментам), включения журналов ошибок и добавления вашего лицензионного ключа, если в будущем решите перейти на Pro.

Заключение

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

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