Изменение цикла и сайдбара в стандартной теме

В данной статье мы несколько абстрагируемся от jQuery и покажем, каким образом можно изменить отображение записей в цикле. Помимо этого, мы также внесем некоторые интересные коррективы в сайдбар.

Изменение цикла

Очень часто разработка сайта ведется для конкретных клиентов, которые выставляют собственные требования к визуальному представлению и функционированию проекта. Опытный дизайнер должен знать, насколько важна каждая мелочь, ведь именно такие, казалось бы, незначительные на первый взгляд вещи порой играют первостепенную роль. Мы будем исходить из предположения, что сайт заказчика включает в себя множество записей, написанных различными авторами. В данном контексте очень важно не только подчеркнуть имя автора, чтобы оно было различимо и удобочитаемо, но и изящно представить дату публикации записи. Я уверен, что вы видели в блогах небольшой календарь или iCash-иконки рядом с материалами. Все это, как мне кажется, является отличным способом компактно разместить информацию о времени публикации записей.

С помощью свободно распространяемого векторного редактора с открытым исходным кодом IncSkape я сделал иконку, стилизованную под календарь. В верхней части иконки будет располагаться день, а в нижней — три буквы месяца. Размеры изображения составили примерно 32х32 пикселей. Вместо incSkape вы можете использовать любой другой графический редактор по своему усмотрению — GIMP, Photoshop, Illustrator и т.д. Самые ленивые могут скачать уже готовые варианты иконок в Сети.

Для того чтобы установить созданный календарный фон в тему и отформатировать вывод даты, нам понадобится изменить цикл. Откроем файл loop.php и найдем в нем строку <div class=»entry-meta»>.

Для начала закомментируем вызов произвольной PHP функции twentyten_posted_on и добавим на ее место следующий фрагмент кода:

...
<div>
<?php //twentyten_posted_on();//comment this out ?>
<small>
<?php the_time('d') ?&gt;<br/>
<span><?php the_time('M') ?></span>
</small>
</div><!-- .entry-meta -->
...

Дата выводится на экран с помощью тега шаблона the_time. Формат представления даты может регулироваться различными параметрами, передаваемыми в тег шаблона.

Нам необходимо вывести день (число) и месяц (трехбуквенная аббревиатура). Параметры тега the_time не позволяют добавлять фрагменты HTML кода, поэтому нам придется собирать дату «по частям», с помощью двух отдельных вызовов the_time. Также нужно удостовериться, что выбранный стиль отображения будет применяться только в данном цикле, исключая любые другие вхождения HTML тега <small>. Для этого мы создали произвольный класс date для тегов <small>, расположенных в цикле. Помимо всего прочего, мы обернули вывод месяца в тег <span>, что позволит нам получить дополнительный контроль над его представлением. В итоге мы пришли к следующему фрагменту кода:

...
 <small>
 <?php the_time('d') ?><br/>
 <span><?php the_time('M') ?></span>
 <!-- by <?php the_author() ?>-->
 </small>
 ...

Теперь откроем файл style.css и добавим в него стилевые правила, отвечающие за вывод даты на экран. Для начала мы установим отступ 40px в заголовках h2, чтобы оставить место под дату. Затем мы поднимем дату на 25px вверх, чтобы она находилась вровень с заголовком. Также мы применим различные стилевые правила для цвета, размера и некоторых других параметров отображения даты.

В итоге стили будут выглядеть следующим образом:

...
/*----------twentyten chapter 3 customizations------------*/
.home .post .entry-title{
padding-left: 40px;
}
.post small.date{
display:block;
background: url(images/dateBackground.png) no-repeat;
margin-top: -25px;
padding-top: 4px;
width: 32px;
height: 32px;
font-size: 20px;
line-height: 12px;
text-align: center;
color: #eee;
}
.post small.date span{
font-size: 10px;
color: #666;
}
...

Результат можно увидеть на следующем скриншоте:

Неплохо, не правда ли?

Изменение сайдбара

Работа с сайдбаром будет на порядок проще. Все, что мы сделаем — это немного изменим представление списков.

Откроем файл sidebar.php в редакторе. Для того чтобы применить определенные стили к сайдбару, нам понадобится добавить новый класс. Назовем его .currentsidebar. Этот класс необходимо применить к спискам ul, которые принадлежат к классу «xoxo»: <ul class=»xoxo»>. Ищем указанную конструкцию в файле sidebar.php (она встретится два раза — приблизительно на 12 строке и на 51) и вносим в нее следующие изменения:

...
<ul class="xoxo currentsidebar">
...
<ul class="xoxo currentsidebar">
...

Теперь откроем файл style.css и внесем в него стили, отвечающие за представление класса .currentsidebar:

...
.currentsidebar li{
    padding: 0;
    margin: 15px 0 20px 0;
}
.currentsidebar li ul li{
    list-style: none;
  padding: 5px 0; margin: 0 0 0 -15px; border-bottom: 1px solid #ddd;
  font-size: 105%;
}
...

Результат показан на скриншоте.