Як «з нуля» кодувати тему WordPress 3.0

18

Від автора: разом з виходом WordPress 3.0 з’явилася реалізація безлічі нових властивостей цієї популярної системи управління контентом. У цьому уроці ми покажемо вам, як закодувати тему WordPress 3.0 з самого початку, щоб скористатися перевагами нових властивостей, а також створити готову до блогінгу маленьку тему.

Як «з нуля» кодувати тему WordPress 3.0

Як «з нуля» кодувати тему WordPress 3.0

Встановлюємо Work Station

Для початку роботи з цим підручником потрібно встановити на свій комп’ютер сервер, використовуючи XAMPP або WAMP (особливо якщо ви працюєте на PC) або MAMP, якщо ви працюєте на повне mac ‘ е. Ці інструменти дають можливість створити для WordPress локальну тестову середу і зробити так, щоб вам не доводилося під час роботи над проектом постійно пересилати файли через FTP.

З точки зору редагування коду я особливо рекомендував би Notepad++. При наявності виділяється синтаксису, простого і легкого користувальницького інтерфейсу для кодування, я стверджував би, що він – мій особистий улюбленець (плюс не можна заперечувати того, що він безкоштовний), але Notepad або Notepad 2 теж будуть працювати добре.

Підготовка необхідних папок і файлів

У папці з настановним файлом свого wordpress’а перейдіть до wp-content/themes/ і створіть папку з назвою «New 3.0 Theme» (нова тема 3.0). Саме тут протягом роботи з підручником ми будемо тримати всі свої файли. Тепер створіть такі файли і папки:

Як «з нуля» кодувати тему WordPress 3.0

/images
style.css
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.php

Крок 1 — Style.css

У style.css будуть знаходитися всі елементи стилів нашого шаблону WordPress. Однак спочатку ми використовуємо його для оголошення назви свого шаблону, а також імені автора та посилання, опису і версії. При створенні теми WordPress пам’ятайте про те, що style.css – це один з двох файлів, потрібних для роботи теми, а другий, який ми створимо пізніше – це index.php.

/*
Theme Name: New WP 3.0
Theme URI: http://www.onextrapixel.com
Description: A clean and minimal theme that is completely compatible with WordPress 3.0
Author: Keenan Payne
Author URI: http://slackrmedia.com
Версія: 1.0
*/

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

Тепер створимо кілька основних описів, які пізніше реалізуємо в декількох PHP файлах шаблону.

body{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
background: #d9d9d9;
color: #000000;
}
a:link, a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
color: #5f5f5f;
}
h1 {
font-size: 54px;
}
h3 {
font-size: 24px;
}
#wrapper{
margin: 0 auto;
width: 750px;
text-align: left;
background: #fff;
padding: 20px;
}
#header{
width: 750px;
height: 100px;
}
#blog{
float: left;
width: 520px;
padding: 0 10px 10px 10px;
}
.sidebar{
float: left;
width: 200px;
margin: 0 0 0 10px;
font-size: 14px;
list-style: none;
}
#footer{
clear: both;
text-align: center;
height: 50px;
background: #ccc;
padding: 10px;
}

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

Пакувальник #wrapper буде розміром у всю сторінку, #header, що ясно з назви, буде заголовком, а #blog містить останні пости в блог сайту. Нарешті, у нас є .sidebar і #footer, обидва з яких будуть містити основні визначення даних областей, про яких ми більш детально поговоримо пізніше.

Крок 2 — Header.php

Далі ми створимо header.php, який зараз буде містити логотип нашого вебсайту, а також власну навігацію.

Як «з нуля» кодувати тему WordPress 3.0


Насправді цей код не потребує докладних пояснень, просто пам’ятайте про те, що він повинен бути присутнім в header.php всіх ваших тем. Спочатку ми оголошуємо doctype, а також використовуємо стандарт, який застосовується для показу назви вебсайту таким, яким ви його пишете в установках свого wordpress’а, а потім style.css і PHP код, який активує перехресні посилання WordPress 3.0.

Крок 3 – Додаємо користувача навігацію

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

Як видно з коментованих уривків коду, перша частина з add_action використовується для додавання підтримки користувальницьких меню, а далі ми реєструємо користувача меню і називаємо його «Primary Menu (головне меню). Тепер ми переходимо до реалізації меню в своїй темі.

Щоб це зробити, нам доведеться додати нижчеподану рядок коду в кінець документа header.php.

‘menu_order’, ‘menu_class’ => ‘nav’, ‘theme_location’ => ‘primary-menu’ ) ); ?>

