У цьому керівництві ми поговоримо про header.php. обов'язковому файлі для кожної WordPress теми. Я покажу вам хороший приклад цього файлу і дам поради з приводу, що в ньому має бути, а чого бути не повинно.
Крок 1. Введення
У цьому файлі у нас не тільки логотип і меню, є ще також тег head і багато інших тегів, наприклад: link. script. meta і title.
Пам'ятайте, що ваша "шапка" - це контент, який відображається на всіх сторінках вашого сайту. Наприклад, логотип і меню показуються на всіх сторінках, так що вони будуть додані в header.php.
Якщо елемент відображається тільки на конкретній сторінці, вам потрібно ще раз подумати, чи потрібно додавати цей елемент в файл вашої шапки.
Давайте ж приступимо до роботи, я сподіваюся, вам сподобається!
Крок 2. Готовий Код
Тут ви можете отримати повний код для використання у вашій темі. Прочитайте інші кроки для того, щоб зрозуміти, що конкретно робить кожен рядок.
У шапці "повинні" бути деякі речі. Цей шаблон, який я зробив, робить наступне: (в наступних кроках я поговорю про кожен конкретний)
Далі ми будемо говорити про код, який ми використовували. Ви дізнаєтеся про те, навіщо потрібно його використовувати.
Крок 3. Файл functions.php
Давайте поговоримо про фото functions.php. ми додали наступні рядки в файл:
Перший рядок створює константу THEME_DIR. яка зберігає директорію шаблону. Ми створюємо цю константу для того, щоб оптимізувати тему. Якщо ви подивіться в наш файл header.php. ви побачите, що нам потрібно використовувати директорію кілька разів, ми використовуємо її також в файлі functions.php. щоб вивести шлях до теми. Якщо ми постійно викликаємо get_template_directory_uri (). ми просто створюємо запити. Створюючи константу і використовуючи її, ми економимо ресурси процесора, оскільки ми викликаємо функцію тільки один раз.
Цей рядок видаляє тег Meta Generator. оскільки цей тег показує всім встановлену версію WordPress. Ця інформація може дозволити зловмиснику дізнатися баги вашої версії і використовувати їх.
Додавання вашого CSS
Тут ми створили функцію для додавання тегів link в header.php. Офіційне керівництво WordPress вказує, що кращий спосіб додавання стилів (.css) і скриптів (.js) - це використання функцій wp_enqueue_script і wp_enqueue_style. Більше про це можна дізнатися в тут.
Спочатку ми створюємо функцію під назвою enqueue_styles і потім ми викликаємо функцію add_action. Цей рядок говорить WordPress, що він повинен викликати нашу функцію, коли відбувається подія 'wp_enqueue_scripts', що відбувається при нашому виклику wp_head () в header.php!
Усередині нашої функції у нас такі рядки:
Спочатку ми зареєструємо нашу таблицю стилів і додамо її в чергу WordPress.
Ми використовуємо функцію wp_register_style. щоб зареєструвати стиль. Ця функція вимагає наступне:
- Параметр # 1. Ім'я, яке ви можете вибрати, щось на зразок mystyle. mediaqueries ...
- Параметр # 2. Шлях до файлу, зверніть увагу, що ми тут використовуємо константу THEME_DIR.
- Параметр # 3. Тут ви пишете ваші залежності, назви файлів стилів, які потрібно завантажити перед цим файлом.
- Параметр # 4. Версія.
- Параметр # 5. Медіа-атрибут для тега link.
Потім ми викликаємо функцію wp_enqueue_style і передаємо як параметр ім'я нашого стилю, який буде додано.
Щоб додати в файл більше стилів, просто скопіюйте ці два рядки і змініть ім'я, директорію і інші параметри.
Додавання скриптів
Тепер ми розглянемо функцію, яка додає наші скрипти.
Тут процес той же, різниця в тому, що ми використовуємо інші функції для додавання скриптів.
Щоб додати скрипти, ми використовуємо функції wp_register_script і wp_enqueue_script. Функція wp_register_script вимагає наступних параметрів:
- Параметр # 1. Ім'я, яке ви можете вибрати, щось на зразок jquery. dojo. і т.п.
- Параметр # 2. Шлях до файлу, зверніть увагу, що ми тут використовуємо константу THEME_DIR.
- Параметр # 3. Тут ви пишете ваші залежності, назви файлів скриптів, які потрібно завантажити перед цим файлом.
- Параметр # 4. Версія.
- Параметр # 5. Тут ви говорите, буде цей скрипт доданий у виклику функції wp_head () (зазвичай в header.php) або wp_footer () (зазвичай в footer.php). Якщо ви передасте false. він буде завантажений в wp_head (). Якщо ви передасте true. буде завантажений в wp_footer ().
Потім ми викликаємо функцію wp_enqueue_script і передаємо як параметр ім'я нашого скрипта, який ми хочемо додати.
Щоб додати більше скриптів в ваш файл, просто скопіюйте ці два рядки і змініть імена, директорію і інші параметри.
Крок 4. header.php
Спочатку я перерахую тут посилання на бібліотеки, які ми можемо використовувати в цьому шаблоні, я вже використовую jQuery і HTML5 Shim в цьому шаблоні, але ви можете додати інші.
- jQuery - бібліотека для додавання симпатичних ефектів в вашу тему, я думаю, ви невірне знаєте цю бібліотеку, вона вже включена в WordPress за замовчуванням.
- Modernizr - ця бібліотека дозволяє вам знати точно можливості, які підтримує браузер користувача.
- HTML5 Shim - ця бібліотека дозволяє браузерам, у яких немає своєї вбудованої підтримки розмітки HTML5, підтримувати її.
- Respond.js - дозволяє браузерам, у яких немає вбудованої підтримки CSS3 медіа-запитів, почати їх підтримувати.
Ви можете завантажити ці бібліотеки і змінити шляху в вашому файлі header.php.
У цьому шаблоні ми використовуємо стандартний доктайпів HTML5:
тег
У цій частині, ми використовували деякі умови для IE. які додають клас відповідно до версії IE. або Не додає нічого, якщо браузер не IE 8 або нижче (Firefox, IE9, Chrome та інші).
Це дійсно зручно тому, що ви можете створити правило всередині CSS файлу, щоб воно подіяло на об'єкт, якщо браузер IE 7:
Але ви також можете створити окремий файл CSS і прив'язати його всередині області умов, ми будемо говорити про це на наступних кроках. Вибір за вами.
Теги
Мета-теги дуже важливі, тому що вони передають деяку інформацію браузеру, щоб бути впевненими в тому, що ваша тема буде правильно сприйнята.
Цей рядок підтверджує, що браузер не буде використовувати Quirks Mode. це дуже корисно, тому що цей режим може поламати розмітку.
Цей рядок повідомляє браузеру кодування, щоб уникнути невідомих символів.
Просто основні мета теги, які можуть поліпшити SEO вашої теми. Ви можете додати ключові слова, які описують сайт і написати назву вашого бізнесу.
Цей тег видаляє / скидає будь-яке збільшення мобільним пристроєм, за типом iPad і iPhone, дуже зручно, якщо ви працюєте з гнучкою розміткою.
Теги
Цей рядок додає фавіконки для вашої сторінки, додає трохи професійного вигляду вашому сайту.