Як створити власну тему для WordPress

Як створити власну тему для WordPress

Це гостьовий допис Насті Зеленовської. У цьому дописі (до речі, він бере участь у конкурсі, номінація “PHP”) авторка розпочинає розповідати та давати конкретні інструкції щодо того, як створити власну тему для WordPress. Цей допис лише перша частина із серії дописів, що присвячено цій темі.

Користуючись нагодою, хочу подякувати усім, хто радив подавати на сайті такий матеріал. Сподіваюсь, він буде корисним для Вас.

Сьогодні я пропоную Вам навчитися створювати свою власну тему для WordPress. Цьому буде присвячено низку уроків, перший з яких зараз перед Вами. Сподіваюся, всі бачили панель керування (адмінпанель) WordPress та вміють працювати з нею))). Якщо ні – саме зараз слушний момент познайомитись з wp-admin. Лише потім раджу переходити до уроку 🙂

Для того щоб створити тему для WordPress, вам необхідно мати два файли index.html та style.css. З вище сказаного випливає, що Ви повинні не тільки вміти працювати з адмінпанеллю WordPress, але й вміти добре верстати. Тож додамо до списку “must have” знання HTML і CSS!

Тож почнемо:

1. Створіть нову директорію та назвіть її BasicTheme

2. В BasicTheme створіть файл style.css, але поки що залишіть його порожнім.

3. Тепер створіть файл index.php та додайте в нього наступний HTML код:

[code lang=”HTML”]

Test Theme



[/code]

Коли Ви завантажите свою тему на сервер, зможете побачити її в секції Presentation. Оберіть BasicTheme щоб побачити як тема відображається в блозі.

Як Ви вже встигли побачити, Ваша нова тема виглядає не дуже привабливо). Але ми виправимо це неподобство! Нам потрібно додати трохи PHP коду (ха! список “must have” щойно поповнився базовими знаннями PHP – ви повинні вміти “читати” PHP код).

Відкрийте знову файл index.php та замініть рядок:

[code lang=”PHP”]Test Theme[/code]

на

[code lang=”PHP”]<?php bloginfo('name'); ?>[/code]

Знову завантажте ваш файл та подивіться, що змінилося. Тепер ім’я блоґу відображається в рядку заголовка браузера.

Щойно ви познайомились з базовою операцією з темою. Тут теґ шаблону bloginfo(‘name’) “наказує” WordPress відобразити назву блоґу. Існує безліч тегів шаблону (Template Tags) для створення різноманітних речей в WordPress. З їх допомогою Ви можете створювати нові пости, категорії, посилання…все що завгодно.

Насправді, теґи шаблону (Template Tags) являють собою функції PHP (PHP functions). Як ви вже знаєте (або ні), базова функція PHP має вигляд

[code lang=”PHP”]functionname(parameter 1, parameter 2, …);[/code]

або

[code lang=”PHP”][/code]

де parameter- різноманітні дані

Інколи функції бувають без будь-яких змінних. Це означає, що функція буде працювати в режимі “за замовчуванням”

[code lang=”PHP”][/code]

Як зазначалось вище, існує безліч шаблонних теґів. Найкращий спосіб ознайомитися з ними – зазирнути в WordPress Codex, де подана вичерпна інформація зі специфікаціями.

Цикл

Цикл – це частина коду, яка багаторазово виконується з певними змінними, які змінюються кожного разу.

Наприклад, якщо ви хочете вивести значення від 1 до 10, потрібно написати такий код:

[code lang=”PHP”]
for ( $counter = 1; $counter <= 10; $counter += 1) { echo $counter; }[/code] Цей цикл називається For Loop. Інший приклад циклу While Loop. Він виконує частину коду доти, доки виконується умова while (true). [code lang="PHP"] $counter = 1; while ( $counter <= 10 ) { $counter += 1; }[/code] У темах WordPress є один головний цикл, який з'являється майже на всіх сторінках. У термінології WordPress він називається The Loop та обробляє список дописів, які мають бути відображені на певній сторінці. Всередині циклу Ви можете написати код, який буде відображати Пости потрібним Вам чином. Найпростіший приклад такого списку: [code lang="PHP"]


[/code]

Даний код “говорить”, що доки have_posts() є дійсним (іншими словами, доки Пости відображаються) код, що перебуває всередині, повинен повторюватися знову і знову.

Код, що всередині, складається з трьох частин:

1. the_post() – спеціальна функція, яка готує Пост.

2. the_title() виводить заголовок поста

3. the_content() виводить “тіло” Поста

Тепер познайомимося з більш загальною версією The Loop , де код PHP “змішаний” з HTML

[code lang=”PHP”]

… HTML CODE …

[/code]
або
[code lang=”PHP”]

… HTML CODE …

[/code]

Обидва варіанти працюють однаково, але другий трішечки легший, оскільки в ньому очевидно, до чого звертається endwhile. Розгорнута версія The Loop має вигляд:

[code lang=”PHP”]


Sorry, no posts matched your criteria.


[/code]

В першу чергу ми перевіряємо наявність дописів. Поки вони є, код відображає заголовок і контент кожного допису.

bloginfo – як зрозуміло з назви, цей template tag надає нам інформацію про блоґ. Наприклад, якщо Вам потрібен URL сайту:

[code lang=”PHP”][/code]

Файли теми та для чого вони треба

Крім вище зазначених файлів index.php та style.css, для створення повноцінної теми потрібні ще:

home.php
single.php
page.php
archive.php
category.php
search.php
404.php
comments.php
comments-popup.php
author.php
date.php

Всі вони підключаються дуже просто:

[code lang=”PHP”]




[/code]

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

Ієрархія файлів

Наприклад, якщо відсутній файл page.php, то WordPress звернеться до файлу index.php, так само, якщо відсутній файл single.php, то WordPress знову ж таки звернеться до файлу index.php.

Сьогоді Ви отримали базові знання з теми “WordPress шаблон”. Ми будемо й надалі поглиблювати наші знання та в кінцевому результаті створимо свій власний WordPress шаблон.

Чекаємо на Ваші запитання, коменти та зауваження. Ще раз нагадую, що цей допис бере участь у конкурсі. Тому якщо матеріал сподобався, твітніть, лайкніть, поділіться у Google + та залишіть свій комент.

Статті цієї серії написано здебільшого на основі перекладу електронної книги How To Be a Rockstar WordPress Designer

Відпочинок на Мальдивах (отдых на Мальдивах) безсумнівно закарбує у Вашій пам’яті незабутні враження.

You may also like

5 коментарів

  1. Дуже потрібну річ робите. Зараз ніби усе зрозуміло, але вважаю, що для того, щоб усе з написаного зрозуміти, треба знати принаймні основи PHP або просто загального програмування.

    А Насті бажаю успіху і натхнення. Чекаю на наступні частини цієї серії публікацій.

  2. Ваша правда. Основи php у цій справі у жодному разі не завадять.

    Дякую за побажання. Я їй передам, якщо сама до того часу не побачить.

  3. дякую, ця інформація для мене дуже корисна=)))

  4. Дякую, Славко! Наступні уроки все майже готові 🙂

  5. @ slavko:
    Взагалі без базових знань краще просто купити шаблон 😉 Можна прямо з цього блогу. Або попрохати друзів зробити тему за вас. За основами PHP або загального програмування треба йти до інших статей, що приймають участь у конкурсі. Надіюсь буде багато цікавого матеріалу, як для початківців, так і для “продвинутих”.
    Настя, умнічка, молодчинка (с) Оксана Марченко на шоу Х-фактор.
    Чудова стаття для початківців