Как добавить код верхнего и нижнего колонтитула в WordPress

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

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

В этой статье мы научим вас, как добавить код верхнего и нижнего колонтитула в WordPress как вручную, так и с помощью плагина. Оба подхода очень просты, так что давайте приступим!

Почему вам может понадобиться добавить код верхнего и нижнего колонтитула в WordPress

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

Некоторые из самых популярных примеров включают Google Analytics, Search Console, Facebook Pixel и многие другие инструменты, которые включают отслеживание веб-сайтов.

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

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

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

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

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

Как добавить код верхнего и нижнего колонтитула в WordPress (2 метода)

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

Давайте начнем с разговора о подходе плагинов.

1. Используйте плагин, такой как Head, Footer и Post Injection

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

Несмотря на то, что есть много хороших плагинов на выбор, мы рекомендуем для работы плагин Head, Footer and Post Injections.

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

Чтобы добавить плагин, перейдите в « Плагины» > «Добавить новый» на панели инструментов и используйте функцию поиска, чтобы найти плагин. Нажмите «Установить», затем активируйте плагин.

Как только плагин активен, вы можете сразу перейти к « Настройки»> «Верхний и нижний колонтитулы» . Вы увидите несколько полей, в которые можно добавить фрагменты кода.

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

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

Как только вы закончите добавлять код на свой веб-сайт, сохраните изменения в плагине, и все готово!

2. Добавьте фрагменты кода через файл functions.php

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

Вы можете добавить код непосредственно в файлы header.php или footer.php вашей активной темы. Вы можете найти эти файлы в каталоге /public_html/wp-content/themes/ , открыв папку вашей активной темы и заглянув внутрь:

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

1. Создайте дочернюю тему для своей темы. Таким образом, вы не потеряете никаких настроек при обновлении родительской темы.
2. Используйте хуки, чтобы добавить код через файл functions.php . Это предлагает более чистый подход к редактированию файлов верхнего и нижнего колонтитула вручную.

В идеале вы всегда должны использовать дочернюю тему, если планируете выполнять какие-либо настройки темы. Вы можете получить доступ к файлу functions.php вашей дочерней темы в его папке в каталоге /wp-content/themes .

Откройте файл functions.php в редакторе кода. Чтобы добавить нужный код, вам нужно использовать либо wp_head   или wp_footer   крюк.

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

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Вы можете использовать хук wp_footer вместо wp_head , если хотите разместить код в нижнем колонтитуле. Вы также можете изменить имя функции (test_script) , если хотите.

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

Вывод

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

Есть два способа добавить фрагменты кода в верхний и нижний колонтитулы. Вы можете использовать плагин, такой как «Head, Footer and Post Injections», или добавить фрагменты кода через файл functions.php .

У вас есть вопросы о том, как добавить код верхнего и нижнего колонтитула в WordPress? Давайте поговорим о них в разделе комментариев ниже!