Оптимізація заголовків у тегах h1, h2… – h6
Отже, перед нами стоїть завдання оптимізувати заголовки в самому шаблоні WordPress, таким чином, щоб найголовніша інформація перебувала в тегу h1 і далі зменшувалась у порядку своєї значущості.
Хочу поділитися з вами тим, що в мережі є опис того, як змінити заголовки, але все, що мені вдалося знайти на цю тему, було не зовсім коректним рішенням. Не виходило до кінця так, як треба.
Знайшовши чергову статтю, яка описує один і той же код, який змінює заголовки, але робить це не зовсім коректно, я дивилася вихідний код блогу, на якому читала цю реалізацію, і бачила, що людина написала, а у себе не виправила, і більшість так і було неправильно.
З чого я припускаю, що хтось один зробив, а решта просто переписувала один і той самий код. Я довго намагалася знайти щось нове, поки сама не здогадалася, як це зробити. Як кажуть, скринька просто відкривалася. І тепер я зі спокійною душею можу розповісти вам, як правильно поміняти заголовки у темах WordPress.
Варто зазначити, що в мережі зустрічаються наполовину оптимізовані шаблони, а може, навіть оптимізовані повністю. У будь-якому випадку, найкраще, перш ніж почати вносити зміни, переконайтеся в їх необхідності. Для цього можна скористатися розширенням для браузера Firebug (про нього я писала тут) або подивитися безпосередньо у файлах теми.
Файли теми можна переглянути та редагувати в адмінці блогу в розділіЗовнішній вигляд–Редактор. Або на сервері хостера, де знаходяться всі файли вашого блогу, або через спеціальну панель хостера, або через доступ до FTP. Тема блогу завжди знаходиться у папці: wp-content/themes/назва_теми. Іголовне, перш ніж робити будь-які зміни, зробіть копію файлів, які змінюватимете.
Оптимізуємо заголовок блогу на WordPress
Нам необхідно зробити так, щоб на головній сторінці заголовок блогу знаходився у тезі
Заголовок блогу
, І був посиланням на головну.
Спочатку дізнаємося, які стилі прописані для заголовка блогу, щоб відразу їх продублювати для звичайного текстового тега. Оскільки теми у всіх різні, намагатимуся пояснити алгоритм. Як вже згадала вище, мені завжди допомагає спеціальний плагін для FF – Firebug. Відкриваємо свій блог, клацаємо правою кнопкою миші за своїм заголовком, у меню вибираємо пункт Аналізувати елемент. Внизу браузера відкриється вікно, в якому ви побачите вихідний код потрібного елемента.
та контейнер, в якому знаходиться ваш заголовок. У моєму випадку контейнер має ID – header-title.
Ідемо у файли теми, відкриваємо для редагування файл style.css, знаходимо в ньому стилі, які прописані для потрібного контейнера, у моєму випадку для header-title. Виглядатиме це приблизно так:
Як бачите, стиль для тега
прописаний разом з батьківським контейнером, і з великою ймовірністю у вас буде приблизно також. Ми повинні скопіювати код, в якому прописаний h1, тобто. це буде другий та третій блок коду. Копіюємо та заміняємо h1 на p. Все разом вийде так:
Сподіваюся, із цим зрозуміло. Небагато забігу вперед. У мене після встановлення нового коду заголовка назва блогу спустилася нижче. Якщо ви зіткнетеся з цим же, то в скопійований код до блоку #header-title p додайте рядок margin:0; - Обнулення полів. Це буде так:
Не забуваймо зберегти виправлений файл стилів. Тепер переходимо безпосередньо до кодузаголовка. Відкриваємо файл header.php. Знаходимо код, який приблизно виглядатиме так:
Подивіться уважно, контейнер, як і на моїй картинці вище, де я дивилася вихідний код елемента через Firebug, також є теги
та наступний за цим контейнер header-subtitle.
Знову ж таки, код, який виділений червоним у мене, у вас може бути трохи іншим. Це може бути пов'язане з версткою самого шаблону, а також якщо замість слів у заголовку ви використовуєте банер.
Отже, червоний код ми повністю змінюємо цей:
і не буде посиланням на головну, в інших випадках заголовок буде в текстовому тегу
і буде посиланням на головну. Зберігаємо шаблон. дивимось і радіємо:).
Тепер перейдемо до заголовків статей.
Оптимізуємо заголовок статей на WordPress
Щоб все одразу зробити красиво, нам також необхідно почати з дублювання стилів для заголовка статті. Як і у випадку із заголовком блогу, з'ясовуємо, в якому тегу знаходиться у нас заголовок статті, і в якому контейнері він знаходиться.
Як з'ясувалося, у моєму випадку заголовок статті знаходиться у тезі
а батьківський контейнер post_title. Відкриваємо файл style.css та шукаємо стилі для post_title h2. Ще раз звертаю вашу увагу на те, що у вашому шаблоні батьківський контейнер може мати іншу назву.
Весь цей код необхідно продублювати та замінити h2 на h1.