При расширении возможностей вашего сайта на WordPress у вас, безусловно, возникнет необходимость добавить код. К примеру, для установки счетчика аналитики потребуется внедрение JavaScript-кода на страницы. Если вы хотите изменить внешний вид сайта, вам понадобится добавить CSS-код. Это можно сделать либо с помощью плагина, либо вручную, добавив код в файлы сайта. В данной статье мы проанализируем различные способы добавления кода на сайт WordPress и обратим внимание на важные аспекты.
Добавление кода можно осуществить различными способами. Один из самых популярных методов — использование плагинов, таких как «Insert Headers and Footers» или «Code Snippets». Эти инструменты позволяют вставлять код в шапку или подвал сайта без необходимости редактировать файлы тем. Для пользователей менее опытных в программировании это наиболее удобный вариант.
С другой стороны, для более опытных пользователей или тех, кто хочет иметь полный контроль над своей темой, можно вставлять код непосредственно в файлы темы. Это можно сделать через редактор тем в админ-панели WordPress, выбрав раздел «Внешний вид» > «Редактор тем». Здесь вы сможете вносить изменения в файлы header.php, footer.php или style.css.
Важно помнить о резервном копировании, прежде чем вносить какие-либо изменения в код темы. Это поможет сохранить ваш сайт в случае ошибок. Также стоит учитывать, что при обновлении темы все изменения, сделанные в файлах самой темы, могут быть утеряны. Для постоянных изменений рекомендуется создать дочернюю тему.
Кроме того, перед добавлением скриптов и кода на сайт следует убедиться, что он безопасен и не негативно повлияет на работу сайта или его производительность. Используйте инструменты для проверки кода и следуйте рекомендациям при добавлении сторонних скриптов.
Наконец, после добавления кода проверьте, как он отображается на сайте, и убедитесь в его правильной работе. Некоторые изменения могут требовать очистки кэша, особенно если вы используете плагины для кэширования.
Добавление кода с помощью плагина
Наиболее простым и подходящим для новичков способом добавления кода является использование плагина. В этой статье мы рассмотрим один из самых популярных плагинов для внедрения кода — WP Code (прежний Insert Headers and Footers), который имеет более 2 миллионов установок.
Сначала установите плагин на вашем сайте. После установки в админке появится новый раздел под названием «Сниппеты кода».
Вставка PHP-кода через плагин
Добавление PHP-кода может понадобиться в случае, если вы хотите изменить или добавить функционал сайта. Рассмотрим пример, когда необходимо добавить новый класс для тега body.
Вам потребуется вставить следующий код:
add_filter('body_class','add_body_classes'); function add_body_classes($classes)
- Перейдите в раздел «Сниппеты кода». В верхней части страницы нажмите на кнопку Добавить новый. Далее выберите «Добавьте ваш пользовательский код».
- Появится всплывающее окно. Убедитесь, что выбран PHP-сниппет.
- Теперь вы открываете редактор кода. Вставьте в него ваш код.
- Затем в блоке Вставка установите условия, при которых код будет выполняться на сайте. В данном случае код должен срабатывать автоматически только на фронтенде.
- Теперь прокрутите страницу вверх. Установите название, активируйте сниппет и сохраните изменения. PHP-код успешно добавлен на ваш сайт WordPress.
Чтобы убедиться, что код работает, перейдите на главную страницу сайта. Откройте инструменты разработчика в вашем браузере, найдите тег body в коде. Код функционирует отлично, новый класс успешно добавлен!
Не забывайте, что при работе с кодом всегда следует создавать резервные копии сайта, чтобы избежать возможных ошибок и потери данных. Также перед внесением изменений полезно протестировать код в безопасной среде, чтобы убедиться, что всё работает как задумано. Если вы не уверены в своих навыках программирования, рекомендуется изучить базовые основы языка PHP или обратиться за помощью к специалисту.
Помимо PHP-кода, плагин позволяет добавлять также JavaScript и CSS-код, что предоставляет вам больше возможностей для настройки вашего сайта. Пользуйтесь этими функциями для улучшения пользовательского опыта и добавления интерактивных элементов на страницы вашего сайта.
Добавление JavaScript кода плагином
JavaScript-код чаще всего добавляется в тег head или непосредственно после открывающего тега body. Эти скрипты будут активны на всех страницах вашего сайта. Это особенно полезно, если вы подключаете аналитические сервисы, такие как Метрика, Google Analytics или Roistat.
Чтобы внести JavaScript на все страницы вашего сайта WordPress, в плагине WPCode существует отдельный раздел – Шапка и подвал.
В этом разделе есть три места, куда можно вставить JS-скрипт:
- Шапка (код внутри тега head)
- Основная часть (код сразу после открывающего body)
- Подвал (код добавляется после всего содержимого сайта, перед закрывающим тегом body)
Рассмотрим пример с установкой счетчика аналитики. Вот рекомендации от Яндекса:
При интеграции счетчика в HTML-код сайта, желательно разместить код как можно ближе к началу страницы, например, в пределах теговили.
Таким образом, мы можем добавить код в раздел Шапка или в Основную часть.
Вставьте код в редактор и сохраните изменения.
- Готово! Откройте исходный код сайта и проверьте, что код успешно добавлен.
Как добавить JavaScript на страницу сайта с помощью плагина WPCode?
Необходимо создать новый сниппет для JavaScript и включить режим отображения Шорткод. Скрипт будет работать только на тех страницах, куда вы добавите этот шорткод.
В видео мы показываем, как создать новый сниппет для JavaScript.
Сработало! При переходе на страницу контактов появляется модальное окно alert.
Добавить CSS-код с помощью плагина
Добавление CSS-кода происходит аналогично процессу добавления JavaScript. Если вы хотите внедрить глобальные стили для всего сайта, например, изменить стиль заголовка, откройте раздел Шапка и Подвал и добавьте код в раздел Шапка.
Важно, не забудьте обернуть весь CSS в тег
Такой стиль будет применяться на всех страницах сайта.
Если же необходимо добавить стили для конкретной страницы — создайте новый сниппет и выберите метод вставки «Шорткод». Скопируйте шорткод и вставьте его на нужную страницу.
- Готово!
Преимущества и недостатки добавления кода с помощью плагина
- Удобство использования. Это наилучший вариант для новичков.
- Без необходимости редактирования шаблона. Весь код хранится в базе данных, что позволяет избежать потерь при обновлении шаблона.
- В бесплатной версии доступен не весь функционал. Для полного доступа нужно приобретать PRO-версию.
- Скорее подойдёт для внедрения простого кода.
Добавление кода на сайт WordPress в тему сайта
Ручное добавление кода в тему сайта требует понимания механизмов работы WordPress и навыков редактирования шаблонов.
Особенности ручного добавления кода в шаблон сайта
При ручном добавлении кода вы изменяете файлы действующей темы. Если шаблон часто обновляется, ваши изменения могут быть утеряны после обновлений безвозвратно. Чтобы избежать этого, рекомендуется создать дочернюю тему.
Дочерние темы служат для расширения функциональности родительских. Обновления касаются только родительской темы, а код дочерней остается неизменным. Подробнее о дочерних темах можно узнать на официальном сайте WordPress.
Для изменения файлов шаблона вам потребуется подключение по FTP к вашему сайту.
Добавить код php в тему сайта
Весь код, отвечающий за функциональность шаблона, необходимо расположить в файле functions.php. Давайте добавим тот же код, который вносили через плагин.
- Подключитесь к FTP-серверу и перейдите в папку вашей темы. Откройте файл functions.php в редакторе.
- В конце файла добавьте новый код и сохраните изменения.
- Всё готово! Код успешно добавлен.
Добавить JavaScript код в шаблон сайта
Для добавления JavaScript-скриптов в WordPress существуют специальные хуки: wp_head, wp_body_open, wp_footer.
- wp_head — код добавляется внутри тега head.
- wp_body_open — код добавляется сразу после открывающего тега body (доступен с версии WP 5.2.0).
- wp_footer — отвечает за добавление кода перед закрывающим тегом body.
Чтобы вставить код, необходимо связать функцию с хуком, которая будет отвечать за вывод JavaScript-скрипта. Например, добавим код аналитики в тег.
add_action('wp_head', 'add_js_script_metrika'); function add_js_script_metrika() < ?>
Код нужно вставить в файл functions.php. Откройте файл, вставьте код в конец и сохраните.
Если вам нужно добавить код сразу после тега body, измените имя хука в функции add_action. Содержимое функции add_js_script_metrika останется без изменений.
add_action('wp_body_open', 'add_js_script_metrika');Для вставки JavaScript-кода в конец страницы используйте следующий синтаксис:
add_action('wp_footer', 'add_js_script_metrika');Добавление JavaScript на конкретную страницу/пост
Для этих целей в WordPress предусмотрены условные теги: is_page(), is_single(). Перед выводом скрипта необходимо проверить, какая именно страница открыта.
add_action('wp_head', 'add_js_script_metrika'); function add_js_script_metrika() < if (is_page([2, 3])) < ?> >В строке 5 добавлена проверка is_page([2,3]). В параметре функции задается массив идентификаторов (ID) страниц, на которых будет активен данный код.
Если требуется вывести JavaScript-код для конкретного поста, замените is_page на is_single и укажите массив идентификаторов постов в параметре функции.
Добавить CSS в тему сайта
Добавление CSS полностью повторяет процесс внедрения JavaScript. Привяжите функцию вывода CSS к нужному хуку и добавьте этот код в файл functions.php.
add_action('wp_head', 'add_css_custom'); function add_css_custom() < ?> .wp-block-site-title
Чтобы вывести CSS на конкретной странице, добавьте условие с is_page или is_single.
add_action('wp_head', 'add_css_custom'); function add_css_custom() < if (is_page([2])) < ?> .wp-block-site-title >Преимущества и недостатки добавления кода в тему сайта
- Доступ ко всему функционалу WordPress. Вы не ограничены и можете создавать любые условия для добавления кода.
- Удобная поддержка. Весь код будет собран в одном файле, что позволяет легко видеть, какая функция за что отвечает.
- Требует понимания особенностей WordPress и навыков программирования.