Налаштовуємо шапку в Twenty Ten, Twenty Eleven, MnogoBlog
як створити сайт на wordpress, налаштувати та оптимізувати wordpress
Зміна шапки, а саме: її розміру, буде також актуальною і для аналогічних тем, що використовують налаштування шапки через панель управління сайтом на wordpress.Завантажити вихідні статті для статті можна нижче
1. Змінюємо розмір шапки
Розглянемо з прикладу теми Twenty Ten.
Входимо в панель управління сайтом на движку Wordpress, в пункт "Зовнішній вигляд" (Appearence) і його підпункт "Шапка" (Header) і бачимо наступне:
Як бачите розмір шапки визначено у темі розмірами:940 × 198 і змінити ці параметри ми ніяк не можемо, аналогічно темі Twenty Eleven.
Щоб змінити ці параметри, нам необхідно увійти до файлу functions.php теми - для цього заходимо до пункту "Зовнішній вигляд" - "Редактор" і праворуч у списку шаблонів теми вибираємо файл functions.php.
Тепер для пошуку даних цифр 198 або 940 найлегше скористатися функцією пошуку браузера, наприклад Firefox, у верхньому меню браузера потрібно вибрати пункт "Правка" і його підпункт "Пошук", далі вбиваємо туди цифру 198 і шукаємо її в коді файлу functionsphp. .
І змінюємо цю величину на потрібну нам, наприклад, на 300 і незабутній натиснути на кнопку “Зберегти зміни” (Update File).
Як бачите поряд прописана і ширина шапки в 940 px, можете її також поміняти, якщо потрібно.
Тепер якщо ми увійдемо до пункту “Зовнішній вигляд” – “Шапка”, то побачимо, що нам уже пропонують завантажити зображення 940*300.
2. Змінюємо колір меню.
Наприклад, нам хочеться поміняти колір меню з чорного на зелений.
За меню у темі Twenty Ten (аналогічно й у теми Twenty Eleven) відповідає блок “access” у файлі теми style.css.
Щоб відкрити файл style.css - вибираємо в панелі керування пункт "Зовнішній вигляд" та його підпункт "Редактор", праворуч у списку шаблонів вибираємо файл style.css.
Далі знову за допомогою функції пошуку браузера знаходимо у коді блок access.
За колір відповідає рядок background: #000 – спочатку стоїть чорний (000), міняємо його на зелений (#005600) і отримуємо наступний код:
І тоді наш сайт буде виглядати так:
Підемо далі і змінимо колір виділення пунктів меню із сірого на якийсь світло-зелений (029802).
Для цього все в тому самому файлі style.css знаходимо:
І змінюємо в ньому колір із “333” на “029802” і отримуємо наступне:
Тут же, якщо змінити параметр color: #fff, наприклад на color: #fef78c, колір посилання при наведенні на пункти меню змінитися з білого (fff) на жовтий (fef78c).
PS: Питання: "А чи можна вставити маленьку картинку-логотип у лівому верхньому кутку заголовка, перед назвою?"
Відповідь: Вставити картинку перед заголовком можна так у будь-якій стандартній темі wordpress: 1. Заходимо в панель управління wordpress, у лівому меню вибираємо пункт "Зовнішній вигляд" та його підпункт "Редактор", після чого праворуч у списку шаблонів вибираємо файл header.php і в ньому шукаємо наступний код (який виводить назву сайту):
2. Ось перед ним вам і потрібно поставити зображення за допомогою тега img:
PS: Питання: А як розтягнути верхнє меню по ширині сайту?
До:
Після:
У темі Twenty Ten:
1. Потрібно відкрити файл стилів style.css – для цього зайдіть у панель керування (адмінка) wordpress, у лівому меню виберіть “Зовнішній вигляд” та його підпункт “Редактор”, праворуч у списку шаблонів знайдіть файл style.css.
2. Знайдіть уфайл стилів (style.css) наступний код:
При пошуку коду раджу скористатися функцією пошуку, вбудованою у ваш браузер: