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

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

Найбільш типовим варіантом використання коду у колонтитулах є інтеграція у ваш сайт Google Analytics. Однак є й багато інших причин вбудування такого коду.

У цьому посібнику ми покажемо кілька способів додати код верхнього та нижнього колонтитулів у WordPress. Але спершу визначимо причини, через які постає необхідність це зробити.

Чого можна досягти за допомогою додаткового коду в верхньому та нижньому колонтитулах сайту?

Стандартний веб-сайт розбивається на кілька різних компонентів, подібно до текстового документа:

• Заголовок. Заголовок сайту містить низку елементів «попереднього завантаження» та відомості про ваш сертифікат Secure Sockets Layer (SSL), шифрування, будь-який JavaScript тощо.
• Нижній колонтитул. Працює подібно до заголовка, але натомість розташовується внизу сторінки.
• Тіло. Більшість функціональних можливостей, які ви реалізуєте на своєму сайті, будуть усередині вмісту. Тіло відображає те, що ви бачите на сторінці.

Сервери завантажуватимуть сторінки лінійно – заголовок, тіло, потім нижній колонтитул. Це означає, що код у заголовку завантажиться першим, а код нижнього колонтитула – після всього іншого.

Повсякденні випадки використання фрагментів коду

Соціальні медіа та інструменти пошукової оптимізації (SEO) часто потребують додавання коду заголовка в WordPress. Це пояснюється тим, що ці служби мають певний пріоритет під час завантаження сайту, щоб реєструвати все, що йде після нього.

Подібна ситуація з кодом CSS, оскільки він визначає, як само виглядатиме сайт. Якби це було в нижньому колонтитулі, ви побачили б низку змін макета, перш ніж побачити стиль.

Хоча JavaScript допомагає нам створювати, переглядати та взаємодіяти з сучасними веб-сайтами, він не є необхідним компонентом (у технічному сенсі). Таким чином, JavaScript у нижньому колонтитулі забезпечить більшу продуктивність у багатьох випадках, і якщо у вас є такий варіант, ви повинні прийняти його.

Насправді існує набагато більше випадків використання, однак у типовій ситуації WordPress ви не маєте доступу до елементів верхнього та нижнього колонтитулів сайту. Для цього доведеться або забруднити руки, або покликати сторонню допомогу.

Як додати код верхнього та нижнього колонтитулів у WordPress (2 способи)

У решті статті ми розглянемо два способи додавання коду верхнього та нижнього колонтитулів у WordPress. Обидва прості, але ми віддаємо перевагу одному над іншим:

1. Щоб додати код у потрібні частини сайту, можете використовувати плагін.
2. Безпосередньо додати код до свого functions.phpфайлу, тоді знадобляться додаткові знання про те, як отримати доступ до файлів вашого сайту.

Спершу ми розглянемо варіант плагіна з причин, які ми коротко пояснимо.

1. Використовуйте плагін, щоб додати код до верхнього та нижнього колонтитулів

Якщо ви хочете реалізувати щось у WordPress, плагін маґ зробити цю роботу за вас. У більшості випадків для веб-сайтів WordPress плагін - стандартне рішення. Тому, якщо ви хочете додати код верхнього та нижнього колонтитулів у WordPress, плагін Embed Code буде ідеальним:

Це рішення, розроблене DesignBombs, надає швидкий і безболісний спосіб додавати код до в цілому, окремих сторінок або дописів і навіть користувацьких типів дописів.

Щоб використовувати його, треба встановити та активувати плагін. Коли цей процес завершиться, ви побачите нову опцію Налаштування > Вставити код на інформаційній панелі:

На цьому екрані з'являться дві текстові області: одна для заголовка та одна для нижнього колонтитула. Ви навіть отримаєте підказку щодо того, де буде розміщено введений вами код у вашому HTML:

Користуватися цим інструментом надзвичайно просто. Після введення коду збережіть зміни. Це додасть сюди будь-який код на глобальному рівні, тобто на рівні сайту. Але, якщо ви хочете додати код лише до окремої публікації чи сторінки, то зробіть це за допомогою редактора блоків – метабокс і потрібні параметри знаходяться внизу екрана:

Незважаючи на те, що плагін Embed Code є кращим методом з мінімумом зайвих рухів, є також інший спосіб, який дозволяє отримати потрібні результати.

Дивіться також:

Як додати калькулятор вартості на сайт WordPress

2. Додайте фрагменти коду до functions.php

Кожна інсталяція WordPress отримує доступ до спеціального functions.phpфайлу в каталозі верхнього рівня або спеціальному каталозі теми. Це дає змогу додавати фрагменти коду, щоб допомогти WordPress використовувати більше функціональних можливостей. Однак є деякі передумови, які потрібно зрозуміти та виконати, перш ніж почати:

• Ви отримуєте доступ до своїх основних файлів WordPress – і, за розширенням, functions.phpфайлу – за допомогою протоколу безпечної передачі файлів (SFTP). Таким чином, знадобляться знання про те, як це працює, щоб знаходити файли вашого сайту та працювати з ними.
• Ми також рекомендуємо використовувати дочірню тему, щоб зберегти зміни, якщо тема, про яку йде мова, отримає оновлення.
• Вам знадобляться принаймні практичні знання про хуки, дії та фільтри WordPress. Більше того, ви захочети зрозуміти, як WordPress отримує доступ до верхнього та нижнього колонтитулів через ці перехоплення.

Сам процес займає кілька кроків. Спочатку відкрийте сервер свого сайту в клієнті SFTP, а потім перейдіть до wp-content/themes. Тут відкрийте каталог поточної теми та знайдіть відповідний functions.phpфайл:

Відкрийте цей файл у своєму улюбленому редакторі тексту чи коду та розмістить наступний шаблон фрагмента:

add_action( 'wp_head', '<SNIPPET_NAME>' );

function <SNIPPET_NAME>() {
?>
<!-- Place your HTML code or other script here. -->
<?php
}

Коротше кажучи, це додає до WordPress хук дії, використовуючи те, що ви називаєте як <SNIPPET_NAME>. У самій функції замініть або введіть текст під рядком коментаря (тобто рядком, який починається з <!--). Якщо треба додати код до нижнього колонтитула, замініть 'wp_head'на 'wp_footer'та продовжите, як зазвичай.

Щойно ви збережете зміни, це має застосовуватися до вашого сайту. Залежно від коду, який ви додаєте, має бути щось видиме на самій передній сторінці, на інформаційній панелі WordPress або навіть на інформаційній панелі стороннього розробника.

Хоча для повного використання WordPress не потрібні типові знання кодування, у деяких випадках може знадобитися додати код верхнього та нижнього колонтитулів у WordPress. Наприклад, ви можете скористатися аналітикою, яка є популярною причиною зламати файли вашого сайту.

У цій публікації розглянуто два різні способи додавання коду до верхнього та нижнього колонтитулів:

• Плагін, такий як Embed Code, дозволить додавати код верхнього та нижнього колонтитулів до WordPress за допомогою інформаційної панелі. Таким чином, потрібно просто скопіювати та вставити, не турбуючись про доступ до свого сервера.
• Однак, якщо у вас є технічні знання, можете спробувати додати фрагмент до свого functions.phpфайлу. Вам знадобляться знання SFTP і невеликий досвід роботи з файлами WordPress, але цей підхід так само хороший, як і варіант плагіна.

Який метод ви використаєте, щоб додати код верхнього та нижнього колонтитулів у WordPress? Дайте нам знати в розділі коментарів нижче!

Джерело: wpkube.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/