1. Підключення тим оформлення
2. Доступ до файлів WordPress через редактор теми
3. Структура теми оформлення WordPress
4. Збірка файлів теми WordPress в коді сторінки
5. Таблиця стилів. style.css
6. Головна сторінка. index.php
7. Одиночна запис single.php
8. Статична сторінка page.php
9. Рубрики або категорії. category.php
10. Мітки або теги. tag.php
11. Автор статті або записи. autor.php
12. Дата публікації. data.php
13. Архів. archive.php
14. Результати пошуку. search.php
15. Сторінка 404 (запиту, не знайдено). 404.php
16. Шапка сайту або заголовок. header.php
17. Підвал. footer.php
18. Бічна колонка. sidebar.php
19. Коментарі. comments.php
20. Функції теми function.php
21. Слідкуйте за кодом

Щоб редагувати файли WordPress скористайтеся редактором Notepad ++ і FTP клієнтом для передачі файлів на сервер. Найкраще, для цих цілей, використовувати файловий менеджер Total Commander

Файли WordPress завжди можна швидко скопіювати на свій жорсткий диск, внести в них зміни і завантажити назад на сервер. Цей варіант для редагування є кращим, тим більше з огляду на те, що деякі хостери обмежують, з метою безпеки, доступ до файлу theme-editor.php - редактору теми оформлення. Цей файл знаходиться за адресою: wp-admin / theme-editor.php, а всі файли шаблону WordPress за адресою: wp-content / themes / twentytwelve - це папка в якій зберігаються файли теми оформлення WordPress Twenty Twelve, яка поставляється разом з движком.

Для подальшої роботи слід розуміти, що редагувати потрібно не всі файли WordPress, а тільки файли теми оформлення або шаблону. Всі файли кожного конкретного шаблону зберігаються в своїй папці і перш, ніж вносити в ці файли зміни слід зробити резервне копіювання папки з цими файлами.

Підключення тим оформлення

Спочатку потрібно навчитися міняти теми оформлення, для цього до движку WordPress, який відповідає за функціонал, за правильну роботу сайту, підключаються файли шаблону або теми оформлення. Вони відповідають за зовнішній вигляд сторінок, за дизайн. Для того щоб поміняти тему оформлення потрібно зайти в панель адміністрування WordPress: Зовнішній вигляд - Теми - Управління темами. Вибрати потрібну тему, натиснути посилання: Активувати.

Ви завжди можете встановити нову тему оформлення. Або вказати шлях до архіву в якому знаходитися папка з файлами теми в форматі ZIP. Або ви можете помітити розпакувати папку з файлами теми, наприклад vasha-tema, безпосередньо на сервер, по FTP, в директорію: wp-content / themes. Вийде wp-content / themes / vasha-tema

Доступ до файлів WordPress через редактор теми

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

Щоб зайти в редактор файлів WordPress потрібно в панелі адміністрування вибрати: Зовнішній вигляд - Редактор.

Якщо ваш хостер встановив заборону на користування вбудованим редактором файлів WordPress, то тоді скористайтеся файловим менеджером з функцією FTP клієнта. Таким, як Total Commander.

В обох випадках доступні для редагування одні і ті ж файли. Тільки спосіб доступу до них різний. І в першому, і в другому випадку, перш ніж вносити зміни в будь-які файли WordPress зробіть резервне копіювання, для цього досить зберегти вихідний файл або скопіювати його вміст, html і php код в звичайний текстовий файл.

Структура теми оформлення WordPress

Перш ніж вносити зміни в файли WordPress потрібно розібратися в тому, з яких структурних блоків складається тема оформлення і як файли теми пов'язані один з одним. WordPress генерує, збирає, кожну зі сторінок сайту кожен раз заново. Для цього і служать файли теми оформлення, вони виступають в ролі будівельних блоків.

Існує набір файлів на диску, з яких, за певними правилами, написаним на мові програмування PHP потрібно зібрати готовий документ. Якщо придивитися, то можна побачити, що кожна сторінка сайту складається з однакових елементів:

• Верхня частина, заголовок - файл header.php
• Середня частина, зміст - файл index.php
• Нижня частина, підвал - файл footer.php
• Бічна частина - файл saidebar.php
• Коментарі - файл comments.php

І це тільки самі основні будівельні блоки. З їх допомогою можна створити тільки одну головну сторінку з коментарями. Файлів WordPress, які знадобляться для редагування шаблону трохи більше. У цей список потрібно додати:

• Статичні сторінки - файл page.php
• Записи - файл single.php
• Сторінка рубрик - файл category.php
• Сторінка для архівів - файл archive.php
• Сторінка з результатами пошуку - файл search.php
• Сторінка для помилки 404 - файл - 404.php

