WordPress для каждого на русском языке!

Вторник, 9 июня 2009 - Создание тем

Итак, это уже пятый урок курса «Создание тем для WordPress». Наверное, это уже не стоит говорить, но все же в последний раз напомню - не забудьте прочесть предыдущие уроки перед тем, как рассматривать следующий. Иначе, вы ничего не поймете. Сегодня на этом кратком уроке мы подытожим все, что узнали о шаблоне хедера и ознакомимся с блоковой версткой.

Шаг 1:

• запустите сервер Apache
• откройте папку с вашей темой, под именем Tutorial
• откройте браузер, зайдите на http://wordpress/
• вернитесь в папку с темой, откройте файл index.php в редакторе

Шаг 2:

На данном этапе вы должны увидеть:

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

Добавьте <h1> и </h1> в начале и в конце строки. Тэг <H1> означает заглавие №1. Вообще, существует 6 заглавий: Н1, Н2, Н3, Н4, Н5 и Н6. По умолчанию, Н1 - самый большой по размеру тэг, а Н6 - самый маленький.
Теперь строка кода выглядит так:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

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

Шаг 3:

Вызовите описание вашего блога, напечатайте <?php bloginfo('description'); ?> сразу под кодом ссылки на заголовок. Должно получиться так:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>

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

<?php - начало PHP;
bloginfo('description') - вызвать информацию о моем блоге, в частности описание;
; - прекратить вызов описания;
?> конец PHP.

Шаг 4:

этот шаг ознакомит вас с новым тэгом - DIV.
Напечатайте <div> и </div> в начале и в конце всего, что уже есть в файле. Вот так:

<div>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>

Сохраните это, обновите окно браузера. Вы не должны увидеть каких-либо изменений.

Представьте, что DIV - это невидимый блок. Он существует для того, чтобы отделить ссылку на заголовок блога и описание блога от всего остального. Если вы не оформляете его, он не исполняет никаких функций, кроме разделения контента. Позже, вы научитесь использовать файл style.css для придания невидимому блоку собственного стиля. DIV можно оформить границами, текстурами, полями, фоновыми цветами, картинками и прочим.

Шаг 5:

Добавьте id="header" к тэгу DIV, вот так:

<div id="header">

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

Это изменение также пока ни к чему не приведет. Мы присвоили ID тэгу DIV, потому что тот тэг не будет единственным - появятся еще такие же невидимые блоки. А ведь нужен способ, чтобы как-то их разграничить, так? Об этом в следующих уроках.

Перейти к следующему уроку »