Не секрет що багато чайники початківці блогери після установки шаблону мріють змінити його зовнішній вигляд, але далеко не всі знають як це робити.
А хтось просто боїться лізти в ці хащі, тому або залишають стандартний зовнішній вигляд шаблону, або користуються платними послугами професіоналів для того щоб змінити дизайн шаблону WordPress. Але повірте все не так страшно, як здається на перший погляд)
Отже, після того як в минулому уроці ми розібралися з php- структурою нашого шаблону, прийшов час перейти безпосередньо до оформлення.
Більшість налаштувань зовнішнього вигляду html сторінок зберігаються в таблиці стилів CSS - файлах, що відповідають за відображення елементів нашої сторінки.
Даний урок передбачає наявність базових знань про CSS. Якщо ви хочете вивчити що таке таблиці стилів і як з ними працювати то ласкаво прошу сюди . Там ви знайдете безкоштовні уроки по CSS і html, які познайомлять вас з основами.
А тепер давайте подивимося на практиці, що ми можемо зробити з нашою темою оформлення, завдяки виправленню CSS правил.
Для прикладу я вибрав стандартний шаблон Twenty Ten, він повинен бути в комплекті з встановленим Вордпресс.
Якщо не хочете витрачати час на тренування, можете відразу починати зі своєю теми оформлення. Тільки попереджаю відразу, що в різних шаблонах можуть бути значні відмінності.
З інструментів нам знадобляться:
- браузер Mozilla Firefox
- Встановити на Мозіль плагін Firebug .
- Для редагування можна використовувати звичайний текстовий редактор, але краще це робити за допомогою Notepad ++ , Там є підсвічування коду, і можливість зміни кодування, так що качаємо і його.
Як поміняти дизайн шаблону WordPress
Після того як все завантажено і встановлено, відкриваємо наш сайт в Мозіль і запускаємо плагін firebug натиснувши на значок жука.
Знизу відкриється панель плагіна, з якої і будемо працювати. За замовчуванням на вкладках зліва ми бачимо html код нашої сторінки, праворуч CSS стиль обраного елемента.
Тепер, для того що б внести зміни в якийсь елемент нашої теми, ми повинні дізнатися де він знаходиться, як називається та які стилі прописані в ньому. У цьому нам і допоможе фаербаг.
Наприклад ми маємо такого виду сторінку, і хочемо змінити колір панелі навігації.
Це не завжди можна зробити з налаштувань теми, але зате можна внести зміни вручну в таблицю стилів.
Тиснемо ось по цьому значку курсору нашого плагіна, і тепер ми можемо виділити будь-який елемент сторінки і отримати по ньому докладний опис. Так само можемо протестувати, як він буде відображатися якщо ми щось змінимо в коді.
Тепер переміщаючи курсор по сторінці ми бачимо, що виділені блоки підсвічуються рамкою. Кількома по нашій панелі навігації у якій хочемо поміняти колір, і у вкладці HTML і Стиль відбулися зміни - виділився поточний елемент.
Тепер ми бачимо, що в коді обраний нами блок це div з ідентифікатором "access" У правій частині плагіна, у вкладці стиль, у нас відображені всі властивості для цього ідентифікатора. Він належить файлу style.css і правило для цього елемента знаходиться на 375 му рядку даного файлу.
За властивості фону у нього відповідає рядок background, а конкретно за колір в скороченою записи саме цей пункт # 000000 Не лякайтеся, це всього лише шістнадцятковий код чорного кольору 🙂
Клікнувши по ньому мишею ви зможете відредагувати значення на ваш розсуд і подивитися тут же в вікні браузера, як зміниться елемент сторінки. Я наприклад введу # 3E6A97 що б вийшов брудно-синій колір цієї панельки.
Підбирати кольори і коди під них дуже просто за допомогою програми ColorMania, там навіть є піпетка, якою можна вибрати будь-який колір на вашому екрані монітора.
Можете поекспериментувати з різними значеннями і елементами. Не бійтеся - внесені зміни в вікні плагіна ніяк не вплинуть на вашу сторінку на сервері - вони дійсні лише в поточному кеші вашого браузера. При оновленні сторінки все настройки скинуться.
І як нам зробити так, що б ці зміни зберегти для сторінки на сервері, запитаєте ви?
Дуже просто. Заходимо через FTP клієнт на наш сайт, переходимо в папку з нашою темою, в даному випадку це папка wp-content / themes / twentyten / і знаходимо там файл style.css.
Це і є таблиця стилів, де зберігаються основні настройки зовнішнього вигляду нашого шаблону. Відкриваємо її за допомогою Notepad ++, знаходимо потрібну нам 375 -ю рядок з правилом для ідентифікатора access і замінюємо чорний колір на потрібний нам # 3E6A97.
Зберігаємо файл (не забуваємо про кодування UTF_8 без BOM) заливаємо на сервер змінений файл, оновлюємо сторінку браузера і насолоджуємося результатами)
Що можна змінити в шаблоні WordPress?
Та практично все 🙂 Таким чином ви можете змінювати:
- відображення тексту - виділяємо фаербагом текст і шукаємо в стилях його властивості, наприклад font-size: 14px це розмір шрифту, color це колір тесту, font-family сімейство шрифтів і т.д.
- width і height розміри елементів довжина і висота,
- border рамки.
- img картинки та іконки, зазвичай йдуть разом з посиланнями
- margin і padding відступи зовнішні і внутрішні
- позиціонування елементів
- background властивості фону
- І багато іншого, для будь-якого елемента вашої сторінки можна прописати свої стилі.
Перераховувати можна довго, за допомогою CSS стилів ви можете змінити дизайн сторінки до невпізнання за кілька хвилин. Повний перелік всіх властивостей і їх опис можна подивитися тут .
Іноді трапляється, що стилі для окремих елементів прописуються не в style.css, а в інших css-файлах, їх назву і місце розташування ви можете легко побачити в Firebug і спокійно правити ці елементи.
Так само можливо і таке, що для окремих елементів правила можуть прописуватися в самому html коді в атрибуті style. У такому випадку потрібно вже правити php файл. Як знайти потрібний нам php файл ми дізналися з попереднього уроку.
Увага! Перш ніж вносити зміни в вашу тему, настійно рекомендую зробити резервні копії всіх файлів вашої теми, що б у разі помилок ви могли відкотити зміни. Ну і звичайно ж краще спочатку вивчити CSS =)
Всього охопити тут звичайно ж не зміг, спробував лише показати принцип редагування оформлення шаблону, і підказати інструменти полегшують це завдання.
Якщо ви так і не розібралися в тонкощах верстки вашого шаблону або не хочете витрачати свій час на це заняття, то можете звернутися до мене, за скромну винагороду я можу відредагувати ваш шаблон під ваші потреби. Писати на email [email protected]
Для тих хто вже знайомий з CSS тема може здатися занадто розжованої, для новачків же занадто складною, тому якщо є якісь питання по вашим шаблонами або щось незрозуміло, не соромтеся, звертайтеся в коментарях 🙂
Ну а тепер настав час впритул зайнятися плагінами і дізнатися як відбувається їх установка.
І як нам зробити так, що б ці зміни зберегти для сторінки на сервері, запитаєте ви?