Ці файли виводять розмітку зміст на кожну сторінку WoprdPress, а за оформлення відповідає таблиця стилів:

• Таблиця стилів - файл style.css

В папці з темою розміщений ще один важливий файл:

• Функції теми - файл functions.php

Можна сказати, що він відповідає за злагоджену роботу всіх файлів теми оформлення WordPress. З набору файлів вибудовується чітка блокова структура. Потрібну інформацію про файлах WordPress можна дізнатися на сторінках: і це інформація з офіційного сайту WordPress.org

Ця структура єдина для всіх сторінок сайту і може відрізнятися в різних темах оформлення. Тому мене шаблон або, інакше кажучи, тему WordPress можна оформити контент безліччю різних способів. Зовнішній вигляд сайту змінюється повністю. Для показу банерів і блоків контекстної реклами потрібно вибрати найбільш підходящу тему оформлення і ще додатково доопрацювати цей шаблон:

• Вставити в нього форму пошуку.
• Вставити в заголовок і підвал рекламні блоки.
• Можливо, внести зміни в таблицю стилів.

На щастя, для WordPress створено багато тем оформлення. Виберете потрібну з панелі адміністрування: Зовнішній вигляд - Теми - Встановити теми. На цій станиці можна вибирати оформлення для сайту за критеріями, по фільтру характеристик:

• кольори
• колонки
• Ширина
• функції
• Тема

Нас цікавлять, в першу чергу, два пункти:

• колонки
• Ширина

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

Найпростіше на практиці відібрати і протестувати в роботі сподобалися вам теми. Головний критерій - сумісність з основними плагінами і можливість швидко відредагувати файли WordPress. Шукайте прості і зручні в управлінні теми оформлення для свого комерційного сайту.

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

• # 1 і # 3 - дві колонки;
• # 2 і # 4 - три кілочок.

# 1 - дві колонки і # 2 три колонки дозволяють найкращим чином розмістити блоки контекстної реклами.

Збірка файлів теми WordPress в коді сторінки

Добре відомо, що чим ближче код рекламного оголошення до початку сторінки, тим вище вартість за клік. Подивіться код будь-який з сторінок сайту, який зроблений на WordPress, Вам потрібно зрозуміти в якій послідовності виводяться файли шаблону безпосередньо в коді готової сторінки. Для цього уважно розгляньте початок і кінець коду кожного з файлів WordPress для конкретної, вашої теми оформлення. Зазвичай початок і кінець кожного структурного блоку помічені примітками, наприклад так: <! - HEADER START -> <! - END START -> в файлі header.php або <! - Start Footer -> <! - End Footer -> в файлі footer.php

Потрібно розуміти, що кожен автор теми може по-різному позначати початок і закінчення для структурного блоку. Визначивши початок і закінчення, шукайте ці рядки в вихідному коді сторінки. Використовуйте для роботи з кодом браузер Mozilla Firefox - Інструменти - Веб-розробка - Вихідний код сторінки. Для пошуку тексту на сторінці з кодом використовуйте комбінацію клавіш Ctrl + F. Збірка файлів шаблону WordPress зазвичай відбувається в наступній послідовності:

• header.php
• sidebar.php
• index.php
• comments.php
• footer.php

Зверніть увагу на те, що вміст віджетів, які розміщені в боковій колонці в коді сторінки можуть бути розміщені після коду коментарів. Обов'язково потрібно проаналізувати код для всіх типів сторінок на вашому сайті. Розібравшись зі структурою сторінки в WordPress, з тим, як вона формується з окремих файлів шаблону, можна докладніше розповісти про кожного з них.

Таблиця стилів. style.css

Таблиця оформлення стилів для всього сайту. Важливо зрозуміти, що кожен файл WordPress, який бере участь в складанні сторінки, в свою чергу, зібраний з окремих блоків DIV. Кожному такому блоку можна задати свій стиль, написати правила для оформлення в файлі style.css

Наприклад, файл header.php може містити в собі два блоки. Один з них відповідає за виведення на сторінку назви блогу, а інший, за висновок головного меню сайту. Зрозуміло, що і шрифт, і відступи, і поля для кожного з блоків повинні бути різні. Тому так зручно задати оформлення для всіх численних елементів, які розміщені на сторінці сайту, в одному файлі style.css. У цьому файлі записані правила для оформлення заголовків від H1, H2 до H6, блоків DIV і навіть окремих абзаців P. В першу чергу потрібно звернути увагу на наступні параметри і їх значення:

• Ширина блоків.
• Відступи і поля.
• Кольорова гама.
• Стиль і розмір шрифту.
• Оформлення посилань.

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

Головна сторінка. index.php

