Как вставить код на сайт WordPress: с плагином и без

Александр Писклов
Александр Писклов
Разрабатываю сайты на WordPress с 2011 года.
754
9 минут на чтение

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

Добавление кода с помощью плагина

Этот способ добавления кода самый простой и рекомендуется использовать новичкам. В статье мы рассмотрим один из самых популярных (2+ млн. установок) плагинов для добавления кода – WP Code (он же бывший Insert Headers and Footers).

Установите плагин на сайт. После установки появится новый раздел в админке. Называется он «Сниппеты кода».

Вставить PHP-код плагином

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

На сайт нужно будет добавить следующий код:

add_filter('body_class','add_body_classes');

function add_body_classes($classes) {
  $classes[] = 'custom_class';
  return $classes;
}
  1. Откройте раздел «Сниппеты кода». В заголовке страницы нажмите кнопку Добавить новый. Далее выберите «Добавьте ваш пользовательский код».
  1. Откроется всплывающее окно. Выберите PHP-сниппет.
  1. Открылся редактор кода. Вставьте в него код.
  1. Далее, в блоке Вставка необходимо установить условия, при которых код будет выполняться на сайте. В нашем примере код должен выполняться автоматически и только во фронтенде.
  1. Теперь возвращаемся наверх. Устанавливаем название, активируем сниппет и сохраняем.
  • Готово. PHP-код добавлен на сайт WordPress.

Чтобы проверить, работает ли код, перейдите на главную страницу сайта. Откройте DevTools в браузере, найдите в коде тег body. Код работает, новый класс добавлен!

Добавление JavaScript кода плагином

Код js чаще всего добавляется внутри тега head или после открывающего body. Такие скрипты доступны на всех страницах сайта. Это пригодится, если вы подключаете сервисы аналитики, такие как метрика, гугл аналитикс или roistat.

Чтобы добавить javascript на все страницы сайта WordPress в плагине WPCode есть отдельный раздел – Шапка и подвал.

Тут есть три раздела, куда можно добавить js скрипт:

  • Шапка (код внутри тега head)
  • Основная часть (код сразу после открывающего body)
  • Подвал (код добавляется после всего содержимого сайта, перед закрывающим body)

Рассмотрим на примере счетчика метрики. Рекомендация Яндекса:

При установке счетчика в HTML-код сайта, разместите код как можно ближе к началу страницы. Например, в пределах тегов <head></head> или <body></body>.

Значит мы можем добавить код в раздел Шапка, или в Основную часть.

Вставляем код в редактор и сохраняем.

  • Готово! Откройте исходный код сайта и убедитесь, что код добавлен на сайт.

Как вставить JavaScript код на страницу сайта плагином WPCode?

Нужно создать новый сниппет JS и включить режим отображения Шорткод. Скрипт будет работать только на тех страницах, куда вы добавите шорткод.

Сниппет добавляется аналогично PHP коду.

В видео показываю как создать новый сниппет javascript.

Теперь добавьте шорткод на нужную страницу и проверьте, как работает скрипт.

Я добавил шорткод на страницу контакты.

Работает. При заходе на страницу контакты появляется модальное диалоговое окно alert.

Добавить CSS-код с помощью плагина

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

Не забудьте обернуть весь css в тег <style></style>

Такие стили будут работать на всех страницах сайта.

Если нужно добавить стили для конкретной страницы — создайте новый сниппет, метод вставки – Шорткод. Копируете шорткод и вставляете на нужной странице.

  • Готово!

Добавление кода плагином: преимущества/недостатки

  • Удобство использования. Лучшее решения для начинающих.
  • Без редактирования шаблона сайта. Весь код хранится в базе данных, а значит после обновления шаблона код не «затрется».
  • В версии Lite доступен не весь функционал. Нужно покупать PRO.
  • Скорее подойдет для внедрения несложного кода.

Добавление кода на сайт WordPress в тему сайта

Добавление кода вручную в тему сайта требует понимания принципов работы WordPress, а также навыков редактирования файлов шаблона.

Особенности добавления кода в шаблон сайта

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

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

Чтобы изменять файлы шаблона, потребуется FTP подключение к сайту.

