Зміст циклу статей «Початок роботи з WordPress»:
Отже, тепер у нас є дочірня тема, яку ми готові внести деякі зміни, щоб змінити зовнішній вигляд нашого сайту.
Що вам знадобиться:
Перед тим, як ми почнемо
Перед зануренням в основну частину даного уроку, нам потрібно налаштувати наші інструменти. Одна з приємних особливостей сучасних FTP-клієнтів, це те, що в їх налаштуваннях ми можемо встановити програми, використовувані за замовчуванням для редагування файлів.
Так, ми можемо вибрати для редагування файл на віддаленому сервері, скачати його в тимчасову папку на локальному комп’ютері, редагувати, а потім закачати назад на сервер, причому операції скачування/закачування відбуваються автоматично.
Це дуже ефективна автоматизована система, однак, вона вимагає уважності при зміні файлів, так як якщо ми зробимо помилку, то це відіб’ється на нашому сайті, який вже працює в Інтернеті. Для початку встановимо текстовий редактор за замовчуванням.
Перейдіть до «FileZilla > Налаштування > Редагування файлів» (FileZilla > Preferences > File editing) і знайдіть програму, яку ви хочете за замовчуванням відкривати текстові файли (як я писав вище, я використовую Text Wrangler, тому на зображенні нижче ви можете бачити саме його).
Друга річ, яку нам треба зробити, перед від’їздом нашої теми, це встановити формати виводу записів – post formats (детальніше про це можна прочитати на офіційному сайті WordPress тут). Я створив кілька нових записів, використовуючи різні формати записів.
Як видно на зображенні нижче, запису різних форматів містять різну фонове оформлення: перший запис в стандартному форматі і містить посилання нижче йде галерея, потім інша стандартна запис, слідом цитата, а потім відео і так далі. Тема Twenty Thirteen змінює оформлення кожної з цих записів. Ми ж, у свою чергу, хочемо змінити деякі частини нашого сайту, щоб надати йому індивідуальність і зробити відмінним від стандартної.
Зміна стилів вашого сайту
Перша зміна, яку ми здійснимо, не вимагає втручання в код сайту – потрібно просто змінити зображення верхньої частини («шапки») сайту.
Тема Twenty Thirteen має три встановлених зображення в помаранчевих тонах. Ми додамо до них зображення у синій і зеленій колірній палітрі. Для цього перейдіть в меню «вигляд>Заголовок» (Appearance>Header) і завантажте потрібні зображення. Немає сенсу змінювати налаштування заголовка в CSS, коли тема сама надає нам можливість змінити його.
Тому підберіть декілька нових зображень для вашого заголовка в інших колірних схемах і завантажте їх.
Тепер, перейдемо до наступного кроку.
Налаштування сайту за допомогою файлів стилів
Щоб дати вам деяке загальне уявлення, я поясню, з яких трьох шарів складається сторінка веб-сайту. Його основою є «шар вмісту», який є кістяком сайту, виділяючи основні його елементи в структурні блоки. Цей шар створюється за допомогою коду на мові HTML (Hypertext Markup Language – Мова розмітки гіпертексту), яким розмічаються різні частини вашого сайту.
Ось кілька прикладів HTML-коду:
Це заголовок першого рівня
Це перший параграф тексту
- Це перший пункт неупорядкованого списку
- Це другий пункт неупорядкованого списку
Це стаття — окремий блок текстового вмісту з класом «format-gallery»
Але HTML сам по собі нічого не стилізує. HTML лише структурує вміст. Щоб внести зміни у зовнішній вигляд сайту, використовується «шар подання». Одним з переваг поділу на шари, є те, що зміст відокремлене від вистави.
Це дуже зручно, тому що коли ви хочете внести зміни у зовнішній вигляд, вам не потрібно змінювати структуру сайту (насправді зміна шару подання досягається підключенням різних файлів стилів).
Мова, на якій написаний шар подання, називається CSS (Cascading Style Sheets – Каскадні таблиці стилів). Саме на цій мові написані всі файли стилів теми Twenty Thirteen.
Будь-який рядок в CSS-файлі можна привести до наступного загального вигляду:
selector { property: value } /* селектор { властивість: значення; } */
Наприклад, якщо потрібно створити стиль заголовка першого рівня, то необхідно написати у файлі стилів наступний рядок:
h1 { property: value; }
Наступна рядок вказує конкретну властивість color, яке ми хочемо змінити у тега h1:
h1 { color: value; }
І нарешті, ми задамо значення. Для цього у нас є три можливих способи:
- використовувати назви кольорів;
- використовувати шістнадцяткові коди кольорів;
- використовувати RGB-значення кольорів.
Найчастіше використовується шістнадцятковий код (hex-код). У цьому випадку, ми переводимо потрібний нам колір у відповідний йому hex-код формату #FFFFFF.
Ось остаточний параметр завдання кольору для заголовка першого рівня:
h1 { color: #FFFFFF; }
Засвоївши це, ми можемо продовжити налаштовувати нашу тему. Ми збираємося змінити шрифт тексту в заголовку, основної частини теми. Для цього, відкрийте FileZilla і перейдіть на панель доступу до диску віддаленого сервера. Відкрийте там папку з CSS-файлів вашої дочірньої теми і, натиснувши правою кнопкою миші на файлі style.css, виберіть пункт «Вид>Редагувати» (View>Edit).
Вибраний файл стилів відкриється в текстовому редакторі, який ви вказали раніше у налаштуваннях FileZilla.
ЦЕ ВАЖЛИВО!
Перед тим, як ми рушимо далі, нам потрібно зберегти резервну копію файлу стилів на наш локальний робочий стіл. Це робиться для того, щоб у разі збереження помилкового коду на сервері, ми завжди мали можливість відновити початковий файл.
До внесення будь-яких змін, натисніть сполучення клавіш CMD + A (CTRL+A) у вікні Text Wrangler, щоб виділити весь текст. Потім, натисніть CMD + C (CTRL+C), щоб скопіювати його і створіть новий файл Text Wrangler комбінацією CMD + N (CTRL+N). Вставити скопійований текст у новий документ комбінацією клавіш CMD + V (CTRL+V), а потім збережіть його на робочий стіл з допомогою поєднання CMD + S (CTRL+S). Таким чином, ви убезпечите себе від вчинення непоправних помилок і завжди, в разі чого, зможете відновити дані з резервної копії.
При внесенні змін в файл стилів, періодично зберігайте його в якості резервної копії. Є багато способів резервування файлів, проте для новачка описаний вище метод є найбільш оптимальним.
Тепер ми почнемо вносити творчі зміни у наш сайт!
Зміна шрифтів
Для того щоб змінити шрифт на нашому сайті, потрібно отримати доступ до файлів шрифтів на сервері. Однак, потрібно враховувати, що далеко не на кожному комп’ютері будуть матися специфічні шрифти, які ми можемо захотіти використовувати на своєму сайті.
Тому відмінним рішенням даної проблеми є використання сервісу шрифтів Google Web Fonts. Для оформлення нашого сайту є чудова пара шрифтів: Rancho для заголовків і Gudea для основного тексту.
Перебуваючи на сайті сервісу Google Fonts, додайте ці шрифти (Rancho і Gudea, або будь-яку іншу пару на ваш вибір) в колекцію, натиснувши на кнопку «Використовувати» (Use) у правій нижній частині сторінки. Далі, використовуйте конструкцію @import, щоб додати вибрані шрифти в ваш файл стилів:
@import url(http://fonts.googleapis.com/css?family=Gudea:400,700,400 italic|Rancho);
Ця рядок скаже нашої теми, де шукати файл шрифту. Далі, ми вкажемо нашому файлу стилів, де який шрифт відображати, відредагувавши пару селекторів. Але як ми дізнаємося, яким елементам сторінки належить той чи інший селектор?
Використання інструментів веб-розробки.
Практично у всіх сучасних браузерах є вбудовані інструменти для веб-розробників. У Google Chrome, наприклад, такий інструмент називається Developer Tools, і отримати доступ до нього можна натиснувши правою кнопкою миші на цікавить елемент веб-сторінки і вибравши в контекстному меню пункт «Проінспектувати елемент» (Inspect Element).
У Firefox інструменти для веб-розробника називаються Firebug, а для їх використання, необхідно встановити однойменний плагін, так як він не входить в комплект поставки браузера. В Safari інструменти веб-розробки також вбудовані в браузер, але їх необхідно включити через опцію «Налаштування>Додатково>Показувати інструменти веб-розробки в контекстному меню» (Preferences > Advanced > Show develop menu in the menu bar).
Давайте тепер проинспектируем шапку нашого сайту. Натисніть правою кнопкою миші на тексті заголовка і виберіть пункт «Дослідити елемент» (Inspect Element).
Після цього, з’явиться панель інструментів у нижній частині вікна браузера.
В лівій частині панелі розташована секція HTML-елементів, а вибраний елемент буде підсвічено. На правій стороні розташована секція CSS-коду. Як ми можемо побачити, обраному в лівій секції HTML-елемента
відповідають різні параметри CSS в правій секції. Якщо ви прокрутіть список трохи нижче на кілька рядків, то виявите набір селекторів заголовків мають загальну властивість font-family.
Однією з дуже корисних особливостей інструментів розробника є те, що при зміні значень з їх допомогою, ви можете в реальному часі бачити, як зміниться ваша сторінка, без внесення реальних змін в код. Таким способом ви можете змінювати властивості селекторів, щоб підібрати правильні значення, і тільки після цього вносити реальні зміни у файли сайту.
Отже, помістіть курсор над властивістю font-family (а точніше, над словом Bitter) і, так як ми вже зберегли шрифт Rancho в наш файл стилів з допомогою селектора @import, замініть поточне значення на значення «Rancho», і ви відразу ж побачите, як змінилася ваша сторінка.
Якщо вам подобається, як виглядає наша сторінка з цим шрифтом, ми можемо скопіювати рядок з «інспектора» в наш файл стилів.
Виберіть код від початку селектора h1 до закриває фігурної дужки і скопіюйте його в буфер обміну.
Потім вставте цей код на ваш файл стилів:
Структура файлів стилів каскадна. Це означає, що селектори, які у файлі стилів по ходу проходження коду знаходяться нижче, є більш пріоритетними, і саме вони будуть використовуватися при виведенні відповідних їм HTML-елементів у браузері.
У нашому випадку, ми імпортували свої стилі в початок файлу CSS нашої дочірньої теми, тому новий код, який ми будемо писати, за замовчуванням буде розташовуватися нижче стилів батьківського теми. Як наслідок, саме наш код буде використаний при виведенні елементів сайту в браузері. Більше того, так як вставлений нами код містить рядки, які ми не змінювали, то це викличе дублювання вже наявного коду (такі рядки вже є в батьківській темі, тому нам немає потреби використовувати їх знову в дочірній). Тому, ми видалимо всі рядки вище і нижче властивості font-family, так як вони зайві.
Тепер збережіть наш CSS-файл і перейдіть на FileZilla, де ви побачите наступне діалогове вікно:
Якщо ви задоволені результатом, то збережіть резервну копію на робочий стіл і натисніть «Так», щоб перезаписати файл на віддаленому сервері. Тепер, оновіть свій веб-сайт у браузері та подивіться на те, як він змінився.
Після того, як ми змінили шрифти для заголовків, давайте змінимо їх і для основного тексту. Знову відкривши сайт, натисніть правою кнопкою миші на основному тексті і виберіть пункт контекстного меню «Дослідити елемент» (Inspect Element).
Далі, в Інспекторі, знайдіть селектор font-family на панелі CSS і змініть значення «Source Sans Pro» на «Gudea». У даному випадку, слід зазначити, що селектор, який ми міняємо, впливає не тільки на даний тег (параграф), як можна було б подумати, а на всі теги , розміщені всередині тега .
Так чи інакше, скопіюйте текст від селектора до закриває фігурної дужки, як ми робили це вище і вставте в ваш файл стилів. В даному випадку, нам не потрібно видаляти зайві рядки, так як селектор font-family тільки один. Збережіть файл і завантажити його на віддалений сервер.
У коді вище ви можете бачити, що я додав кілька рядків коментарів, які укладені в відкривають і закривають символи коментарів: /* і */, відповідно. Я рекомендую вам взяти звичку залишати коментарі до вашого коду, щоб потім було простіше розібратися в написаному.
Наступним кроком, ми пройдемося за допомогою «інспектора» по всім елементам, колір яких хочемо змінити. Ось їх список:
/* Колір заголовка сайту */
.site-header .home-link {
color: #ffffff;
}
Потім, колір меню навігації і посилань:
/* Кольори в меню навігації */
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
color: #0A6EBC; /*Колір посилання */
}
.toggled-on .nav-menu li:hover > a,
.toggled-on .nav-menu .children a {
color: #121314; /* Колір активного посилання */
}
.toggled-on .nav-menu li a:hover,
.toggled-on .nav-menu ul a:hover {
background-color: #2e51dc; /* Колір посилання, на який наведено курсор */
}
navigation a {
color: #2AB9E6; /* Колір посилання */
}
.navigation a:hover {
color: #2091B4; /* Колір посилання, на який наведено курсор */
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
background-color: #2e7fdc; /* Колір фону посилання, на який наведено курсор*/
}
Відмінно! Тепер, коли ви осягли ази, можна самостійно вибирати і змінювати бажані елементи на вашому сайті, експериментувати з ними в «інспектора», настроювати параметри, копіювати і вставляти рядки в файл стилів дочірньої теми!
Я міг би дати вам список тих змін, які я вніс в CSS-файли своєї теми Twenty Thirteen, щоб ви змогли привести свій вигляд, який зображено на картинках в цій статті, але тоді це буде не цікаво, вірно?
Висновок
Коли ми дивимося на свій сайт у «інспектора», то він виглядає дуже складним. Але як тільки ви звикнете з CSS, то відразу ж розуміти, як саме вам необхідно змінити той чи інший HTML-елемент, щоб ваша сторінка виглядала так, як ви задумали. Насправді, це цілий світ, який вам належить досліджувати! Тому, витратити певну кількість часу на те, щоб поекспериментувати з темою цього тижня, і ми подивимося, чи зможете ви налаштувати його так, як зображено на малюнку вище.
На наступному тижні, до публікації наступній статті з даного циклу, я дам вам файл стилів від моєї версії теми Twenty Thirteen, зображеної вище.
Переклад статті «Beginning With WordPress: Editing the Look of Your Site With CSS» був підготовлений дружною командою проекту Сайтостроение від А до Я.
