29
04
10

Конструктивные элементы шаблона Wordpress | Файл index.php | Часть 1

Рубрики: WordPress
Тэги: ,

wplogo.gifПродолжим рассматривать содержимое файлов шаблона Wordpress. Сегодня на повестке дня файл index.php.

Для начала замечу, что в некоторых темах этот файл используется как универсальный, выводящий как главную страницу блога, так и некоторые другие. В иных темах главную страницу может выводить файл home.php, а index.php все остальные. Про иерархию файлов такого типа можно прочитать в Кодексе.

Мы же будем рассматривать конкретно файл index.php, условившись, что именно он выводит главную страницу блога — так называемую “ленту постов”. При этом каждый отдельный пост будет выводиться, соответственно, файлом single.php, архив — при помощи файла archive.php, статичные страницы — файлом page.php и, наконец, страница ошибок — файлом 404.php. Это стандартный набор обычного шаблона. Всякие монструозные наборы рассматривать не будем.

Поехали!

В прошлый раз мы рассмотрели файл header.php, в который по обыкновению сразу же включают верхнее меню вывода статичных страниц. Однако этот файл должен быть к чему-то привязан, как деталь в конструкторе. Такой “сборной площадкой” как раз и служит файл index.php. Если посмотреть на его структуру упрощенно, то выглядеть он будет так:

<?php get_header(); ?> / Подключается шапка

<div id=”content”>
Здесь код, выводящий посты блога со всеми плюшками…
</div>

<?php get_sidebar(); ? > / Подключается сайдбар

<?php get_footer(); ? > / Подключается подвал

Все достаточно просто. Код подключения деталей шаблона <?php get_имя_файла(); ? > является универсальным для всех шаблонов Wordpress. Но не для абы каких деталей, а именно для шапки, сайдбара и подвала. Если вы напишете что-то вроде <?php get_bablo(); ? >, то ничего хорошего из этого не выйдет, так как движок ВП не знает такой команды get_bablo.

Именно поэтому, если вам нужно включить в шаблон дополнительную деталь, то следует воспользоваться иным способом подключения. Рассмотрим, к примеру, как включить в шаблон сразу 2 сайдбара:

<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Здесь конструкция <?php include(TEMPLATEPATH.”/имя_файла.php”);?> является еще более универсальной и может быть применена к любому дополнительному файлу, лежащему в этом же шаблоне. Причем это может быть не только php файл, а и любой текстовый. Например, текст про автора или про сам блог.

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

Сразу после включения шапки идет часть кода, называемая иначе луп (loop):

<?php if (have_posts()) : while (have_posts()) : the_post(); ? > / Начало лупа

тут много всякого, что, по сути, и составляет содержимое поста со всеми деталями

<?php endwhile; else: ? >
<p><?php _e(’Извините, но того, что вы ищете, здесь увы нет.’); ? > </p>
<?php endif; ? > / Конец лупа

Кто крутил шарманку какого-либо музыкального семплера или баловался с программой Cakewalke, тот уже наверняка слышал, что такое луп. Для тех, кто не в танке: это повторяющаяся часть чего-либо, чаще всего закольцованная.

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

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

В пределах лупа, как уже говорилось, лежит содержимое самого поста.

Во-первых, это заголовок. Если вы возьмете любую буржуйскую тему, то увидите что-то вроде этого:

<h2><a href="<?php the_permalink() ? >" title="Permanent Link to <?php the_title(); ? >" > <?php the_title(); ? > </a></h2>

Как видим, это заголовок второго уровня (h2) и он одновременно служит ссылкой на отдельную страницу с данным постом. Кажущаяся “навороченность” кода на самом деле расшифровывается достаточно просто:

<?php the_permalink() ? > — эта часть создает непосредственно ссылку на ваш пост вида: http://www.ваш_сайт.ru/название-поста. Хвост этой ссылки будет зависеть от ваших настроек ЧПУ и используемых плагинов (типа rus-to-lat).

<?php the_title(); ? > — ничто иное как сам заголовок поста. Здесь эта конструкция повторяется дважды: как описание ссылки (title) и как ее непосредственный текст.

Кстати, по той простой причине, что мы с вами все-таки русскоязычные блоггеры и пишем заголовки соответственно по-русски, то я бы рекомендовал избавиться от словосочетания Permanent Link to. Означает оно просто “Постоянная ссылка на”. Быть может в буржуйских блогах она уместна, но когда в наших блогах всплывает что-то вроде “Permanent Link to Как нагадить соседу бесплатно”, то выглядит это, мягко говоря, бестолково.

В некоторых шаблонах заголовки постов почему-то выводятся тэгом первого уровня h1. Это на самом деле неправильно. На странице может быть только один заголовок первого уровня. Вообще идеальным было бы сделать на стартовой странице блога заголовком первого уровня название самого блога вместе с кратким описанием, а на страницах отдельных постов именно заголовок поста первым уровнем. Но это кому как угодно.

Далее, после заголовка часто выводится ID поста в виде такой конструкции:

<div class="post" id="post-<?php the_ID(); ? >" >

И если с классом все понятно (его оформление вы задаете в листе стилей css), то id=”post-<?php the_ID(); ? > автоматом подставляет ID поста. По-другому его можно назвать внутренним порядковым номером поста.

Следом обычно выводится дата написания поста:

<?php the_time('M d, Y') ? >

