Урок №12. Работа с ссылками на страницы (wp_list_pages).

Теперь вы знакомы со структурой сайдбара, и мы продолжаем работать над ним, а в частности над отображением ссылок на страницы. Когда мы закончим стандартный сайдбар, я покажу вам, как можно его виджетировать.

Добавьте следующий код вверху блока Categories:

<?php wp_list_pages(); ?>

Сохраните и обновите браузер. По умолчанию, у вас есть только одна страница — About. Я добавил больше страниц и подстраниц в блог для примера, поэтому у меня четыре уровня вложенности. Вот как это должно выглядеть:

Откройте исходный код страницы в вашем браузере, чтобы увидеть, что функция wp_list_pages() сгенерировала всю остальную структуру и код. Вот пример:

Во-первых, она везде расставляет элемент списка (LI). Во-вторых, она дает номенклатуре название Pages. В-третьих, она добавляет еще один ненумерованный список (UL) под заголовок Pages, внутри элемента списка. Также, она окружает каждую ссылку тэгами <li> и </li>.

Обратите внимание на то, что заголовок “Pages” не совпадает по размерам с заголовком “Categories” для перечисления ссылок на категории.

Как сделать так, чтобы они совпадали? Добавьте ‘title_li=<h2>Pages</h2>’ к wp_list_pages().

Сохраните файл и обновите браузер, чтобы увидеть изменения:

title_li – это атрибут, служащий для подбора внешнего вида заголовка для списка ссылок на страницы. <h2>Pages</h2> — это значение атрибута title_li.

Дальнейшее оформление: В моем примере вы увидели 4 уровня страниц. Некоторый типы дизайна не могут справиться с таким количеством уровней в пределах сайдбара. Чтобы ограничить число уровней для отображения, добавьте атрибут depth к функции wp_list_pages() и установите число уровней для него, например — 3.

Обратите внимание, Я добавил depth=3&, но не просто depth=3. Знак & стоит там для того, чтобы разграничить атрибуты depth и title_li. Если у вас есть только страница About или нет вложенных страниц, вы конечно не заметите разницы.

Разница в моем списке будет заметна. Сравните этот скриншот, с тем, что выше:

Урок №13. Сайдбар: работа с архивами и ссылками blogroll.

Сегодняшний урок достаточно прост. Мы научимся вызывать список ссылок на архивы и ленту блогов (список ссылок на блоги или сайты). А в следующий раз мы рассмотрим календарь и поле «Поиск».

Перед тем как начать, я хочу объяснить, почему стал разбивать свои уроки на более мелкие. Все, что вы сейчас изучаете потребовало у тех, кто учился сам, много времени, чтобы разобраться и систематизировать знания. Мне важно, чтобы вы все понимали с первого раза, чтобы не приходилось возвращаться и перечитывать уроки.

Шаг 1

Добавляем ссылки на архив записей. Вставьте следующий код в область сайдбара, под списком категорий:

?

1 2 3 4 5

<li><h2><?php _e(’Archives’); ?></h2> <ul> <?php wp_get_archives(’type=monthly’); ?> </ul> </li>

Давайте посмотрим, совпадает ли ваш код с моим:

Сохраните файл, обновите браузер, вот результат:

Что произошло?

Вы использовали функцию wp_get_arhives() с атрибутом type и значением monthly чтобы вызвать список архивов, сгруппированный помесячно.

• <li> — открыть элемент списка

• <h2> — открыть подзаголовок

• <?php _e(’Архив’); ?> — текст подзаголовка

• </h2> — закрыть подзаголовок

• <ul> — открыть ненумерованный список под подзаголовком, в структуре элемента списка.

• <?php wp_get_archives(’type=monthly’); ?> — вызвать архивы, сгруппированные помесячно, разместить каждую ссылку между тэгами <li> и </li> tags. Если вы проверите исходный код , вы увидите что функция wp_get_archives() сгенерировала тэги элементов списка (LI) для каждой ссылки, в точности, как функция wp_list_categories().

