Зміст циклу статей «Початок роботи з WordPress»:
Отже, ваш сайт запущений і, швидше за все, у вас виникає все більше бажання внести зміни в сам сайт, а не тільки в його вміст, чи не так?
Можливо, ви хочете змінити деякі елементи зовнішнього вигляду вашої теми або змінити поведінку деяких її функцій.
Рухаючись крок за кроком за даним керівництву, ми все більше просуваємося на шляху до вмінню створювати нові теми і настроювати існуючі. Однак, перед тим, як копирсатися в коді, давайте зробимо ще деякі дії, щоб поліпшити наш сайт.
Ось наш план дій:
Фінальна налаштування нашого сайту:
Підготовка до редагування теми:
Вам знадобиться:
Фінальна налаштування нашого сайту
Перш, ніж ми почнемо настроювати тему, відкиньмо блок коментарів на статичних сторінках.
Відключення коментарів на статичних сторінках
За замовчуванням WordPress дозволяє коментування вашого сайту і додає форму коментарів, як до сторінок, так і до записів. Дуже часто люди в аудиторії питали мене про те, як їх відключити. Це можна зробити двома способами.
Перший спосіб: перейдіть в меню редагування сторінки і натисніть кнопку «Опції показу» (Screen Options) у верхній правій частині вікна.
Поставте галочку в опції «Обговорення (Discussion). Це зробить панель опцій Обговорення (Discussion) видимою в нижній частині вікна.
Прокрутіть вниз і зніміть галочку навпроти опції «Дозволити коментарі» (Allow Comments) і оновіть сторінку. Готово!
Другий спосіб: може заощадити час, так як дозволяє відключити коментарі відразу на декількох сторінках.
Перейдіть в меню «Всі сторінки» на бічній панелі і виберіть ті сторінки, на яких ви хочете відключити коментарі.
Тепер у випадаючому списку «Масові дії» (Bulk Actions) і виберіть «Редагувати» (Edit) та натисніть кнопку «Застосувати» (Apply).
Ця дія викличе панель «Масове редагування» (Bulk Edit). У лівій частині вікна список сторінок, які ви редагуєте. Якщо ви не хочете редагувати якусь з них, то просто натисніть на «x» навпроти неї у цьому списку.
У правій частині вікна будуть представлені елементи, доступні для масового редагування. Як і слід було очікувати, один з них це коментарі, тому відключіть їх вибором пункту «Заборонити» (Do Not Allow) і потім натисніть кнопку «Оновити» (Update). І знову, справу зроблено!
Налаштування меню
Перейдіть в розділ «Зовнішній вигляд>Меню» (Appearance>Menus) на бічній панелі.
Це область, в якій ви можете налаштувати навігацію сайту. Ви побачите декілька основних блоків: колонка в лівій частині екрана, де ви можете вибрати пункти меню і колонка у правій, що дозволяє настроїти структуру меню.
(у прикладі вище, я вибрав вкладку «Показати все» (View All), щоб бачити всі сторінки);
Дійсно, меню з’явиться в місці, визначеному темою. Наша поточна тема «Twenty Thirteen», надає місце розташування меню, яке називається «Меню навігації (Navigation Menu). Опції, надані тут можуть відрізнятися в залежності від теми. Поставте галочку навпроти опції «Меню навігації» і натисніть «Зберегти меню» (Save Menu);
Чудово! Ми зробили всі необхідні базові налаштування. Засукати рукава і приготуйтеся до більш тонкого налаштування WordPress.
Підготовка до налаштування дочірньої теми.
Для початку, нам знадобиться текстовий редактор. Є багато безкоштовних програм для редагування тексту, включаючи стандартні Notepad на Windows або Text Edit на Mac (якщо ви використовуєте Text Edit, то переконайтеся, що ви перевели редактор у режим простого тексту), але вони не призначені для розробників.
Специфічні текстові редактори для розробників мають особливі можливості, наприклад, нумерація рядків і підсвічування синтаксису, яка спрощує сприйняття коду.
Для цього уроку я рекомендую вибрати саме другий тип текстових редакторів, щоб полегшити собі роботу. Ось кілька рекомендацій з приводу вибору:
- Mac – Text Wrangler;
- Windows Notepad++ або programmer’s Notepad;
- Linux – Kate.
У прикладах цієї статті я використовую Text Wrangler. Робоча середовище в різних програмах відрізняється, але принцип скрізь один і той же.
Ось короткий огляд того, що ми бачимо, коли дивимося на CSS-файл, відкритий в Text Wrangler:
- Список відкритих документів – ви можете легко орієнтуватися серед всіх відкритих файлів;
- Нумерація рядків для полегшення навігації по файлу (особливо корисна, коли ви шукайте ошибу, що сталася в рядку з певним номером;
- Підсвічування синтаксису, що надає колірне кодування тексту, яка відповідає різним синтаксичних елементів.
Огляд файлів теми
За замовчуванням після установки WordPress використовується тема Twenty Thirteen. Тема це набір PHP-шаблонів, CSS, Javascript і файлів зображень, які працюють разом, щоб надати вашому сайту певний вид. Давай поглянемо, де знайти ці файли, тому що зміна зовнішнього вигляду вашого сайту неможлива без їх редагування.
Запустіть ваш FTP-клієнт (пам’ятаєте Filezilla? Ми налаштовували його в третій частині цього циклу статей), підключіться до вашого сайту і відкрийте папку wp-content на віддаленому сервері.
Переміщаючись вниз по дереву папок ви побачите приблизно таку структуру:
a. plugins
b. themes
i. twentytwelve
ii. twentythirteen
Очевидно, що директорія, яка нас цікавить, називається twentythirteen. Відкрийте її і побачите щось подібне (на даному рисунку я відсортував файли за типом, тому у вашому випадку порядок може бути іншою):
У цьому місці постарайтеся не панікувати, побачивши таке величезна кількість файлів. Коли ми дійдемо до редагування теми, то зробимо зміни, створивши дочірню тему, в якій не буде частині цих файлів, і все буде виглядати набагато простіше.
Що це таке, і чому ми використовуємо дочірню тему?
Одна з особливостей, яку ви помітите, постійно працюючи з WordPress, і взагалі, займаючись веб-розробки, це те, що середовище постійно змінюється. Код постійно оновлюється, також як і плагіни з темами, і це відмінна особливість WordPress.
Але це також означає, що в якийсь момент, використовувана вами тема також може бути змінена після чергового оновлення.
Якщо ви використовуєте стандартну тему, вносячи в неї свої зміни, то при оновленні вона може бути перезаписана оновленням оригінальної теми. Але що робити, якщо після оновлення пов’язано з усуненням вразливостей в безпеці і встановити його необхідно, а зі зрозумілих причин ви цього робити не хочете?
Отже, ми хочемо, щоб система дозволила нам відновити тему без перезапису внесених нами в неї змін.
Ось тут на сцену виходять дочірні теми.
Дочірні теми дозволяють вам створити нову тему, яка використовує іншу тему в якості батьківської. Всі стилі і функціональність для дочірньої теми копіюються з батьківського теми і зберігаються в папці, окремої від батьківського.
У цьому випадку, батьківська тема буде оновлено, але ваші настройки і установки залишаться на місці і не будуть перезаписані. Крім того використання дочірніх тим це відмінний спосіб почати розробку для WordPress з певної точки, а не роблячи все з самого початку.
Тепер зрозуміло, що і чому, але як мені це зробити?
Для початку, ось посилання, що веде на сторінку, яка розповідає про дочірніх темах: http://codex.wordpress.org/Child_Themes.
Тепер ми почнемо змінювати деякі файли з допомогою текстового редактора.
Отже, відкрийте ваш редактор і скопіюйте в нього наступний шматок коду:
/*
Theme Name: дочірня тема Twenty Thirteen
Theme URI: http://example.com/
Description: дочірня тема на основі теми Twenty Thirteen
Author: тут ваше ім’я
Author URI: http://example.com/about/
Template: twentythirteen
Версія: 0.1.0
*/
До того, як ви збережете файл, можна відредагувати деякі поля, такі як ім’я та опис теми, посилання на неї та ім’я автора. Тільки не змінюйте поле Template, тому що воно повідомляє WordPress, на який батьківського темі заснована дана тема. В нашому випадку, це twentythirteen.
Друга річ, яку нам потрібно зробити, це вставити рядок, яка повідомить WordPress, де шукати файл стилів (CSS-файл, який визначає всі стилі, що використовуються, і додає темі певний вид).
Отже, скопіюйте дану рядок у ваш файл:
@import url(«../twentythirteen/style.css»);
Збережіть файл під ім’ям style.css (не можна називати цей файл якось інакше, тому що WordPress шукає саме цей файл на ваш робочий стіл (або будь-яке інше місце, де ви зможете його знайти).
Переміщення файлу з локального комп’ютера на віддалений сервер
Остання річ, яку нам треба зробити, це скопіювати цей файл на сервер, але спочатку нам необхідно створити папку в папці wp-content для нашої нової дочірньої теми. Поверніться до вашого FTP-клієнта і у вікні перегляду вмісту віддаленого сервера, розгорнувши дерево файлів і папок, ви побачите директорію тим.
Натисніть на ній правою кнопкою миші і виберіть пункт «Створити папку» (Create Directory) з випадаючого меню.
Введіть назву папки (краще зробити його однаковим з назвою теми, щоб уникнути плутанини) і натисніть ОК.
Тепер, подвійним клацанням на папці нової теми, увійдіть в неї, а на локальному комп’ютері, в лівій частині, виберіть папку з вашим файлом style.css.
Коли ви це зробите, перетягніть style.css з локального комп’ютера в директорію віддаленого сервера.
Тепер поверніться в браузер і перейдіть наш сайт, а потім перейдіть в меню «вигляд>Теми» (Appearance>Themes).
Зауважте, що в списку з’явилася нова тема під тим ім’ям, яке ви їй дали!
Отже, активуйте її..
Ви помітите, що ваша тема змінилася, і інформація про неї відображає інформацію, яку ви ввели у файлі стилів.
Для перевірки змін, перейдіть на головну сторінку вашого сайту і погляньте..
Незважаючи на те, що ми змінили тему, сайт виглядає все також. Але пам’ятайте, що, по суті, ми дивимося на все ту ж тему, Twenty Thirteen.
Але даю слово, в наступній статті ми обов’язково змінимо деякі деталі в зовнішньому вигляді нашого сайту, зробивши його більш унікальним!
Висновок
Тепер, після того, як на вашому сайті налаштовані все меню і сторінки, ви можете подумати, як дійсно зробити тему більш оригінальною. Найбільш доцільно буде почати з існуючої теми і налаштувати її, використовуючи механізм дочірніх тим. Це не тільки скоротить час розробки, але і допоможе вивчити, як взаємодіють батьківська і дочірня теми, а також захистить нашу налаштовану тему від перезапису при оновленні.
Переклад статті «Beginning With WordPress: Preparing to Customise Your Theme Using a Child Theme» був підготовлений дружною командою проекту Сайтостроение від А до Я.
