Створення своєї теми для WordPress: верстка під Wordpress, верстка шаблону Wordpress - Netpeak Blog

1. 1. Frontend блогу
2. 2. Photoshop-макети
3. 3. HTML і CSS
4. 4. Як працює тема WordPress
5. 5. Дублювання файлів шаблонів
6. 6. Style.css
7. 7. Поділ файлів
8. 8. Header.php
9. 9. Sidebar.php
10. 10. Footer.php
11. 11. Index.php
12. 12. Розбір циклу
13. 13. Копіювання циклу
14. 14. Предпросмотр теми
15. 15. Single.php
16. 16. Page.php
17. 17. Видалення файлів HTML
18. 18. Шаблон сторінки WordPress
19. Додаткова література:

Днями я перевів корисну статтю і хочу поділитися нею з усіма. Отже, статтю написав товариш Nick La і далі розповідь буде від його особи.

Ця стаття розповість вам про те, як створити найпростішу тему для WordPress. хоча Codex і надає велику документацію з цього питання, але мені вона здається дещо складною для новачка. Тому в даному «туторіали» я розповім принципи роботи тем для WordPress і покажу як адаптувати під них сирої HTML-шаблон. При цьому від вас не потрібно знання PHP, але добре якщо ви володієте Photoshop і CSS для створення дизайну.

1. Frontend блогу

До того, як ми почнемо, давайте поглянемо на стандартну тему WordPress і розберемося з чого вона складається. Відзначимо елементи (шапка, заголовок поста, форма пошуку, навігація, підвал і т. Д.).

Стандартний Frontpage (index.php)

Стандартний Single (single.php)

2. Photoshop-макети

Грунтуючись на зовнішньому вигляді стандартної теми, розробіть Photoshop-макети для вашого блогу. Для прикладу я використовую GlossyBlue - одну з моїх безкоштовних тем. скачайте demo.zip , Щоб побачити готовий файл Photoshop.

3. HTML і CSS

Коли PSD-дизайн готовий, створіть HTML + CSS шаблон кожної сторінки. Дотримуючись кроків цієї інструкції, ви можете використовувати мої HTML файли GlossyBlue з demo.zip. Розпакувавши архів, ви побачите index.html, single.html і page.html. Далі я буду використовувати їх для перетворення в шаблон.

Навіщо спершу створювати статичний HTML? Головним чином це зроблено з тієї причини, що це значно спростить процес розробки. Зазвичай я створюю HTML файл для кожного шаблону, перевіряю їх валідність (HTML і CSS розмітку) у всіх браузерах. Після цього залишається лише вирізати і вставити код WordPress. Так що можна вже не турбуватися про помилки в HTML або CSS.

4. Як працює тема WordPress

Якщо ви перейдете до папки стандартної теми (wp-content / themes / default), то побачите багато php-файлів (званих файлами шаблонів) і один файл style.css. Для формування сторінки WordPress зазвичай використовує декілька файлів шаблонів (index.php, header.php, sidebar.php, і footer.php).

Детальніше в Codex: «Архітектура сайту» і «Ієрархія шаблонів».

5. Дублювання файлів шаблонів

Скопіюйте папку HTML з GlossyBlue в папку wp-content / themes. Після цього перейдіть в директорію теми default, скопіюйте comments.php і searchform.php в папку glossyblue.

6. Style.css

Перейдіть в папку теми default, відкрийте файл style.css. Скопіюйте закоментувавши на початку файлу текст і вставте в style.css теми GlossyBlue. Якщо хочете, можете змінити назву і дані про автора.

7. Поділ файлів

Тепер нам потрібно зрозуміти де розділити HTML-файли на частини: header.php, sidebar.php, і footer.php. На скріншоті нижче видно спрощену версію мого index-файлу, а також принцип її поділу.

8. Header.php

