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

що, що вийшло можна подивитися на прикладі будь-якої раніше створеної сторінки, я натиснув на сторінку portfolio і ось як вона тепер виглядає.

Про сторінку portfolio ми поговоримо пізніше, а зараз спробуємо зробити шаблони для окремих сторінок, тих, які ми потім зможемо вибирати в панелі адміністратора.

Якщо нам потрібно зробити шаблон для окремої станиці, то можна використовувати спеціальний коментар. Цей коментар є міткою для wordpress, яка вказує, що файл є довільним шаблоном.

<?php
/*
Ім'я шаблону: приклад
*/
?>

Спробуймо почати по порядку створювати наші шаблони для сторінок.

У корені вашої теми є файл на ім'я onecolumn.html, перейменуємо його на tmp-onecolumn.php, приставку tmp ми додаємо, щоб надалі не плутатися де шаблони сторінок, а де інші файли. Після перейменування файлу, додайте у верхню частину шаблону коментар виду:

<?php
/*
Ім'я шаблону: Один стовпець
*/
?>

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

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

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

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

								<!-- Основний зміст -->
								<?php if ( have_posts() ) { 
									Хоча ( have_posts() ) : the_post();
									?> 
									<клас розділу="is-post is-post-excerpt" <?php post_class(); ?> id="пост-<?php the_ID(); ?>">
										<заголовок>
											<h2 клас="запис-заголовок"><заголовок="<?php echo the_title_attribute( 'echo=0' ); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><Бр />
											<клас span="дата">
												<клас span="місяць"><?php the_time('М'); ?></проліт>
												<клас span="день"><?php the_time('j'); ?></проліт>
												<клас span="рік"><?php the_time('Y'); ?></проліт>
											</проліт>
										</заголовок>
										<клас div="великий палець">
											<a href="<?php the_permalink(); ?>" клас="зображення-повне зображення">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</див.>
										<?php the_content(); ?>
										<br clear="увесь">
									</розділ> 
									<ділення id="однонава" клас="клірфікс"> 
										<клас div="Попередня"><?php next_post_link('%link', '<проліт>%title</проліт>', false); ?></див.>
										<клас div="наступний"><?php previous_post_link('%link', '<проліт>%title</проліт>', false); ?></див.>
										<клас div="Попередній адаптивний"><?php next_post_link('%link', '<проліт>Попередній</проліт>', false); ?></див.>
										<клас div="Наступний адаптивний"><?php previous_post_link('%link', '<проліт>Наступний</проліт>', false); ?></див.>
									</див.>
									<!-- /однонавна -->
									<?php endwhile; ?>
								<?php } ?>

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

Мініатюра мого вихідного відеокодеку

Змінюємо ось цей код:

										<клас div="великий палець">
											<a href="<?php the_permalink(); ?>" клас="зображення-повне зображення">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</див.>

На ось такий:

										<?php if ( has_post_thumbnail() ) { ?>
										<клас div="великий палець">
											<a href="<?php the_permalink(); ?>" клас="зображення-повне зображення">
													<?php the_post_thumbnail(); ?>
											</a>
										</див.>
										<? }  ?>

До зміни коду.

Після зміни коду.

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

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

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