Як додати код верхнього та нижнього колонтитулів у 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, плагін Код для вставки буде ідеальним:

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

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

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

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

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

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

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

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

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

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

Сам процес займає кілька кроків. Спершу відкрийте сервер свого сайту в клієнті SFTP, а потім перейдіть до WP-зміст / теми. Тут відкрийте каталог поточної теми та знайдіть відповідний 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/