Здравствуйте уважаемые читатели блога wmbn.ru! Сегодня публикую третью часть записи из темы Структура шаблона WordPress и его составляющих файлов. В предыдущих постах мы рассмотрели Способы установки шаблона на WordPress, его обобщенную структуру и принцип работы файла index.php, а первая запись темы была о Редактировании шаблонов на WordPress, в частности касалась она DynaBlue и как удалить с нее блок карусели. Еще раз скажу, что знать структуру шаблонов для WordPress надо, так как это избавляет от многих проблем при редактировании структуры сайта, добавляя на него блоки кнопок с социальными сетями, подписками, комментариями и прочими дополнениями. По крайней мере при получении ошибки вы точно будете знать, что сделали не правильно и как данную ошибку исправить.

Сайдбар и запись - составляющие файлы шаблона WordPress

Конкретно будут проанализированы два составляющих файла — это single.php (Одна запись — отвечает за вывод статей как на главной странице, так и в самом посте) и sidebar.php (Сайдбар — правая или левая колонка сайта, на которой обычно устанавливают навигацию, подписку на e-mail рассылку, счетчики и т.д.). Попробуем манипулировать с записями, их выводом на страницу, изменив немного код файла single.php и немного зададим для них свой стиль, чтобы придать тексту читабельный вид — все это делается в файле single.php, а сам стиль задается файле style.css. Так же посмотрим код файла sidebar.php, как в нем формируются виджеты и как задать новый или изменить старый стиль для сайдбара.

Файл single.php — структура и редактирование кода

Приступим подробному рассмотрению файла single.php (Одна запись), который отвечает за представление записей на страницах сайта. Найти его можно в Редакторе в меню Внешний вид на панели администратора. Так же файлы можно редактировать с помощью встроенного редактора в панели управления хостингом Parallels Plesk Panel и любых других панелей, либо загрузить файл с сервера с помощью FileZilla или расширением для Firefox и затем открыть файл в редакторе (рекомендуется Notepad). Открыв файл любым из этих способов начнем изучение его исходного кода, структуру и принцип работы и загрузки постов на страницу (заголовки, описания и сами посты).

По стандарту в файл загружается заголовок (get_header), проверка наличия постов и последующая их загрузка, и загрузка подвала сайта (get_footer). После получения и загрузки заголовка идет следующий код на HTML:

<?php get_header(); ?>
<div id="content_single" class="narrowcolumn">

Блок div — представляет информацию в том стиле, который указан для него в файле style.css, т.е. content _single (дословно переводится как единичный контент). Если посмотреть через Firebug данный блок вывода записей, то оказывается, что он является частью (скорее расположен в нем) более емкого блока body_left, который содержит в себе еще body_left_content. Последний отвечает за оформление блока, на котором расположен контент, собственно в нем и сделана белая подложка для повышения читабельности текста. Что же касается content_single, то в файле style.css ему прописан следующий стиль:

#content_single {
	text-align: center;
	width:96%;
	padding:10px 0 10px 0;
	margin:30px 0 0 25px;
	}

Как может показаться на первый взгляд, то весь текст по идее должен выравниваться по центру, однако это зависит не только от того, что написано для создания стиля контенту, так же в файле style.css присутствуют другие стили и не только для тега div, что уже говорит о том, что изменив один стиль не значит изменение всего контента. К примеру я мучился с тегом h3, который ни в какую не изменялся под код — пришлось искать все участки, где он упоминался и только тогда получилось присвоить ему определенный созданный стиль.

Далее, ширина блока (width) 96%, но не сказано откуда он берет данную ширину. От всего сайта не получится, так как он был бы на много больше того, что можно сейчас видеть. Скорее всего это основной блок, который расположен слева. Padding и Margin задают контенту выравнивание как внутри блока (для текста отступы от основных границ, чтобы он не заезжал на них), так и от всего левого блока в целом. Изменив данные параметры данных селекторов (операторов) в CSS, то можно получить желаемый вид всех записей на блоге.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-top">
<div class="post-title">

