Зміст циклу статей «Початок роботи з WordPress»:
Отже, у минулому уроці ви вивчили основи CSS. Швидше за все, ви вже створили унікальну кольорову схему для свого сайту, і навіть, можливо, підібрали цікаво виглядають шрифти, які підкреслюють індивідуальність вашого творіння. Але я думаю, що ви все ще хочете внести безліч різних значних змін в існуючий сайт.
Це означає, що вам пора навчитися редагувати програмний код. У цьому уроці ми займемося саме цим – ми змінимо внутрішню структуру шаблону і попрактикуємось у правці PHP-файлів.
Але до того, як ми почнемо, якщо ви чекаєте обіцяний у минулому уроці файл стилів (моя версія стилізації шаблону Twenty Thirteen з помаранчевої гами на блакитну), то він тут. В цьому файлі, можуть бути елементи шаблону які я пропустив, тому що не ставив перед собою завдання повністю його переробити.
У зв’язку з цим, якщо ви плануєте використовувати його в якості шаблону для реального сайту, то вам належить допрацювати досить багато речей, але це буде для вас дуже корисно, і ви зможете набратися досвіду.
Так чи інакше, повернемося до нашого сьогоднішнього уроку!
До того, як ми почнемо, нам знадобиться:
- FTP-доступ до вашого сайту;
- текстовий редактор.
Що ми будемо робити:
- налаштувати стандартний футер (на жаргоні «підвал»), тобто нижню частину сторінки WordPress, додавши в нього власну посилання і контент;
- перемістити основну панель навігації вище заголовка;
- створювати опис сторінки, використовуючи настроювані поля.
В якості введення, я хочу прояснити вам дещо щодо шаблонів в темах WordPress і те, як вони працюють в контексті дочірньої теми. Як ви пам’ятаєте, на даному етапі наша тема поки ще не включає шаблони на мові PHP.
Можливо, я забігаю вперед і ви, швидше за все, в перший раз чуєте про те, що таке шаблон, так? Тоді, для повного розуміння рекомендую вам почати ось з цих матеріалів:
- Codex: Stepping into Templates;
- Codex: Templates;
- Дочірні теми.
Шаблон (Template) це файл, а точніше буде сказати програма, яка управляє тим, як WordPress буде відображати ваш сайт в Інтернеті. Ці файли містять інформацію з бази даних MySQL і генерують HTML-код, що відправляється веб-браузера. І, хоча механізм налаштування тим дуже гнучкий, WordPress дозволяє вам визначати необмежену кількість шаблонів для однієї теми.
У свою чергу, тема (Theme) – це набір файлів, що визначає зовнішній вигляд (шар подання) вашого сайту на WordPress.
Якщо ви подивіться на свою тему, то виявите, що на даний момент у її директорії відсутні якісь шаблони. Чи потрібно мені вам нагадати чому?
Думаю, ви пам’ятаєте, що наша тема є дочірньою, тому всі шаблони зберігаються в папці з батьківського темою.
Виникає питання: як можна отримати доступ до файлів і відредагувати їх без ризику порушити роботу батьківського теми.
Насправді, це дуже просто! Треба лише скопіювати шаблони з батьківської папки в папку з дочірньою темою. WordPress досить розумний, і спочатку шукає в папці шаблони дочірньої теми. Якщо він їх там не знаходить, то здійснює пошук вже батьківської папки. Тому при збігу імен файлів, пріоритет мають файли шаблонів в директорії дочірньої теми.
Це було невелике введення в термінологію. А тепер, давайте приступимо до освоєння навичок, які допоможуть нам змінювати внутрішню структуру теми.
Створення/копіювання файлів в дочірню тему
Для початку скажу, що є кілька шляхів, щоб скопіювати шаблони, які ми хочемо відредагувати, з батьківської папки в дочірню.
Метод 1
Ви можете перетягнути файли з диску віддаленого сервера на свій локальний комп’ютер, використовуючи FTP-клієнт.
Перебуваючи в FileZilla, перетягніть копії потрібних шаблонів з папки батьківського теми на сервері, на свій робочий стіл або в будь-яке місце на вашому комп’ютері, а потім, звідти, перенесіть їх назад на сервер в директорію з дочірньою темою:
Цей спосіб не видалить нічого з сервера, а просто створить копії файлів на локальному комп’ютері, звідки вони будуть скопійовані знову на сервер, але вже в іншу папку.
Метод 2
Ми також можемо поставити закладку для нашого FTP-сервера в текстовому редакторі Text Wrangler. Тоді у нас з’явиться можливість зберегти файл на сервер. Робиться це так:
- Перебуваючи у Text Wrangler, перейдіть в меню «Text Wrangler>Налаштування» (Text Wrangler >Setup);
- На вкладці закладки Закладки (Bookmarks) натисніть значок «+» у лівій нижній частині вікна, щоб створити нову закладку.
Заповніть поля даних для доступу до вашого FTP-сервера, аналогічно тому, як робили це при первинній настройці FileZilla.
Тепер, перебуваючи в FileZilla, натисніть правою кнопкою миші на файлі, який ви хочете скопіювати (в нашому випадку, footer.php), і виберіть у контекстному меню опцію редагування, після чого цей файл відкриється у Text Wrangler.
Потім, у Text Wrangler виберіть в головному меню «Файл > Зберегти копію на сервер FTP/SFTP» (File > Save a Copy to FTP/SFTP server). Якщо ви вибрали з’єднання FTP і програма висвітлила вам запит на створення виключення безпеки, то дозвольте його, щоб кожен раз отримувати повідомлення в майбутньому.
У наступному вікні ви можете вибрати папку з дочірньою темою і зберегти там файл footer.php.
Цей метод також копіює файл спочатку на локальний комп’ютер, а потім знову на сервер у вибране вами місце.
Другий спосіб трохи складніше, ніж перша, але я думаю, це також буде корисно знати. У будь-якому випадку, незалежно від обраного методу, наша задача полягає в тому, щоб скопіювати файл footer.php (і всі інші файли, які ми хочемо редагувати) в папку нашої дочірньої теми!
Редагування футера для зміни інформації про сайт
Перше питання, яке мені поставили мої учні, коли ми дійшли до цієї частини, була про те, як змінити стандартний футер в темі Twenty Thirteen.
Найчастіше, вони хочуть додати туди повідомлення про авторське право, або повністю змінити футер. Так чи інакше, вам необхідно знати, що щоб змінити футер, необхідно редагувати файл шаблону footer.php. Тому, використовуючи дану інформацію вище, відкрийте копію файлу footer.php у папці дочірньої теми за допомогою вашого текстового редактора.
Перед редагуванням давайте коротко поглянемо на те, з чим нам доведеться мати справу.
Файл починається тегом:
- деякі HTML-теги з корисними коментарями;
- закриваючий тег контейнера
; - відкриваючий тег;
- різний PHP-код, наприклад;
- інші закриваючі теги HTML.
Підсумковий код на сторінці виглядає ось так:
Ви можете помітити, що на цій сторінці HTML-код. Різні шаблони, що входять до складу теми (наприклад, sidebar.php, footer.php та ін) або безпосередньо WordPress, в кінцевому підсумку створюють єдиний HTML-код сторінки, яка передається браузеру. Кожна сторінка або запис на вашому сайті, яку ви відвідуєте, подібним чином «збирається» з шматочків.
Якщо ви знаходитесь на головній сторінці, то шаблон може називатися home.php або front-page.php, а якщо на сторінці блогу, то сторінка буде мати ім’я archive.php. Всі шаблони в вашій темі виконуються спільно (на сервері), коли клієнт (браузер) робить запит серверу на перегляд тієї чи іншої сторінки.
Отже, повернемось до нашого завдання, яке ми вирішуємо в даній статті. Поверніться назад в текстовий редактор і спробуйте зрозуміти, яку частину шаблону ви б хотіли змінити.
Якщо ви уважно придивитеся, то зможете побачити один великий PHP-тег, який включає в себе всі елементи, які ви хочете змінити.
Перше, що ми бачимо, це уривок коду, що виводить посилання на сайт WordPress.org
Але нам потрібно також додати в футер наступну інформацію: посилання на наш веб-сайт, інформацію про розробника та повідомлення про авторські права, щоб попередити людей про те, що контент на сайті належить вам.
Вийде щось на зразок цього: “Lovingly crafted by The Web Princess for The Site Client © 2013“
Далі, ми змінимо в цьому уривку назва twentythirteen на mytheme (впишіть замість цього слова свою назву). В наступному коді:
Необхідно замінити посилання wordpress.org на thewebprincess.com – це якраз і буде посилання на ваш сайт. Ось як код виглядає після зміни:
Тепер ми замінимо текст посилання з «Semantic Personal Publishing Platform» на «Web Development and WordPress Training» у наступній частині коду:
Потім змінимо текст «Proudly Powered by» на «Lovingly Crafted by»:
Потім змінимо слово «WordPress» на фразу «The Web Princess«:
Залишилося додати в кінці поточний рік. І ми зробимо це за допомогою PHP, так як він дозволяє зробити так, щоб завжди автоматично виводився поточний рік! У підсумку наш код буде виглядати ось так:
Ось він новий футер для нашого сайту!
До речі, шлях, яким ми пішли досить довгий, але він дозволив нам зберегти всі елементи, необхідні для інтернаціоналізації теми. Це, в умовах реального світу, або навіть якщо ви робите це для себе (крім випадків, коли ви готуєте свою тему для поширення по всьому світу), фактично не потрібно і тому може бути безболісно замінено на більш простий код:
Lovingly Crafted by The Web Princess for
The Site Owner © 2013
Переміщення основного меню навігації на позицію вище заголовного банера
Отже, наступним нашим кроком буде переміщення основного меню навігації з поточної позиції на місце вище заголовного банера. А потім, ми створимо нову область навігації нижче банера.
Тепер прийшов час скопіювати файл header.php з директорії батьківського теми в папку з дочірньою і відкрити його в текстовому редакторі.
Виберіть весь код, як показано на зображенні:
Позитивним моментом в темі Twenty Thirteen є те, що скрізь розташовані коментарі, дозволяють легко орієнтуватися в коді. Обов’язково привейте собі таку звичку при створенні своїх власних тим і коду взагалі. Якщо ви будете робити так, то людям, яким доведеться розбиратися у вашому творінні, буде набагато простіше це зробити.
Виріжте виділений код і вставте його так, як показано на зображенні нижче (переконайтеся, що ви зберегли відкривають і закривають теги)
Збережіть файл і оновіть сторінку вашого сайту, щоб побачити зміни:
Зауважте, що банер став набагато менше своєї колишньої висоти, а розрив між банером і заголовком сторінки більше.
Якщо ми досліджуємо цю частину в «інспектора», то побачимо, що секція заголовка має все ту ж висоту. Як так вийшло? Справа в тому, що частина зображення банера була прихована навігаційним меню, тому ми передвинем банер трохи нижче, щоб уникнути цього ефекту.
Для цього, нам треба буде змінити дещо в CSS. Так само, як ми робили це в попередніх статтях циклу, вивчити елемент і знайдіть ось це:
body .site-header {
background-position: 0px 45px;
}
Причина, по якій ми помістили селектор body поруч .site-header в тому, що в даному випадку ми хочемо підвищити специфічність селектора body CSS. Якщо ми цього не зробимо, то не побачимо очікуваного результату, тому що .site-header може бути заданий в інших місцях теми, і тоді він буде мати більш високий пріоритет (іншими словами, йти в каскаді нижче нашого заданого селектора). Додавання селектора body підвищує специфічність і дає більший пріоритет, на що наш сайт відповідним чином відреагує.
Виглядає відмінно!
Збережіть зміни, поновіть сторінку і подивіться на ваш сайт у браузері!
Додавання опису сторінки до шаблону сторінки з використанням довільних полів
Нарешті, останнє, що ми зробимо в цьому уроці, це внесемо зміни в файл шаблону page.php, що дозволить нам на сторінку додати поля з описом, і розташувати їх під заголовком сторінки. Ми будемо це робити з допомогою довільних полів (custom fields).
Ми почнемо з настроювання довільних полів.
Спочатку, вам потрібно змінити Опції відображення» (Screen Options), щоб переконатися, що у вас можна довільні поля, для чого перевірте, чи стоїть галочка навпроти опції «Довільні поля» Custom Fields:
Якщо там стоїть галочка, то нижче вікна редактора буде видно відповідна панель опцій. Натисніть кнопку «Ввести новий» Enter New), щоб створити нове довільне поле. Потім помістіть рядок «page description» в полі Ім’я (Name), а після цього введіть опис своєї сторінки в полі «Значення» (Value).
Нам потрібно вставити ще якийсь код в один шаблон. Для цього треба скопіювати файл page.php з батьківської директорії теми у папку нашої дочірньої теми, а потім відкрити скопійований page.php у нашому текстовому редакторі. Ми вставимо даний код в шаблон між заголовком першого рівня (
) і його закриваючим тегом.
Збережіть файл із змінами, завантажте його на сервер і подивіться на остаточний варіант сторінки:
Вітаю! Ви осягнули основи редагування шаблонів тим!
Висновок
Шлях освоєння редагування шаблонів може бути досить складним. Але, на щастя, якщо взяти за основу тему Twenty Thirteen, то почати набагато легше, тому що він відмінно прокоментований.
Переклад статті «Beginning With WordPress: Editing the Structure of Your Site» був підготовлений дружною командою проекту Сайтостроение від А до Я.
