Насправді цей код не потребує докладних пояснень, просто пам’ятайте про те, що він повинен бути присутнім в 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.

.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, над яким ми працювали до цього, і додайте після коду навігації меню наступне.

// Активуйте контрольні зображення постів
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).

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

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

Крок 10 — Page.php

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

Крок 11 — Category.php

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

Фрагмент коду тут стане єдиним додаванням, ми включили його відразу після циклу 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. Що потрібно нам для роботи цієї властивості? Цей коротенький рядок коду:

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

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

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

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

Крок 13 — Footer.php

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