Добавить код php в тему сайта

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

  1. Подключитесь к FTP сайта и откройте папку шаблона. Откройте файл functions.php в редакторе.
  1. В конце добавьте код и сохраните файл.
  • Готово! Код добавлен.

Добавить JavaScript код в шаблон сайта

Для добавления js-скрипта в WordPress есть специальные хуки wp_head, wp_body_open, wp_footer.

  • wp_head - код будет добавлен в пределах тега head.
  • wp_body_open - код добавится сразу поле открывающего body (хук доступен с версии WP 5.2.0).
  • wp_footer - отвечает за вывод кода прямо перед закрывающим body.

Чтобы добавить код, нужно к хуку привязать функцию, которая будет выводить js-скрипт. Добавим код метрики между <head></head>.

add_action('wp_head', 'add_js_script_metrika');

function add_js_script_metrika() { ?>
	<!-- Yandex.Metrika counter -->
	<script type="text/javascript">
		(function(m, e, t, r, i, k, a) {
			m[i] = m[i] || function() {
				(m[i].a = m[i].a || []).push(arguments)
			};
			m[i].l = 1 * new Date();
			for (var j = 0; j < document.scripts.length; j++) {
				if (document.scripts[j].src === r) {
					return;
				}
			}
			k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
		})
		(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

		ym(98369599, "init", {
			clickmap: true,
			trackLinks: true,
			accurateTrackBounce: true,
			webvisor: true
		});
	</script>
	<noscript>
		<div><img src="https://mc.yandex.ru/watch/98369599" style="position:absolute; left:-9999px;" alt="" /></div>
	</noscript>
	<!-- /Yandex.Metrika counter -->
<?php }

Код нужно добавить в файл functions.php. Открываете файл, в конце добавляете код и сохраняете.

  • Код добавлен!

Если нужно добавить код сразу после body, измените имя хука в функции add_action. Содержимое функции add_js_script_metrika остается прежнее.

add_action('wp_body_open', 'add_js_script_metrika');

Для вставки js в конец страницы код выглядит так:

add_action('wp_footer', 'add_js_script_metrika');

Добавляем js-скрипт на конкретную страницу/запись

Для этих целей в WordPress есть условные теги: is_page(), is_single(). Перед выводом скрипта нужно проверить, какая страница сейчас отображается.

add_action('wp_head', 'add_js_script_metrika');

function add_js_script_metrika()
{
	if (is_page([2, 3])) { 	?>
		<!-- Yandex.Metrika counter -->
		<script type="text/javascript">
			(function(m, e, t, r, i, k, a) {
				m[i] = m[i] || function() {
					(m[i].a = m[i].a || []).push(arguments)
				};
				m[i].l = 1 * new Date();
				for (var j = 0; j < document.scripts.length; j++) {
					if (document.scripts[j].src === r) {
						return;
					}
				}
				k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
			})
			(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

			ym(98369599, "init", {
				clickmap: true,
				trackLinks: true,
				accurateTrackBounce: true,
				webvisor: true
			});
		</script>
		<noscript>
			<div><img src="https://mc.yandex.ru/watch/98369599" style="position:absolute; left:-9999px;" alt="" /></div>
		</noscript>
		<!-- /Yandex.Metrika counter -->
<?php
	}
}

В 5 строке добавили проверку is_page( [2,3] ). В параметре функции указываете массив ID страниц (page) на которых будет добавлен код.

Если надо вывести js-код для конкретной записи (post) замените в коде функцию is_page на is_single. В параметре функции также укажите массив ID записей.

Добавить CSS в тему сайта

Добавление css полностью аналогично добавлению js. Привяжите функцию вывода css-кода к нужному хуку и добавьте этот код в functions.php.

add_action('wp_head', 'add_css_custom');

function add_css_custom() { ?>
	<style>
		.wp-block-site-title {
			font-size: 24px;
			color: #D73301;
		}
	</style>
<?php
}

Для вывода css на конкретной странице добавьте проверку is_page или is_single.

add_action('wp_head', 'add_css_custom');

function add_css_custom()
{
	if (is_page([2])) { ?>
		<style>
			.wp-block-site-title {
				font-size: 24px;
				color: #D73301;
			}
		</style>
<?php
	}
}

Добавление кода в тему сайта: преимущества и недостатки

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

Похожие материалы