Налаштування шаблонів сторінок у 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 створити першу платівку - Курси Wordpress

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

wordpress створити верхню область - Курси Wordpress

створити нижню частину шаблону - курси wordpress

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

Вибір шаблону на сторінці Wordpress

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

Замінюємо вміст тега <розділ> на код, який ми вже використовували в шаблоні 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 самостійно.

Успіхів у розробці сайтів, будьте на зв'язку, я ще розповім багато цікавого. У наступному уроці я розповім, як виводити розділ блогу на окремій сторінці.

Вихідники поточного уроку