В папці з файлами теми WordPress повинен знаходитися файл index.php. Це основний файл шаблону, він відповідає за висновок Головної сторінки сайту. Головна сторінка може бути статичною або містити список анонсів і посилань на останні записи. Можна зробити тему оформлення, яка буде складатися тільки з двох файлів:

До файлу index.php підключаються заголовок header.php, підвал footer.php, бічна колонка sidebar.php, коментарі comments.php. Існує ієрархія по якій WordPress виводить ту чи іншу сторінку, якщо жодна із записів і сторінок не буде знайдена, то буде виведений файл index.php.

Відображення головної сторінки відбувається в наступній послідовності; користувач переходить за адресою сайту, наприклад, vash-sait.ru, WordPress шукає файл home.php, якщо такого файлу немає, то буде використаний шаблон index.php:

1. home.php
2. index.php

Одиночна запис single.php

Спочатку WordPress шукає файл шаблону, який відповідає за формування записи певного типу, якщо такий файл не знайдений, то буде використано файл single.php, якщо і такого файлу немає в папці з файлами теми, то буде використаний файл index.php:

1. single-post_type.php
2. single.php
3. index.php

Можна створити шаблони для будь-якої кількості типів записів з різними оформленням. Наприклад, single-product.php - для опису продукції, single-news.php - для публікації новин.

Статична сторінка page.php

1. page-slug.php
2. page-id.php
3. page.php
4. index.php

Ви можете створити шаблон для статичної сторінки з доповненням в назві, page-free.php для безкоштовних пропозицій, наприклад, або просто з номером page-01.php. Якщо WordPress не знайде файл page.php, то буде використаний файл index.php.

Рубрики або категорії. category.php

1. category-id.php
2. category.php
3. archive.php
4. index.php

Файл WordPress category.php відповідає за виведення сторінки зі списком записів, які належать одній рублики, і посилань на них. Це лише спосіб сортування записів. Шаблони для сторінок рубрик можуть бути різними, наприклад category-01.php і category-02.php, два різних шаблону. Якщо WordPress не знайде в папці з файлами теми оформлення такі нумеровані файли категорій, то він буде шукати файл category.php. Якщо не знайде його, то буде використовувати файл archive.php. Якщо і такий файл не буде виявлений, то WordPress виведе файл index.php.

Мітки або теги. tag.php

1. tag-slug.php
2. tag.php
3. archive.php
4. index.php

Сортувати записи можна не тільки за категоріями, а й по мітках або тегами. Це ще один спосіб розкласти записи "по поличках". Кожного запису можна присвоїти декілька міток, ключових слів, за якими буде здійснено вибір. Список таких записів буде виведений через шаблон tag.php, який сформує для кожної мітки свою сторінку зі списком записів. Все так же, як і у випадку з категоріями.

Автор статті або записи. autor.php

1. autor.php
2. archive.php
3. index.php

WordPress дозволяє налаштувати публікації так, що в блог зможуть писати різні автори, таким чином можна зробити колективний мережевий проект. Всі записи можна відсортувати не тільки за категоріями і тегами, а ще й по авторам. Для виведення результатів сортування на сторінку служить шаблон autor.php. Якщо такий файл не буде знайдений у папці з темою WordPress, то будуть використані шаблони archive.php або index.php, відповідно до ієрархією.

Дата публікації. data.php

1. date.php
2. archive.php
3. index.php

Для відображення результатів сортування за датою публікації використовується шаблон date.php. Якщо такого файлу немає, то тоді WordPress шукає файл archive.php, а потім, якщо і такого файлу немає, то index.php

Архів. archive.php

1. archive.php
2. index.php

Цей шаблон потрібно мати в списку необхідних файлів для теми WordPress. Оскільки вже видно, що він буде використаний для створення сторінки з результатами сортування за багатьма параметрами, якщо спеціальні шаблони для рубрик, міток, автора і дати ні знайдено. Тому файли style.css, index.php і archive.php повинні бути в папці з файлами WordPress.

Результати пошуку. search.php

1. search.php
2. index.php

Файл search.php використовується як шаблон для створення сторінки з результатами пошуку за ключовим словом. Зрозуміло, якщо тема містить форму для пошуку, існують теми оформлення, які не використовують цю функцію. У будь-якому випадку, якщо використовувати пошук від пошукової системи, то файл search.php не знадобиться.

Сторінка 404 (запиту, не знайдено). 404.php

1. 404.php
2. index.php

Ця сторінка повинна бути обов'язково - це важливо з точки зору пошукового просування. Наявність такої сторінки позитивно позначається на формуванні довіри до сайту. Якщо шаблону для такої сторінки немає, то буде використаний файл index.php.

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

Шапка сайту або заголовок. header.php

