Настройка шаблонов страниц в WordPress — урок 23

- Николаенко Максим · Опубликовано 11 января, 2015 · Обновлено 27 августа, 2020

Шаблоны страниц в WordPress добавлять очень просто, если необходимо стилизовать шаблон для всех страниц, то можно в корне темы создать файл page.php. Создадим файл и поместим туда код из файла single.php. Шаблон создан, далее можно будет убирать и добавлять что-то свое (новые элементы оформления, дополнительные сайдбары, меню …).

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

wordpress create page themplate

О странице portfolio мы поговорим позднее, а сейчас попробуем сделать шаблоны для отдельных страниц, тех которые мы потом сможем выбирать в панели администратора.

Если нам нужно сделать шаблон для отдельной станицы, то можно использовать специальный комментарий. Этот комментарий является меткой для wordpress, которая указывает, что файл является произвольным шаблном.

<?php
/*
Template Name: example
*/
?>

<?php

Template Name: example

Давайте попробуем начать по порядку создавать наши шаблоны для страниц.

В корне вашей темы есть файл с именем onecolumn.html, переименуем его на tmp-onecolumn.php, приставку tmp мы добавляем, чтобы в дальнейшем не путаться где шаблоны страниц, а где другие файлы. После переименования файла, добавьте в верхнюю часть шаблона комментарий вида:

<?php
/*
Template Name: One column
*/
?>

<?php

Template Name: One column

wordpress create first themplate - курсы по wordpress

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

wordpress create top area - курсы по wordpress

создать нижнюю часть шаблона - курсы wordpress

Для того чтобы шаблон начал работать мы должны указать для какой именно страницы его необходимо применить. Заходим в панель администратора -> Страницы -> about и выберем новый шаблон и обновим страницу.

Выбор шаблона на странице wordpress

Вы можете посмотреть, как выглядит страница в текущем виде но она еще не выводит данных, только выводит содержимое шаблона tmp-onecolumn.php. Давайте вместе укажем, что и где мы будем выводить в шаблоне.

Заменяем содержимое тега <section> на код который мы уже использовали в шаблоне page.php, а именно на вот такой:

								<!-- Main Content -->
								<?php if ( have_posts() ) { 
									while ( have_posts() ) : the_post();
									?> 
									<section class="is-post is-post-excerpt" <?php post_class(); ?> id="post-<?php the_ID(); ?>">
										<header>
											<h2 class="entry-title"><a title="<?php echo the_title_attribute( 'echo=0' ); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><br />
											<span class="date">
												<span class="month"><?php the_time('M'); ?></span>
												<span class="day"><?php the_time('j'); ?></span>
												<span class="year"><?php the_time('Y'); ?></span>
											</span>
										</header>
										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</div>
										<?php the_content(); ?>
										<br clear="all">
									</section> 
									<div id="single-nav" class="clearfix"> 
										<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>
										<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>
										<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>
										<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>
									</div>
									<!-- /single-nav -->
									<?php endwhile; ?>
								<?php } ?>

<?php if ( have_posts() ) {

while ( have_posts() ) : the_post();

</span>

</header>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php if ( has_post_thumbnail() ) {

the_post_thumbnail();

} ?>

</a>

</div>

<?php the_content(); ?>

</section>

<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>

<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>

</div>

<?php endwhile; ?>

<?php } ?>

Далее если мы посмотрим на вывод материала, то увидим, что текст на странице сдвинут вправо, хотя миниатюру мы еще не вставляли, этот момент надо исправить везде где мы использовали вывод миниатюры.

Видоизменим код вывода миниатюры

Меняем вот этот код:

										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</div>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php if ( has_post_thumbnail() ) {

the_post_thumbnail();

} ?>

</a>

</div>

На вот такой:

										<?php if ( has_post_thumbnail() ) { ?>
										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
													<?php the_post_thumbnail(); ?>
											</a>
										</div>
										<? }  ?>

<?php if ( has_post_thumbnail() ) { ?>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php the_post_thumbnail(); ?>

</a>

</div>

<? } ?>

До изменения кода.

wordpress страница без картинки

После изменения кода.

Я думаю, из изображений приведенных выше понятно, о каком исправлении шла речь. Исправьте также вывод миниатюры в файлах archive.php, single.php и page.php самостоятельно.

Удачи в разработке сайтов, будьте на связи, я еще расскажу много интересного. В следующем уроке я расскажу, как выводить раздел блога на отдельной странице.

Исходники текущего урока