Тепер розберемося, що вона в точності означає. Основна застосована функція – це wp_nav_menu, з sort_column, container_class і theme_location в якості використовуваних аргументів. Sort_column гарантує, що команда, обрана вами в інструментальній панелі WordPress виконується, container_class дозволить вибрати клас CSS, створений вами для застосування стилів до свого меню. Нарешті, theme_location просто встановлює меню туди, куди нам потрібно, в даний момент це primary-menu.

Крок 4 – Визначаємо стилі навігації

Наша користувацька навігація заголовка готова і працює, але в даний момент виглядає лише як нудний застарілий список посилань, на жаль, естетично непривабливий. Щоб виправити це, ми створимо ourstyle.css клас з назвою nav.

Як «з нуля» кодувати тему WordPress 3.0

.nav{
width:750px;
background: #000;
display:block;
float:left;
position:relative;
}
.nav ul{
list-style:none;
}
.nav li{
float:left;
position:relative;
}

Як видно, в .nav ми зробили деякі основні оголошення, такі як ширина навігації, фон, в якому вона буде вирівняна, а також значення display. Далі ми призначаємо стилі основним неупорядоченному списку, просто переконавшись, що маркери абзацу з нашими посиланнями не показуються. Для списку ми переміщаємо пункти вліво, а також розташовуємо їх відносно.

Тепер закінчимо визначення стилів навігації, додавши їх до посилань і випадаючим меню.

.nav a{
display:block;
text-decoration:none;
color:#fff;
padding:0 15px 10px 0;
font-size:13px;
font-weight:bold;
}
.nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
float:left;
z-index:99999;
background: #212121;
}
.nav ul ul ul{
top: 30%;
left:100%;
background: #343434;
}
.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}
.nav li:hover > a,.nav ul ul:hover > a{
color:#ccc;
}
.nav ul li:hover > ul{
display:block;
}

Як видно, ми починаємо з призначення стилів посиланнями меню, а зараз займаємося призначенням стилів випадаючим меню. В .nav ul ul ми встановлюємо position (положення) на absolute (абсолютно) і встановлюємо властивість верху top на 100%, так що він знаходиться прямо під свій вихідної посиланням. Ми також змінили фон, щоб випадає посилання трохи виділялася, і встановили z-index на 99999, так що неважливо, що знаходиться під нею або на шляху нашого меню, вона завжди буде знаходитися поверх всіх інших елементів.

Для третього випадаючого меню ми знову злегка змінили колір фону так, щоб воно виділялося, встановили left (лівий край) на 100%, щоб її лівий край завжди знаходився праворуч від першого випадаючого меню, і встановили top (верх) на 30% так, щоб він все ще був прикріплений до другого випадаючого меню, але відокремлений від цілого меню.

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

Крок 5 — Index.php

Index.php стане домашньою сторінкою нашого вебсайту і буде містити код, який включає заголовок, нижній колонтитул і бічну колонку, про що я розповім нижче, і код, який включає останні пости з блогу, а також ми скористаємося в своїх інтересах властивістю WordPress 3.0 для розміщення контрольних зображень (thumbnail).

Ці рядки коду використані для виводу всієї інформації в header.php, sidebar.php і footer.php куди б ви не помістили їх у файлах теми.

Крім того, код тут досить простий для розуміння. Після виклику header.php ми користуємося трохи раніше створеним #blog і викликаємо цикл, застосовуваний для виведення останніх постів у блозі WordPress. Після цього обертаємо назва своїх постів div, яким ми раніше також призначили стилі.

Єдиний фрагмент коду тут, показує, як ми збираємося скористатися перевагами властивості WordPress 3.0 розміщувати контрольні зображення – це … Воно означає, що даний код не буде робити нічого до тих пір, поки ми не активуємо властивість в functions.php що ми і зробимо в наступному кроці.

Крок 6 – Активація «контролек» постів

Ми додали код показу контрольних зображень постів на головній сторінці, але в даний момент нічого не відбувається, так як в дійсності ми не дали властивості можливості працювати. Зараз відкрийте functions.php, над яким ми працювали до цього, і додайте після коду навігації меню наступне.

Як «з нуля» кодувати тему WordPress 3.0

// Активуйте контрольні зображення постів
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(520, 250, true);

Код вгорі пояснює сам себе, так як майже в точності роз’яснює те, що виконується. Друга рядок додає в нашу тему підтримку контрольних зображень постів, в той час як третій рядок визначає точні розміри нашої контрольки, які у цій статті встановлені на ширину 520 пікселів і висотою в 250 пікселів.

Крок 7 — Sidebar.php

Як ви здогадалися, sidebar.php – це файл, який буде демонструвати потрібну нам інформацію в боковій колонці. Так як ми вже включили файл в свій index.php все, що потрібно зробити – це вставити в код, і наша бічна колонка здасться на домашній сторінці.