Все, что находится в круглых скобках, это кодовая запись php-шных календарно-временных данных. В указанном примере дата будет выведена следующим образом: сокращенное наименование месяца (Янв., Фев., Март), день месяца из двух цифр (01) и год из четырех цифр (2010).

Можно как угодно видоизменять данную запись. Вот еще несколько значений:

j — день месяца цифрами без нуля впереди (1, 2, 5, 12)
S — английский суффикс порядкового числительного типа 2nd, 12th. В русскоязычных блогах не имеет смысла
m — цифровое обозначение месяца (01, 12)
n — цифровое обозначение месяца без нуля впереди (1, 12)
y — две последние цифры года
h — 12 часовой формат времени (01, 12), часы
H — 24 часовой формат времени (01, 24), часы
g — 12 часовой формат времени без нуля впереди (1, 12), часы
G — 24 часовой формат времени без нуля впереди (1, 24), часы
I — минуты (00, 59)

Все коды можно найти в онлайн руководствах по php. Например, здесь.

Что можно сделать еще с этим выводом даты, кроме изменения формата чисел и написания названий месяцев? Ну, например, можно построить такую пирамидку:

<?php the_time('M<br />
d, <br />
Y') ? >

или такую:

<?php the_time('M') ? >
<?php the_time('d') ? >
<?php the_time('Y') ? >

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

<div class="month"><?php the_time('M') ? ></div>
<div class="day"><?php the_time('d') ? ></div>
<div class="year"><?php the_time('Y') ? ></div>

Продолжение следует…

Оставайтесь на связи! :)

rss Подпишитесь на RSS


Комментарии (11)

  1. Marina 04.05.2010 20:00

    Игорь, здравствуйте!
    Подскажите, пожалуйста.
    Пыталась в шаблоне Вордпресса сделать нестандартный шрифт, с помощью свойства
    @font-face {
    font-family: Torhok Italic;
    src: url(Torhok Italic.ttf);
    }
    который прописывала в style.css, но ничего не получается. Может быть я что-то не правильно делаю? ДО перевода сайта на вордпресс всё работало и нормально загружалось. Что дополнительно нужно прописать для Вордпресса?
    Заранее спасибо

  2. Игорь Квентор 06.05.2010 09:27

    Здравствуйте, Марина!
    Не видя сайта, сказать по какой причине это не работает я не могу. С адресацией ничего не напутано? (src: url(Torhok Italic.ttf);)

  3. Sergio 07.05.2010 14:37

    Игорь здравствуйте! Попытался в поиске по Вашему сайту найти как обновить свой Wordpress до более новой версии, но не нашел, если на этом сайте есть такая статья, возможно я неправильно вводил запросы, подскажите где, если еще нет, опишите пожалуйста подробно, как это сделать!

  4. Игорь Квентор 11.05.2010 17:25

    Sergio, такой статьи нет по одной простой причине: я не увлекаюсь новыми версиями ВП, меня вполне удовлетворяет движок трех летней давности

  5. Marina 16.05.2010 01:14

    Игорь, ещё раз здравствуйте!
    На ВП шрифт так не получился. Там ещё пара проблем возникли с выводом комментариев, поэтому буду искать в чем причина, а пока сайт вернула на обычный хтмл.
    Но и там снова всё не слава Богу. На одной из страниц (вот тут: http://stroganova-e.ru/page_2.html) у меня есть несколько заголовков с показать/скрыть текст и полосой прокрутки. Полоса и скрытый текст реализованы с помощью jQuery.
    Но скрытый текст отказывается правильно работать :-(((…
    Во-первых, он всплывает на несколько секунд и убирается снова,
    во вторых, запоминается первоначальная высота блока и он при раскрытии не удлиняется (так получается даже если не использовать jQuery)поэтому невозможно полностью прочитать весь скрытый текст.
    Может быть подскажите в каком направлении мне нужно что-то сделать, или дополнительно что-то почитать. Ничего найти самой не удалось. Одна не смогла побороть данную проблему. Помогите, пожалуйста…
    Заранее спасибо

  6. Игорь Квентор 25.05.2010 23:05

    Здравствуйте, Марина!

    Давайте эту темку обсудим в будущих постах про jQuery? Все таки текущий пост не об этом :)

  7. Marina 25.05.2010 23:17

    Хорошо, тогда буду ждать новых тем :-)

  8. Den 22.06.2010 22:02

    Подскажите, как сделать вывод комментариев от нового к старому? А не от старого к новому, как сейчас.

  9. Игорь Квентор 22.06.2010 23:14

    Развернуть комментарии задом наперед (свежие вверху, старые внизу) достаточно просто: находим в файле comments.php следующую строку:

    <?php foreach ($comments as $comment) : ?>

    и перед ней добавляем вот такой код:

    <?php $comments = array_reverse($comments, true); ?>

    Еще можно воспользоваться плагином Comment Sorter, который делает тоже самое и еще парочку полезных фишек.

  10. Den 23.06.2010 13:23

    Спасибо большое за оперативные советы!
    Установил Comment sorter из-под админки настроил и всё работает отлично.

    Спасибо за твой блог, много полезного и объясняешь доступно, забил в закладки.

  11. Игорь Квентор 23.06.2010 15:13

    Вэлкам, Den! Рад, что смог чем-то помочь

Трэкбеки

Оставить комментарий