Начинается проверка наличия постов и загрузка их на страницу с помощью PHP кода — проверка происходит с помощью оператора условия if, если он получил положительный ответ, то происходит загрузка постов с помощью цикла while (пока имеются записи) и их вывод на страницу. Затем создаются три блока — post, для которого присваивается свой ID с помощью того же PHP кода. Затем формируется верхняя часть поста, в которую входят данные о публикации (категория присвоенная для записи, автор поста (может быть не только администратор, время публикации) и Заголовок статьи, которые находятся в блоке post-title.

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>">
<?php the_title(); ?></a></h2>
<h3>
Опубликовано в : <?php the_time('d-m-Y') ?> | Автор : <span><?php the_author() ?></span>
| В рубрике : <span class="post_cats"><?php the_category(', ') ?></span>
</h3>

А теперь разберемся с этим участком кода файла шаблона single.php — то, что заключено в теге h2 создает для заголовка поста ссылку на страницу с записью, предварительно задав ей адреса из категорий и title. Далее в теге h3 публикуются данные о записи, т.е. дата публикации в формате день (d), месяц (m) и год (Y). Затем указывается автор поста и рубрика, присвоенная для записи, которые так же загружаются с помощью PHP кода.

В моем случае я убрал дату публикации и автора, так как посчитал эту информацию не особо важной, ну и еще была парочка соображений. Насчет даты публикации — ее можно с легкостью менять на другой вид, заменив лишь буквы в (‘d-m-Y’) или в настройках WordPress в меню Параметры перейти на страницу Общие настройки, где задается вид из готовых вариантов. Можно использовать следующие буквы, которые имеют свое представление даты и времени:

  1. Y — год в том формате, котором мы привыкли видеть, т.е. полный формат с 4 цифрами;
  2. y — год в формате с двумя последними цифрами;
  3. F — полное название месяца;
  4. M — сокращенное название месяца;
  5. m — выводятся месяца в цифровом формате;
  6. d — день в виде 01-31;
  7. j — день месяца без нуля впереди;
<h4><?php comments_number('0', '1', '%'); ?></h4>
</div>
<div class="entry">
<?php the_content('Читать полностью &raquo;'); ?>

Ну тут все довольно просто — в первой строке идет загрузка количества комментариев. Затем в блоке entry отображается сама запись. Если запись показана на главной странице, то она будет обрезана до основания анонса (небольшое размышление по поводу Катового вопроса), конечно если вы укажете это в настройках или сами определите, где будет отрезана запись.

<?php comments_template(); ?>
<?php endwhile; else: ?>
<p>Ничего не найдено!</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>

И завершающий участок кода в файле single.php, который формирует записи на страницу. Первая строка отвечает за вывод и структуру комментариев к посту (строки для указания информации о комментарии, древовидная структура и т.д.), затем завершается цикл while и if. В случае не нахождения записей в базе данных сайта, то пишется ответ Ничего не найдено. И в конце загружается подвал сайта (footer).

Файл sidebar.php — боковая колонка шаблона WP

Перейдем к более интересной части (как мне показалось) данной записи — файл sidebar.php. Данный файл формирует боковую колонку сайта (как слева, так и справа — в зависимости от шаблона), в которой обычно показаны различные формы подписки, баннеры, виджеты Twitter и Facebook, категории и прочая информация, которую нужно показать на каждой странице сайта. На простых сайтах боковая колонка служит навигацией — меню с различными пунктами. Но иногда можно встретить такую навигацию в блогах на WordPress, когда в сайдбар помещается произвольное меню, в котором обычно указывают ссылки на страницу Автора или О сайте.

Удобно сделано в WordPress добавление различных виджетов и форм (допустим подписки на почтовую рассылку — feedburner или smartresponder) через панель администратора — все как в системе Drupal, только в ней можно управлять всем шаблоном, а не только его частью. Добавляются такие расширения в меню Внешний вид — Виджеты. На странице все довольно удобно расположено — блок с виджетами установленными, каталогом (не установленными) и удаленными. Чтобы установить виджет на сайдбар достаточно перетащить его и настроить, если у него есть свои параметры. Для установки баннера или формы подписки нужен виджет Текст, в который копируем исходный код объекта.

Давайте рассмотрим структуру кода файла sidebar.php и его принцип работы:

<div id="sidebar" class="sidebars">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ){
?>

Как обычно создается блок с id sidebar, который добавляет стиль для данного блока, затем идет участок кода, который отвечает за добавление и изменение сайдбара, т.е. за добавление на него виджетов. Если данного кода не будет или виджеты не будут расположены, то в этом случае будет выполнятся код, который расположен ниже:

<?
} else { ?>
<li class="widget_categories">
<h2>Рубрики</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
</ul>
 </li>
<li class="widget_archives"><h2>Архивы</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li class="widget_archives"><h2>Благодарность</h2>
<ul>
<li><? ?>

Получается следующее — если шаблон не поддерживает дополнение виджетами или на нем не установлен ни один виджет (все это указано в условии if), а затем после else (иначе) выводятся все, что указано в коде (Рубрики блога, Архивы и Благодарность, которая непонятно кому была присвоена, возможно создателям шаблона или его переводчикам).

А теперь немного о стиле сайдбара и как ему придать внешний вид с помощью CSS. На своем шаблоне я нашел более 20 упоминаний сайдбара в файле style.css, но основным оказался данный участок кода:

#sidebar{
	width:268px;
	margin:10px 0 0 1px;
	color:#303030;

Задается ширина, выравнивание относительно сайта и цвет. Заголовки каждого виджета задаются в блоке .sidebars h2, а составляющие элементы (подрубрики, записи) представлены с помощью списка тегами ul li, которые разделены между собой .sidebars .widget_tags p — в нем указано выравнивание для каждого абзаца внутри документа, в нашем случае блока. Осталось еще много стилей для каждого участка, но в основном они схожи.

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

Комментариев: 4

  1. West Blogger

    В Вордпресс действительно очень хорошо придумали с подобной разбивкой кода на составляющие. Во всяком случае интуитивно все понятно.

    В других движках и ЦМСках используют примерно такие же принципы

  2. ярослав

    здравствуйте!не могу найти в файле single.php код который отвечает за заголовок статьи страницы который в вашем примере заключен в тег h2 , шаблон темы easel, подскажите как быть?! Могу прислать саму одиночную запись

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>