12 Ноябрь 2010

SEO-верстка под WordPress. Часть 5

Верстка под WordPress 

В предыдущих видеоуроках, посвященных верстке под WordPress, мы завершили все подготовительные работы: установили необходимые плагины, набросали дизайн-макет будущей темы в Photoshop (кстати, с желающими посмотреть процесс отрисовки красивого дизайн-макета я хочу поделиться ссылкой на 2-х часовой видеоурок на английском языке).

Теперь переходим непосредственно к верстке.

Видеоурок

Видео записано в режиме HD, так что смело смотрите его на полный экран.

Первая часть:

Скачать первую часть видеоурока с народного диска (34,3 МБ, *.flv)

Вторая часть:

Скачать вторую часть видеоурока с народного диска (14,8 МБ, *.flv)

 

Текстовое описание

Cсылки на предыдущие части видеокурса:

Темы в WordPress одеваются на движок, как новая одежда из платяного шкафа. Роль платяного шкафа исполняет папка wp-content/thems внутри которой лежат отдельные папки с файлами тем. Каждая папка с файлами — это отдельная тема или новая одежка для нашего блога.

По умолчанию в свежескачанном движке присутствует только одна тема под названием twentyten.

Содержимое папки с темой блога WordPress

Внутри данной темы множество файлов, с предназначением которых мы сейчас познакомимся.

Файлы темы и их предназначение

Основных файлов в папке с темой всего 2-а: index.php и style.css.

  • В index.php указан HTML и PHP-код страниц блога.
  • В style.css задается внешний вид отображаемой информации.

Этих 2-х файлов вполне достаточно для формирования всех страниц блога.

Однако, если мы хотим задать особенный вид для страницы, например, архива – нам потребуется создать дополнительный файл archive.php в папке с активной темой. Когда посетитель будет выбирать ссылку, ведущую на страницы архива, движок, в первую очередь, попытается отыскать файл archive.php и взять оттуда правила отображения страниц архива; если файл archve.php не найден, то правила отображения будут считаны из файла index.php.

Имена других файлов отображения особенных страниц вы можете прочитать на стр.1 шпаргалки по WordPress от Антона Шевчука, которую я скачал здесь.

Приступим к разработке нашей собственной темы

В папке wp-content/thems создадим новую подпапку, название которой будет являться названием нашей темы. Я назвал новую тему moya-tema.

Новая тема и ее содержимое

В папке moya-tema создаем два необходимых файла style.css и index.php.

Теперь, перейдя в админку блога на страницу Внешний вид/Темы, я смогу увидеть только что созданную заготовку moya-tema.

Содержимое раздела Темы движка WordPress

Я даже могу ее активировать. Но делать это еще слишком рано, т. к. после активации темы moya-tema внешний вид публичной части превратится в белый лист.

Приступим к редактированию пустых файлов style.css и index.php.

Если вы смотрели мои видеоуроки по блочной div-верстке сайта, то должны знать, что style.css используется для описания внешнего вида элементов веб-страницы (цвета шрифта, размера блоков и т. д.). С внешним видом мы будем разбираться позже, сейчас нужно хоть что-то вывести на белый лист новой темы. Для этого займемся файлом index.php.

Открываем index.php в любом текстовом редакторе и пишем заголовок:

<h1>Новый блог</h1>

Если тема moya-tema активна, то результат не заставит себя ждать:

Вывод статического текста

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

Делается это очень просто.

В движке WordPress предусмотрены определенные кодовые выражения, которые позволяют динамически формировать контент блога.

Самое важное из этих выражений — петля. Сейчас мы с ней познакомимся.

Вот ее код:

<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<?php endwhile; ?>
<?php else: ?> <p>Ничего не найдено</p>
<?php endif; ?>

Первая строка кода if(have_posts()) проверяет наличие материалов, доступных для показа. Например, посетитель перешел на главную страницу блога и доступными для показа оказались 10-ть свежих постов – в этом случае оператор if(have_posts()) вернет значение ИСТИНА и программа продолжит свое выполнение со строки номер 2. Если же материалов для отображения не окажется – функция вернет значение ЛОЖЬ и выполнение программы будет продолжено с 4-й строки.

Код второй строки while (have_posts()) : the_post() можно перевести на русский язык следующим образом: взять первый материал из доступных для показа и работать с ним, потом взять второй и т. д. покуда есть необработанные материалы. Иными словами, это цикл в каждой итерации которого происходит работа с одним из постов блога.

Третья строка endwhile закрывает цикл.

Если в первой строке кода функция have_posts() вернула значение ЛОЖЬ, то будет обработана четвертая строка с оператором else:, которая выведет абзац текста Ничего не найдено.

Пятая строка endif закрывает условный оператор, который был открыт в первой строке кода.

Надеюсь, что вы все поняли. Ничего более сложного нам не встретится.Бвшм

Петля в WordPress

Теперь нам нужно усвоить еще один важный момент: код, написанный между строками 3 и 4 будет иметь отношение к конкретному посту, который на данной итерации цикла while вернула функция the_post().

Модифицируем код файла index.php, добавив между 3-й и 4-й строкой функцию вывода заголовка поста the_title(), функцию вывода ссылки на пост the_permalink(), и функцию вывода содержимого поста the_content().

Вывод содержимого поста

В браузере получим следующее:

Результат

У поста есть спонсор (как стать спонсором):

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

С уважением, Андрей Морковин.