Відкрийте index.html. Вам потрібно вирізати ділянку від верху до місця, де закінчується, вставити його в новий php-файл і зберегти як header.php. Перейдіть в папку теми default, відкрийте новий header.php. Скопіюйте та замініть теги, де цього вимагає php-код: title, link, таблиці стилів, h1 і div class = description.

Меню навігації (wp_list_pages) Замініть теги li в ul id = nav на;

Посилання: wp_list_pages

9. Sidebar.php

Поверніться до index.html, виріжте код з того місця, де починається form id = searchform і до закриття тега div id = sidebar, помістіть його в новий php-файл і збережіть як sidebar.php.

• Замініть form id = searchform з усім вмістом на.
• Замініть теги li категорій на
• Замініть теги li архівів на

Посилання: wp_list_categories і wp_get_archives

10. Footer.php

Поверніться до index.html. Вийміть звідти код від div id = footer включно з тегом div id = footer і до кінця / html потім помістіть в новий footer.php.

Недавні записи Тут я використав query_post для відображення 5 останніх записів у блозі.

«Останні коментарі» «Останні коментарі» згенеровані плагіном (включений в папку теми)

11. Index.php

Тепер у вашому index.html повинен залишитися тільки div id = content. Збережіть файл як index.php. Впишіть рядки: get_header, get_sidebar, і get_footer в тому порядку, як вони зустрічаються в шаблоні.

12. Розбір циклу

Цикл послідовно відображає всі записи блогу в залежності від ваших налаштувань. Скріншот нижче ілюструє його роботу. Спочатку цикл перевіряє наявність записів і якщо таких не знаходить, то видає повідомлення «Not Found».

13. Копіювання циклу

Перейдіть до директорії теми default, відкрийте index.php. Скопіюйте цикл з стандартного index.php в свій - між div id = content ../ div. Після цього замініть статичний текст тегами шаблону WordPress: post date, title, category, comments, next і previous link.

14. Предпросмотр теми

Вітаю! Ви створили публічну частину (основну частину шаблону). Тепер зайдіть в адміністративну панель, перейдіть до закладки Design, ви повинні побачити тему GlossyBlue. Активуйте її і перейдіть до публічної частини, щоб подивитися результат в дії.

15. Single.php

Прийшов час створити шаблон single.php. Якщо хочете, можете повторити кроки, переносячи код з стандартної теми. Але мені здається більш простим використовувати щойно створений index.php, зберігши його як single.php. Відкрийте single.php зі стандартної теми і скопіюйте теги шаблону в потрібні місця. Далі підключіть comments_template. На наступному скріншоті відображені внесені мною зміни:

16. Page.php

Тепер новий single.php збережіть з назвою page.php. Приберіть дату запису, форму коментарів, посилання наступний / попередній. Ось, власне, і все - ваш шаблон page.php готовий.

17. Видалення файлів HTML

Видаліть всі файли HTML з папки glossyblue (вони нам більше не знадобляться). Технічно цього достатньо для створення базової теми WordPress. Ви, напевно, помітили, що в стандартній темі більше PHP-файлів. Що ж, насправді, вони вам не так вже необхідні, якщо потрібна проста тема. Наприклад, якщо search.php або 404.php не буде в папці теми, WordPress автоматично використовує index.php для відображення сторінки. Читайте Template Hierarchy для більш докладного розгляду.

18. Шаблон сторінки WordPress

А тепер останній приклад - я покажу вам як використовувати Page Template для створення сторінки Архіву, яка буде містити список всіх записів на вашому блозі (зручно для карти сайту). Скопіюйте archives.php з папки стандартної теми. Видаліть непотрібний код і отримаєте щось на зразок цього:

Тут я використав query_post (Showposts = -1 означає «відобразити всі записи»), щоб перерахувати всі записи.

Тепер зайдіть в панель адміністратора, створіть нову сторінку і назвіть її Archives. У випадаючому списку шаблонів, виберіть Archives.

Додаткова література:

перегляньте список Модулі WordPress , Можливо, вони здадуться вам корисними. Для більш поглибленого вивчення читайте WordPress Theme Hacks .