Урок №5. Страница записи будущей темы WordPress.

За страницу записи отвечает файл - single.php. В нем тоже выводится цикл, но содержимое отличается от того что было в прошлом уроке.Вставим код в наш файл и готовый single.php нашей темы будет выглядеть так:

<?php get_header(); ?>
<div id="primary">
<div class="entry-breadcrumb"><?php the_breadcrumb() ?></div>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<div class="content_block">
<?php the_post_thumbnail(); ?>
<h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<ul class="dop_info">
<li><?php echo get_the_date("d M Yг"); ?></li>
<li>Рубрика: <?php the_category(', ') ?></li>
</ul>
<div class="content_text"><?php the_content(); ?></div>
<div class="tags"><?php the_tags(); ?></div>
<?php edit_post_link(__('Редактировать')); ?>
<?php comments_template(); ?>
</div>
<?php endwhile; else: ?>
<?php include(TEMPLATEPATH . '/404.php');?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

Давайте разберем по порядку. По сути, до вывода текста записи, строки те же что и в файле content.php, но все же повторим.

• Подключаем шапку get_header();
• Сначала контейнер - primary
• Потом подключаем крошки the_breadcrumb()
• Далее начинается цикл have_posts
• Содержание записи заключаем в блок content_block
• Функция миниатюры - the_post_thumbnail();
• Заголовок записи - h1
• Блок с рубрикой и датой - dop_info
• Блок с текстом записи - content_text
• Функция вывода меток - the_tags();
• Кнопка редактировать для администратора - edit_post_link
• Функция вывода комментариев - comments_template();. Мы будем пользоваться стандартной формой комментариев, которая идет с движком WordPress по умолчанию. Можно создать свои комментарии, но это уже совсем другая тема, для начала вполне хватит и стандартной формы.
• Далее идет завершения цикла вывода и подключение 404 страницы на всякий случай.
• В самом конце подключаем подвал функцией - get_footer();

Как обычно зададим стили для тех элементов, которым мы еще их не задали.

/*Метки*/
.tags{width:100%;font-size:12px;color:#777;}
/*Редактировать запись*/
.post-edit-link{margin-left:590px;}
/*Комментарии*/
.comments{font-weight:bold;color:#333;}
.comments-list ul,.comments-list ol{list-style:none;}
.comments-list{margin:18px 0 0;}
.comments-list li{list-style:none;}
.comment-body{margin-top:15px;border:1px solid #dedede;position:relative;}
.comments-list .children{margin:0 0 0 40px;}
.comments-list .children .children{margin:0;}
.comment-author{margin:4px 0 0 20px;color:#888;font-size:11px;}
.date_comments{font-size:11px;}
.fn{font-style:normal;font-weight:bold;font-size:14px;color:#008fed;}
.avatar{padding:2px;float:left;margin:0 5px 0 0;}
.commentmetadata{font-size:11px;color:#888;padding:3px 0 0;}
.commentmetadata a{color:#888;text-decoration:none;position:absolute;top:5px;right:80px;}
.comment-edit-link {color:#888;text-decoration:none;margin-right:-70px;}
.commentmetadata a:hover{color:#5CB934;text-decoration:underline;}
.comment-body p{margin-left:20px;font-size:14px;color:#444;}
.reply{margin:0 10px 10px 15px;font-size:11px;}
.children{margin-left:20px;}
.children .children{margin:0;}
/*Форма добавления комментариев*/
#respond{margin-top:25px;padding:20px 20px 10px;position:relative;z-index:2;border:1px solid #dedede;}
#respond input[type="text"],#respond textarea{border: 1px solid #ddd;position:relative;padding:10px;height:100px;}
#respond  label{color:#444;position:relative;}
#respond  p.comment-form-comment {color:#777;font-size:12px;}
#respond input[type="text"]:focus,#respond textarea:focus{text-indent:0;}
#respond textarea{resize:vertical;width:95%;}
#respond .comment-form-author .required,
#respond .comment-form-email .required{color:#bd3500;font-size:22px;font-weight:bold;}
#respond .comment-notes,#respond .logged-in-as{font-size:13px;}
#respond p{margin:10px 0;}
#respond .form-submit{float:right;margin:-24px 0 10px;}
#respond .form-submit input{margin:20px 0;}
#respond .logged-in-as{font-size:13px;color:#777;}
 #respond .logged-in-as a:hover,#respond #cancel-comment-reply-link:hover{text-decoration:underline;}
.commentlist #respond{margin:1.625em 0 0;width:auto;}
#reply-title{color:#333;font-size:18px;letter-spacing:-1px;line-height:15px;font-weight:bold;}
#cancel-comment-reply-link{display:block;font-size:12px;font-weight:normal;line-height:2.2em;letter-spacing:-1px;position:absolute;right:1.625em;text-decoration:none;text-transform:uppercase;top:1.1em;}
#respond label{line-height:1.5em;}
#respond input[type=text]{display:block;height:15px;width:95%;}
#respond p{font-size:12px;}

Стилей много, но они только к 4 элементам - метки, кнопка редактировать, комментарии и форма отправки комментариев. Теперь, когда Вы нажмете на главной, на название записи или на кнопку - читать далее, перед Вами откроется страница на которой будет выведена запись. Легче, чем в предыдущем уроке с главной страницей? 🙂 Но это еще не конец урока! Теперь нам нужно еще заполнить файл, отвечающий за вывод страницы - page.php.
Открываем его и вставляем в него следующий код:

<?php get_header(); ?>
<div id="primary">
<div class="entry-breadcrumb"><?php the_breadcrumb() ?></div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="content_block">
<h1 class="post_title"><?php the_title(); ?></h1>
<div class="content_text"><?php the_content(); ?></div>
<?php edit_post_link(__('Редактировать')); ?>
</div>
<?php endwhile; else: ?>
<?php include(TEMPLATEPATH . '/404.php');?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

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