• </ul> — закрыть ненумерованный список, находящийся под подзаголовком

• </li> — закрыть элемент списка

Шаг 2

Добавляем ссылки на ленту блогов. Напечатайте следующий код под списком архива:

<?php get_links_list(); ?>

Сохраните файл, обновите окно, вот результат:

По умолчанию, моя лента блогов не отличается от вашей. Вот как это выглядит в исходном коде:

Организация кода не идеальна, потому что функция get_links_list() генерирует код за вас сама, так же, как и функция wp_list_pages() , с которой вы познакомились на прошлом уроке.

На сегодня все. В следующем уроке вы узнаете о календаре и поиске.

Урок №14. Поле поиска и календарь.

Хотя название урока «Поле поиска и календарь», я немного расскажу и о блоке Meta. Давайте сегодня закончим рассматривать стандартный сайдбар и в следующий раз наконец узнаем, как его виджетировать. Ну что ж, поехали…

Шаг 1

Добавляем поле поиска. Перед тем, как я дам вам код, создайте новый файл в редакторе, оставьте его чистым и сохраните  под именем searchform.php (конечно, в той же папке, где находится файл index.php). Скопируйте код из файла searchform.txt в ваш файл searchform.php. Пока все, на этом временно оставим файл searchform.php в покое. В файле index.php наберите следующий код, над всеми списками в сайдбаре:

?

1 2 3

<li id="search"> <?php include(TEMPLATEPATH . '/searchform.php'); ?> </li>

Сохраните файл и обновите браузер. Вот результат:

Что произошло?

• <li id=”search”> — открыть элемент списка с ID search. Вы присваиваете ему ID, чтобы потом можно было стилизовать.

• include() – включить любой файл, который вы хотите. Эта функция отличается от  функции шаблона WordPress, потому что функция include() просто включает то, что уже есть там. В этом случае, это код из файла searchform.php.  Информация которая включается, не меняется вместе с блогом. Другими словами, мое поле «Поиск» выглядит точно так же, как и ваше.

• TEMPLATEPATH – место нахождения папки с вашей темой, wp-content/themes/tutorial

• ‘/searchform.php’ – место расположения и имя файла, /searchform.php

• Точка между TEMPLATEPATH и ‘/searchform.php’ связывает их, так что в итоге вы получите: wp-content/themes/tutorial/searchform.php

• </li> — закрыть элемент списка

Обратите внимание, что блок с полем поиска не имеет подзаголовка, как Категории, Архивы, Страницы или Лента блогов. Вы можете дать ему подзаголовок, если хотите, но для того, чтобы ваш сайдбар был как можно больше приближен к виджетизированой версии, не нужно делать подзаголовок.

Шаг 2:

Добавляем календарь. Введите следующий код под полем поиска или блоком списка страниц:

?

1 2 3 4

<li id="calendar"><h2><?php _e('Календарь'); ?></h2> <div id="_mcePaste"><?php get_calendar(); ?></div> <div id="_mcePaste"></li></div> <li id="calendar"><h2><?php _e('Календарь'); ?></h2><?php get_calendar(); ?></li>

Сохраните и обновите окно. Вот результат:

Что же происходит?

• <li id=»calendar«> — открыть элемент списка с ID, под именем “calendar”

• <h2> — начать подзаголовок

• <?php _e(‘Календарь’); ?> — напечатать слово Календарь

• </h2> — закрыть подзаголовок

• get_calendar() – вызвать календарь с помощью функции get_calendar()

• </li> — закрыть элемент списка

С календарем все предельно просто. Будем считать что мы закончили.

Шаг 3:

Добавляем Мета. Введите следующий код под get_links_list():

?

1 2 3 4 5 6 7

<li><h2><?php _e(’Meta’); ?></h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </li>

Сохраните и обновите окно. Вот результат:

