Початок роботи з wordpress зміна зовнішнього вигляду вашого сайту за допомогою css, cms і движки для

Отже, тепер у нас є дочірня тема, до якої ми готові внести деякі зміни, щоб змінити зовнішній вигляд нашого сайту.

Що вам знадобиться:

Перед тим, як ми почнемо

Перед зануренням в основну частину даного уроку, нам потрібно налаштувати наші інструменти. Одна з приємних особливостей сучасних FTP-клієнтів, це те, що в їх налаштування ми можемо встановити програми, що використовуються за замовчуванням для редагування файлів.

Так, ми можемо вибрати для редагування файл на віддаленому сервері, завантажити його в тимчасову папку на локальному комп'ютері, відредагувати, а потім закачати назад на сервер, причому операції скачування / закачування відбуваються автоматично.

Перейдіть в «FileZilla> Установки> Редагування файлів» (FileZilla> Preferences> File editing) і знайдіть програму, якої ви хочете за замовчуванням відкривати текстові файли (як я писав вище, я використовую Text Wrangler, тому на зображенні нижче ви можете бачити саме його ).

Зміна стилів вашого сайту

Перша зміна, яке ми здійснимо, не вимагає втручання в код сайту - потрібно просто змінити зображення верхньої частини ( «шапки») сайту.

Тема Twenty Thirteen має три попередньо зображення в помаранчевих тонах. Ми додамо до них зображення в блакитний і зеленої колірній палітрі. Для цього, перейдіть в меню «Зовнішній вигляд> Тема» (Appearance> Header) і завантажте потрібні зображення. Немає сенсу міняти налаштування заголовка в CSS, коли тема сама надає нам можливість змінити його.

Тому підберіть кілька нових зображень для вашого заголовка в інших колірних схемах і завантажте їх.

Тепер, перейдемо до наступного кроку.

Налаштування сайту за допомогою файлів стилів

Щоб дати вам деяке загальне уявлення, я поясню, з яких трьох шарів складається сторінка веб-сайту. Його основою є «шар вмісту», який є скелетом сайту, виділяючи основні його елементи в структурні блоки. Даний шар створюється за допомогою коду на мові HTML (Hypertext Markup Language - Мова розмітки гіпертексту). яким розмічаються різні частини вашого сайту.

Ось кілька прикладів HTML-коду:

Це дуже зручно, тому що коли ви хочете внести зміни в зовнішній вигляд, вам не потрібно змінювати структуру сайту (насправді зміна шару уявлення досягається підключенням різних файлів стилів).

Мова, на якому написаний шар уявлення, називається CSS (Cascading Style Sheets - Каскадні таблиці стилів). Саме на цій мові написані всі файли стилів теми Twenty Thirteen.

Будь-який рядок в CSS-файлі можна привести до наступного загального вигляду:

Наприклад, якщо потрібно створити стиль для заголовка першого рівня, то необхідно написати в файлі стилів наступний рядок:

Наступний рядок вказує конкретне властивість color. яке ми хочемо змінити у тега h1:

І нарешті, ми поставимо значення. Для цього у нас є три можливі способи:

• використовувати назви кольорів;
• використовувати шістнадцяткові коди кольорів;
• використовувати RGB-значення кольорів.

Найчастіше використовується шістнадцятковий код (hex-код). У цьому випадку, ми переводимо потрібний нам колір в відповідний йому hex-код формату #FFFFFF.

Ось остаточний параметр завдання кольору для заголовка першого рівня:

Засвоївши це, ми можемо продовжити налаштовувати нашу тему. Ми збираємося змінити шрифт тексту в заголовку і основної частини теми. Для цього, відкрийте FileZilla і перейдіть на панель доступу до диску віддаленого сервера. Відкрийте там папку з CSS-файлами вашої дочірньої теми і, натиснувши, правою кнопкою миші на файлі style.css. виберіть пункт «Вид> Редагувати» (View> Edit).

ЦЕ ВАЖЛИВО!

Перед тим, як ми рушимо далі, нам потрібно зберегти резервну копію файлу стилів на наш локальний робочий стіл. Це робиться для того, щоб в разі збереження помилкового коду на сервері, ми завжди мали можливість відновити початковий файл.

До внесення будь-яких змін, натисніть клавіші 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. щоб додати вибрані шрифти в ваш файл стилів:

Цей рядок скаже нашої теми, де шукати файл шрифту. Далі, ми вкажемо нашого файлу стилів, де який шрифт відображати, відредагувавши пару селектор. Але як ми дізнаємося, до яких елементів сторінки належить той чи інший селектор?

Використання інструментів веб-розробки.

Практично у всіх сучасних браузерах є вбудовані інструменти для веб-розробників. У 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 тільки один. Збережіть файл і завантажте його на віддалений сервер.

Наступним кроком, ми пройдемося за допомогою «інспектора» по всіх елементах, колір яких хочемо змінити. Ось їх список:

Потім, колір меню навігації і посилань:

Відмінно! Тепер, коли ви спіткали ази, можна самостійно вибирати і змінювати бажані елементи на вашому сайті, експериментувати з ними в «інспектора», налаштовувати параметри, копіювати і вставляти рядки в файл стилів дочірньої теми!

Я міг би дати вам список тих змін, які я вніс в CSS-файли своєї теми Twenty Thirteen. щоб ви змогли привести свій до виду, який зображений на картинках в цій статті, але тоді це буде не цікаво, чи не так?

висновок

Коли ми дивимося на свій сайт в «інспектора», то він виглядає дуже складним. Але як тільки ви досить звикнете з CSS, то відразу ж розуміти, як саме вам необхідно змінити той чи інший HTML-елемент, щоб ваша сторінка виглядала так, як ви задумали. Насправді, це цілий світ, який вам належить досліджувати! Тому, витратьте певну кількість часу на те, щоб поекспериментувати з темою на цьому тижні, і ми подивимося, чи зможете ви налаштувати його так, як зображено на малюнку вище.

Переклад статті "Beginning With WordPress: Editing the Look of Your Site With CSS" був підготовлений дружною командою проекту Сайтобудування від А до Я.