Цей шаблон використовується для створення верхньої частини сторінки. Зазвичай в цьому файлі розміщена розмітка для виведення логотипу або назви сайту, в шапку виводиться опис сайту. У пункту Параметри - Загальні - Назва сайту - Короткий опис можна вказати назву та короткий опис для сайту, обидві ці терміни будуть виведені в верхню частину сторінки через файл шаблону WordPress - header.php.

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

Посилання на стрічку RSS і Twitter так само можуть бути розміщені в файлі header.php. В цей шаблон можна додати код рекламного блоку або кнопки соціальних мереж, графіку, відео і аудіо плеєри. Можна створити слайд-шоу або меню з списком, що випадає, використовуючи JavaScript. Або ж, навпаки, прибрати з шапки все зайве, залишити тільки назва сайту та рядок головного меню. Можливості оформлення верхньої частини сторінки обмежені лише фантазією вебмастера.

Підвал. footer.php

Нижня частина сайту формується з використанням файлу footer.php. У цьому файлі зазвичай розміщують службову інформацію, інформацію про автора сайту, знак копірайту. Сюди ж додають коди лічильників і коди соціальних мереж. Можна розмістити в підвалі додаткове, розширене, головне меню або список рубрик.

Можна вивісив в підвал список останніх записів, коментарем або посилання на найпопулярніші пости. Справа смаку і авторського задуму. Бувають дуже прості файли footer.php, а бувають насичені кодом, в тому числі з використанням JavaScript.

У підвалі можна продублювати підписку на RSS і розмістити соціальні кнопки для тих користувачів, які дісталися до самого кінця сторінки. Цей файл WordPress можна редагувати, як і будь-який інший.

Бічна колонка. sidebar.php

Не дивлячись на те, що файл називається "бічна колонка" це шаблон може бути використаний і вгорі і внизу сайту. Найзвичніший для WordPress випадок, коду на сторінці одна або дві бічних колонки. Їх може бути більше, наприклад три. І тоді ми отримаємо тему оформлення з чотирма колонками. Три бічних службових, плис одна центральна з вмістом. Якщо ще використовувати колонки вгорі і внизу сторінки, то в них можна розміщувати віджети в які виводити додаткову інформацію або ілюстрації.

Така схема застосовується для журнальної верстки новинних сайтів. Щоб зробити таку тему, досить відредагувати файли WordPress, які відповідають за виведення на сторінку додаткової інформації. Через файл sidebar.php на сторінку виводять віджети, блоки, які дозволяють вставляти довільний контент, в тому числі і рекламний код.

У боковій колонці завжди можна знайти список рубрик і міток. Всі готові віджети можна знайти в налаштуваннях WordPress: Зовнішній вигляд - Віджети - Доступні віджети. На цій же сторінці відображені всі бічні колонки в які можна додати будь-який з віджетів. Тому зручніше видаляти і додавати інформацію в бічну колонку через настройки, без редагування файлу sidebar.php. Якщо додавати рекламний блок, то спочатку потрібно подивитися в кокой послідовність виводяться в коді сторінки файли шапки, записи, бічний колонки, коментарів і вміст віджетів.

Коментарі. comments.php

Коментарі можна виводити, як на будь-який стаціонарної сторінці, так і на сторінках із записами. Параметри - Обговорення - Налаштування обговорення. За роботу з коментарями відповідає файл WordPress - comments.php

Оскільки цей файл містить форму для введення даних і веде діалог з користувачем, слід перевести всі фрази на російську мову. Це можна зробити безпосередньо в файлі comments.php. У коді цей файл виводитися слідом за постом. Якщо у вашій темі це так, то такий факт потрібно враховувати при розміщенні блоків контекстної реклами.

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

Функції теми function.php

Цей файл також знаходиться в папці з темою WordPress і відповідає за складання елементів теми. У цьому файлі прописані правила для коректної роботи всіх структурних блоків. Деякі плагіни для роботи потребують того, щоб в файл function.php були додані рядки коду. Це дуже важливий файл WordPress тому перш ніж його редагувати потрібно обов'язково зробити резервну копію.

Взагалі плагіни широко використовуються для автоматичного редагування файлів теми оформлення. Наприклад, для вставки рекламних блоків . Якщо використовувати комплексний підхід; редагувати файли теми за допомогою плагінів, вручну і створювати додаткові файли шаблонів WordPress, то можна створити дуже цікавий і багатофункціональний сайт на основі блогового движка.

Слідкуйте за кодом

Вся справа в тому, що інформація розміщена на сторінці, та яку бачить користувач, і інформація в коді сторінки, та яку аналізує робот, м'яко кажучи відрізняються один від одного. Для прикладу розберіть вихідний код цієї чи іншої сторінки: Mozilla Firefox - Інструменти - Веб-розробка - Вихідний код сторінки.

Уважно розгляньте, в якій черговості слідують файли шаблонів WordPress.

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