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

29.04.2010 | Рубрики: 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>

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

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

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

  1. Marina 04.05.2010

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

    Ответить

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

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

    Ответить

  3. Sergio 07.05.2010

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

    Ответить

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

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

    Ответить

  5. Marina 16.05.2010

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

    Ответить

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

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

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

    Ответить

  7. Marina 25.05.2010

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

    Ответить

  8. Den 22.06.2010

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

    Ответить

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

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

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

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

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

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

    Ответить

  10. Den 23.06.2010

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

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

    Ответить

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

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

    Ответить

  12. Hayk 10.09.2010

    zdrastvuyte, pomagite pojalusta mne razabratsa koe chem, KAk mojna zdelat wordpress na Armyanski yazik ruchnuyu ne perevadya vse slava?

    Ответить

  13. Игорь Квентор 19.09.2010

    Hayk, для автоматического перевода текстов блога на различные языки есть соответствующие плагины. Однако не берусь утверждать, что там был и армянский язык. Вот, к примеру, такой плагин http://wordpress.org/extend/plugins/sitepress-multilingual-cms/ Попробуйте

    Ответить

  14. Андрей 03.02.2011

    Здравствуйте, Игорь! Прочитал статью. Согласен, что со старыми темами проще работать. Я вот установил новую тему,в исходном коде нет H1 тега. Смотрел в header.php, там все функции вывода указаны, а в исходном не выводятся! Вообщем пока решил эту проблему следующим образом. В панели админа есть настройки темы. В настройках есть блоки для вывода дополнительных скриптов в header и в footer. Я прописал HTML код в с названием блога, вставил в блок header и у меня теперь выводится H1. Только смущает один момент, что он выводиться на всех страницах. Как это может повлиять на поисовиков не знаю. Время покажет.

    Ответить

  15. Руслан 19.05.2011

    Здравствуйте Игорь.
    Подскажите мне одну деталь в шаблоне от wordpress.За ваши теги спасибо большое я их установил успешно.Теперь у меня выводятся страници,но проблема другая выплыла.Если делаешь запись в рубрику а потом еще запись в эту же рубрику то когда с главной страници переходишь в эту самую рубрику,почему то загружается с последней записи.А первая запись переходит на задний план.В итоге появляется последняя запись с нижней ссылкой слева на предыдущую.Задом на перед получается.Скорей всего так и должно быть,но хочется на оборот.Было бы замечательно размещать так очень большую статью.Если не затруднит вас,то как это можно исправить???

    Ответить

    Игорь Квентор

    @Руслан, нужно забраться в файл archive.php, найти там строку:

    <?php if (have_posts()) : ?>

    и вставить перед ней такую конструкцию:

    <? query_posts($query_string . "&orderby=date&order=ASC") ?>

    Ответить

  16. Руслан 19.05.2011

    Еще один вопрос.Можно ли сделать так чтобы на страницах работал тег далее <>
    Так можно сделать только в записях.И еще хотелось бы чтобы на одной и тойже странице после статьи вставить тег далее,потом продолжение стать и на этой же странице после тега далее написать новую статью.И снова сделать тег далее и остальной текст статьи.
    В первом коментарии я задал вопрос на такую же тему но только о записях в рубрике.

    Ответить

    Игорь Квентор

    @Руслан, зачем городить огород? Для этого как раз и существуют посты. А страницы нужно использовать для статичной инфы.

    Ответить

  17. Руслан 20.05.2011

    Здравствуйте Игорь.Огромное вам спасибо,теперь у меня рубрики загружаются с первой записи.Можно очень много инфы туда залить.Но у меня есть еще вопрос.В файл single.php я добавил вот такие строчки
    Следующая запись:
    Предыдущая запись:
    для внутренней перелинковки страниц.Так как с вашей помощью теперь рубрика начинается с первой записи,но вот перелинковка работает на оборот.Гружу рубрику и слева снизу выводится текст Предыдущая страница.Как мне это исправить?Я пробовал менять в этих строчках положение тегов итд но ничего не помогло.

    Ответить

  18. Руслан 20.05.2011

    Подгрузил сейчас на реальный сайт ваши теги и рубрика начинается с первой записи.Только листается на оборот с права на лево. « Предыдущие записи>> видны снизу слева.Просмотрите на моем сайте если вас не затруднит.Помогите исправить.Огромное вам спасибо еще раз.

    Ответить

  19. Руслан 20.05.2011

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

    Ответить

  20. Татьяна Татьяновна 08.07.2011

    Игорь добрый день!
    Я 2 недели назад открыла для себя Word press установила тему и не могу разобраться с разрывом страницы, тег more не работает, рвет статью, а открывает без продолжения. Думала проблемы в теме. поменяла 5 тем, в каждой одно и тоже, то ошибка 404, то знаки ???. Подскажите куда ткнуться! Очень прошу!!! Начать не могу, спотыкаюсь на простом)))

    замените в index.php

    на

    может это поможет, но где его менять)))

    Ответить

    Игорь Квентор

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

    Ответить

Трэкбеки

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