Внутренние страницы на WordPress

Для создания внутренних страниц сайта на CMS WordPress нам нужно создать в папке нашей темы PHP файл - template-page.php (как правило я его делаю через хостинг), который будет отвечать за шаблон внутренних страниц.

template-page.php

Содержание файла template-page.php

<?php
/**
 * Template name: Внутренняя страница
 */

get_header();
?>





	<div class="container-page-001 overlay-black" style="background-image: url();">
		<div class="container-page-001-content">
			<div class="container-page-001__maintitle">
				<p class="container-page-001__maintitle-txt">
					<?php wp_title("", true); ?>
				</p>
				<p class="container-page-001__maintitle-desctxt">
					Описание если нужно
				</p>
			</div>
			<div class="container-page-001__breadcrumbs-group">
			<nav aria-label="breadcrumb">
				<ul class="breadcrumb">
				<li class="breadcrumb-item"><a class="B_homeCrumb" href="">Главная</a></li>
				<li class="breadcrumb-item"><a class="B_homeCrumb" href="">Страница</a></li>
				</ul>
                        </nav>
			</div>
		</div>
	</div>





	<div class="container-page-002">
		<div class="container-page-002-content" style="flex-direction: column; text-align: justify;">
			<?php the_content(); ?>
		</div>
	</div>





<?php
get_footer();

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

Далее добавляем стили для внутренних страниц, переходим в файл styles.css нашей верстки и в самый конец добавляем стили и адаптацию.

Вот это нужно добавить

/*СТИЛИ ДЛЯ ВНУТРЕННИХ СТРАНИЦ*/
.container-page-001 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    width: 100%;
    padding: 100px 0 0 0;}
.container-page-001-content {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;}
.container-page-001__maintitle {
    padding: 15px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;}
.container-page-001__maintitle p.container-page-001__maintitle-txt {
    margin: 0;
    font-family: Alaskan;
    line-height: 1;
    font-size: 35px;
    color: #ffffff;
    text-transform: uppercase;}
.container-page-001__maintitle p.container-page-001__maintitle-desctxt {
    margin: 30px 0 0 0;
    font-family: Alaskan;
    line-height: 1;
    font-size: 18px;
    color: #ffffff;}
.container-page-001__breadcrumbs-group {
    display: flex;
    justify-content: flex-start;}
.container-page-001__breadcrumbs-group ul.breadcrumb {
    padding: 0 10px;
    background-color: transparent;
    margin: 0;}
.container-page-001__breadcrumbs-group li.breadcrumb-item a {
    font-family: Alaskan;
    font-size: 18px;
    color: #ffffff;}
.breadcrumb-item+.breadcrumb-item::before {
    font-family: Alaskan;
    content: "/";
    font-size: 18px;
    color: #ffffff;}



.container-page-002 {
    background-color: #ffffff;
    flex-grow: 1;}
.container-page-002-content {
    background-color: #ffffff;
    width: 1200px;
    margin: auto;
    padding: 35px 10px 35px 10px;
    text-align: justify;}



@media (max-width: 1200px) {
.container-page-001-content {
    width: 100%}
.container-page-002-content {
    width: 100%}}



@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}
@media (max-width: 400px) {}

Далее переходим в WordPress на "страницы" и создаем новую - "Страница". Она пустая, с шаблоном Внутренней страницы что мы создали.

На этом все, теперь только правим стили CSS, разметку HTML и добавляем нужные нам элементы и блоки.

Так же мы можем сделать выбор фона для каждой страницы, который будет браться из параметра страницы "Изображение страницы". Для этого разместим вот такой код

Пример:

	<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
	<div class="container-page-001 overlay-black" style="background-image: url(<?php echo $image[0]; ?>);">

Пример шаблона для внутренних страниц WordPress

Приведем еще один пример шаблона для внутренних страниц WordPress.

template-page.php

<?php
/**
 * Template name: Внутренняя страница
 */

get_header();
?>





	<div class="uk-page-001">
		<div class="uk-page-001-content uk-margin-auto">
			<div class="uk-page-001-bannerblock uk-page-001-katalog-bannerblock uk-flex uk-flex-column uk-flex-between" style="background-image: url(/wp-content/themes/dostavkaelki/assets/images/mainfon_page.jpg);">
			<div class="uk-page-001-title">
			<h1 class="uk-page-001-title-maintext"><?php single_post_title(); ?></h1>
			</div>
			</div>
		</div>
	</div>





    <div class="uk-page-002">
		<div class="uk-page-002-content uk-margin-auto" style="text-align: justify;">
            <?php the_post(); the_content(); ?>
        </div>
    </div>





    <div class="uk-002">
		<div class="uk-002-content uk-margin-auto">
            <p class="uk-002-maintext">ВАМ МОГУТ ПОНРАВИТСЯ</p>
			<div class="uk-002-items uk-grid-medium uk-flex-center" uk-grid>

				<?php	//query_posts('cat=25' . '&orderby=rand' . '&showposts=2');
				query_posts(
				array( 'post_type'=>'page', 'post__in' => array( 130, 127, 123, 98 ), 'showposts'=>'2', 'orderby'=>'rand' )
				);
				while (have_posts()) : the_post();
				?>
				<div class="uk-002-items-itm uk-width-1-2@s uk-width-1-1">
					<a class="uk-002-items-itm-link" href="<?php the_permalink(); ?>">
						<?$banner = get_field('banner');?>
						<img class="uk-002-items-itm-link-img" src="<?=$banner;?>" alt="" uk-img>
					</a>
				</div>
				<?php
				endwhile;
				wp_reset_query();
				?>

			</div>
		</div>
	</div>





    <div class="uk-separator"></div>





<?php
get_footer();