Для создания внутренних страниц сайта на CMS WordPress нам нужно создать в папке нашей темы 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.
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();