(Если вы не зашли в админпанель WordPress)

(Если зашли)

Что произошло? Вы открыли элемент списка (LI) с подзаголовком  (H2) Meta. Под подзаголовком вы разместили ненумерованный список (UL). И поставили вокруг него (для каждой ссылки) тэги элемента списка (LI).

Функция wp_register() генерирует собственный набор тэгов <li> и </li>; когда вы не авторизованы, отображается ссылка Register; когда вы авторизованы, вы видите ссылку Site Admin. Функция wp_loginout() не генерирует свои тэги элемента списка, так что вы их поставили вокруг нее; когда вы не авторизованы, вы видите ссылку Login; когда авторизованы – ссылку Logout. Пока что функция  wp_meta() ничего не делает; она невидима как на веб-странице, так и в исходном коде. Пока не думайте о функции wp_meta(); вы будете редко ее использовать.

Это все. Мы закончили с Meta и полностью рассмотрели стандартный сайдбар.

Урок №15. Сайдбар: добавляем виджеты.

Виджет-подготовленный или виджетированный сайдбар – это если не стандарт для WordPress тем, то точно признак хорошего тона. Но что же такое виджетирование? Попросту говоря, виджетирование – это подготовка сайдбара к помещению туда всевозможных доступных виджетов из панели управления вашего блога в разделе «Внешний вид -> Виджеты«.

Например, если вы хотите поменять местами разделы Категории и Архивы, вам не нужно для этого менять HTML код сайдбара, а вы можете просто перетащить категории на нужные позиции в разделе.

Шаг 1: создаем файл functions.php

Создайте новый документ в редакторе, оставьте его пустым, сохраните под именем functions.php в папке с вашей темой. Скопируйте все из файла functions.txt в ваш functions.php. Сохраните и закройте.

К этому моменту у вас уже должно быть четыре файла в папке с вашей темой под именем “tutorial”: index.php, style.css, searchform.php и functions.php.

Шаг 2: Виджетируем сайдбар

Введите следующий код сразу после первого тэга <ul> вашего сайдбара.

?

1	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

А это сразу перед тэгом </ul>:

?

1	<?php endif; ?>

Сохраните файл index.php. Вы не увидите изменений на веб-странице, пока не установите хоть один виджет из панели управления вашего блога в разделе «Внешний вид -> Виджеты«. Если всё работает, значит вы все сделали правильно. До следующего урока.

Урок №16. Футер.

Данный урок посвящен футеру и довольно прост. Вам необходимо будет добавить  DIV, или невидимый блок, после аналогичного DIV блока сайдбара, и заполнить его каким-нибудь текстом (как правило, подтверждающим копирайт). Я даже думаю, что вы могли бы сделать это и без моих инструкций. Ну же, попробуйте сами! А потом можете вернуться к этому уроку, чтобы проверить себя.

Шаг 1: Добавляем DIV

Вставьте следующий код после закрывающего DIV-а сайдбара:

?

1 2	<div id="footer"> </div>

Шаг 2:

Добавьте любой текст в тэг параграфа. Пишите все, что вам хочется. Например:

?

1	<p>Копирайт © 2009 <?php bloginfo('name'); ?></p>

Сохраните файл и обновите браузер. Вот результат:

© — это код, который используется для отображения значка копирайта. Также вспомните функцию bloginfo(), которую вы использовали чтобы связать хедер. Я снова использовал ее, уже для футера. Функция ‘name‘ вызывает название блога, ‘url‘ вызывает адрес.

Кроме того, если вы хотите, чтобы год менялся автоматически, здесь можно применить маленькую хитрость. Вместо «2009″ вставьте этот код:

?

1	<?php echo date('Y'); ?>

И теперь год будет меняться автоматически, подставляя время сервера. Также если вы хотите, чтобы заголовок блога был ссылкой попробуйте вспомнить как это сделать самому или посмотрите как мы делали это в хедере.