Так, це весь код, доданий для функціональності sidebar.php. Ми викликаємо div, створений у style.css, а вказаний внизу код дасть можливість додавати віджети до бічної колонки в потрібному порядку і належним чином через прикладну частину wordpress’а. Однак, як з багатьма властивостями, нам доводиться спочатку модифікувати файл functions.php, щоб це властивість працювало нормально.

//Простий код для бічної колонки з віджетом
if ( function_exists(‘register_sidebar’) )
register_sidebar();

Код всього лише вказує WordPress’у реєструвати бічну колонку, викликану нами sidebar.php. WordPress досить легко може створювати безліч бічних колонок, якщо вони вам потрібні у кількості більше однієї, але заради скорочення цього і так вже довгого підручника, давайте дамо можливість Google’у відповісти на питання про те, як це зробити.

Крок 8 — Single.php

Single.php ми вже використовуємо для окремої сторінки з постом, і велика частина коду повинна виглядати досить схоже, так як ми вже кодували index.php. Насправді, відмінність лише одне – ми додали div шаблону коментарів і код для приєднання comments.php.

Крок 9 — Comments.php

При випуску WordPress 3.0 малася на увазі стандартизація форми коментарів для всіх тем WordPress, полегшуючи завдання тим авторам і розробникам плагінів, так як форма для коментарів могла коригуватися за допомогою пасток-хуків (hooks).

Як «з нуля» кодувати тему WordPress 3.0

Внизу знаходиться код, який вам потрібно буде вставити в файл comments.php в шаблоні теми.

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

Крок 10 — Page.php

При створенні сторінки WordPress для відображення написаного на ній використовується інший файл — page.php. Код буде виглядати майже повністю так, як той, що ми написали в oursingle.php, за винятком того, що це сторінка, на якій ми збираємося пропустити шаблон коментарів і злегка навігацію постів, щоб замість посади керувати сторінкою. За цим винятком код буде точно таким же.

Крок 11 — Category.php

Category.php послужить як файла, який надає інформацію для відображення постів всякий раз, коли користувач дивиться спеціальну категорію посту, час написання постів чи окремого автора. Як у випадку з page.php велика частина коду тут буде абсолютно такий же, як у створеному нами до того single.php крім фрагмента в самому початку.

Як «з нуля» кодувати тему WordPress 3.0

Archive for the » Category:

Posts Tagged «

Archive for :

Archive for :

Archive for :

Author Archive

Blog Archives

Фрагмент коду тут стане єдиним додаванням, ми включили його відразу після циклу WordPress.

Archive for the » Category:

Posts Tagged «

Archive for :

Archive for :

Archive for :

Author Archive

Blog Archives

Він займається тим, що використовує групу пропозицій if/elseif в PHP для показу того, що ми зараз переглядаємо в своєму блозі. Таким чином, якщо ми дивимося окрему категорію з назвою «Test Category 1» (тестова категорія 1), він покаже нам заголовок h2 — «Archive for the ‘Test Category 1’ Category:» (архів тестовій категорії 1) перед усіма постами, і стане робити це для окремих дат, авторів і так далі.

Крок 12 – призначені для Користувача фони, посилання завантаження

Як уже пояснювалося, одна з властивостей, реалізованих в WordPress 3.0 – це здатність створювати або змінювати фон свого сайту, будь то зображення або основний колір, прямо за допомогою внутрішнього інтерфейсу WordPress. Що потрібно нам для роботи цієї властивості? Цей коротенький рядок коду:

Як «з нуля» кодувати тему WordPress 3.0

//Код підтримки інтерфейсу фону
add_custom_background();

І таким чином, тепер підключаються користувача фони. Далі ми збираємося додати такий же простий код для того, щоб скрізь на сайті були доступні важливі посилання. Будь це стандартний джерело, коментарі, теги, категорії – всі вони будуть додані заголовок без додаткового коду.

Давайте в functions.php додамо наступний код, щоб це властивість запрацювала належним чином.

//Включіть посилання завантажень RSS-читалках постів і коментарів
add_theme_support( ‘automatic-feed-links’ );

Крок 13 — Footer.php

Для закінчення роботи ми збираємося створити файл footer.php, який використовує #footer, оголошений у style.css, а також буде містити основну інформацію про копірайт, а також посилання на RSS-читалку історій і коментарів внизу сторінки.

Крок 14 – Інші властивості?

Ось пара властивостей, не таких уже необхідних, але здатних виявитися корисними. Спочатку про те, як включити властивість мультисайтов для WordPress 3.0, щоб можна було вести безліч сайтів з однієї установки WordPress. І знову нам потрібно додати в functions.php цей код.

Як «з нуля» кодувати тему WordPress 3.0

//Включити властивість мультисайт (WordPress 3.0)
define(‘WP_ALLOW_MULTISITE’, true);

Висновок

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