Кастомные шаблоны для страниц сайта на WordPress

Введение

Файл page.php призван отображать разметку для всех страниц (но не записей) сайта, в результате чего все страницы имеют одинаковую структуру. Однако часто появляется необходимость в том, чтобы одна или несколько страниц были размечены по разному. Эту проблему можно решить несколькими способами.

В этой статье мы рассмотрим три варианта отображения различной разметки для определенных страниц.

В качестве примера, будем выводить форму обратной связи для условной страницы Контакты в первых двух вариантах и рекламный баннер для третьего варианта.

Вариант #1: С помощью условий через оператор if

Используя оператор if и функцию is_page() можно задать условие, при котором будет выводится определенный контент или изменятся разметка.

В параметре функции is_page() нужно указать ID или slug страницы. В нашем примере, страница Контакты имеет ID = 12 и slug = "contacts".

Чтобы узнать ID или slug страницы или поста, воспользуйтесь данными глобальной переменной $post. Например, echo $post->ID для ID и echo $post->post_name для slug.

Откроем файл page.php и вставим следующее условие в необходимом месте разметки.

<?php
    // Добавляем содержимое файла header.php 
    get_header();
?>
<div class="main">
<div class="content">
    <div class="post common-page">
        <?php the_post(); // Получаем данные о странице ?>
        <article class="common-page__article">
            <h1 class="common-page__title"><?php the_title(); // Заголовок страницы ?></h1>
            <?php the_content(); // Выводим содержимое страницы ?>
        </article>

        <?php if (is_page("contacts")){ // Добавляем форму для страницы с именем contacts ?>
            <div class="contact-mail">
                <div class="contact-mail__title-wrapper">
                    <span class="contact-mail__title">Напишите нам</span>
                </div>
                <form action="sendmail.php" class="contact-mail__form">
                    <input class="contact-mail__name" type="text" placeholder="Ваше имя">
                    <input type="text" class="contact-mail__email" placeholder="Ваш email">
                    <textarea class="contact-mail__msg" placeholder="Сообщение"></textarea>
                    <input type="submit" class="contact-mail__submit">
                </form>
            </div> <!-- .contact-mail -->
        <?php } ?>

    </div> <!--.post.common-page-->
</div> <!--.content-->
</div> <!--.main -->
<?php
    // Добавляем содержимое файла footer.php 
    get_footer();
?>

<?php

// Добавляем содержимое файла header.php

get_header();

<?php the_post(); // Получаем данные о странице ?>

<?php the_content(); // Выводим содержимое страницы ?>

</article>

<?php if (is_page("contacts")){ // Добавляем форму для страницы с именем contacts ?>

<span class="contact-mail__title">Напишите нам</span>

</div>

</form>

</div>

<?php } ?>

</div>

</div>

</div>

<?php

// Добавляем содержимое файла footer.php

get_footer();

В результате, только при запросе страницы Контакты мы увидим форму обратной связи. На всех остальных страницах форма отображаться не будет.

Вывод формы на странице с помощью условия и функции is_page(). — Вывод формы на странице с помощью условия и функции is_page()

Если вы хотите проверять в условии несколько страниц, то вместо оператора if, воспользуйтесь условной конструкцией case.

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

Вариант #2: Файл-шаблон для определенной страницы

В большинстве случаях, устанавливать уникальную разметку, отличную от других страниц, удобнее в отдельном файле-шаблоне.

Файл-шаблон создается в корне темы и должен называться по следующей формуле: page-(slug).php.

Создадим отдельный шаблон для страницы Контакты с выводом формы обратной связи, как это было сделано в первом варианте. Т.к. slug страницы имеет значении contacts, то файл будет называться следующим образом - page-contacts.php.

Внутрь файла скопируем содержимое page.php и добавим в него форму обратной связи.

<?php
    // Добавляем содержимое файла header.php 
    get_header();
?>
<div class="main">
<div class="content">
    <div class="post common-page">
        <?php the_post(); // Получаем данные о странице ?>
        <article class="common-page__article">
            <h1 class="common-page__title"><?php the_title(); // Заголовок страницы ?></h1>
            <?php the_content(); // Выводим содержимое страницы ?>
        </article>
    <div class="contact-mail">
        <div class="contact-mail__title-wrapper">
            <span class="contact-mail__title">Напишите нам</span>
        </div>
        <form action="sendmail.php" class="contact-mail__form">
            <input class="contact-mail__name" type="text" placeholder="Ваше имя">
            <input type="text" class="contact-mail__email" placeholder="Ваш email">
            <textarea class="contact-mail__msg" placeholder="Сообщение"></textarea>
            <input type="submit" value="Отправить" class="contact-mail__submit">
        </form>
    </div> <!-- .contact-mail -->
    </div> <!--.post.common-page-->
</div> <!--.content-->
</div> <!--.main -->
<?php
    // Добавляем содержимое файла footer.php 
    get_footer();
?>

<?php

// Добавляем содержимое файла header.php

get_header();

<?php the_post(); // Получаем данные о странице ?>

<?php the_content(); // Выводим содержимое страницы ?>

</article>

<span class="contact-mail__title">Напишите нам</span>

</div>

</form>

</div>

</div>

</div>

</div>

<?php

// Добавляем содержимое файла footer.php

get_footer();

Подобным образом можно создать шаблон для любой страницы, главное соблюдать правило именования файлов, например для страницы с именем about файл шаблон будет называться page-about.php.

В названии файлов, помимо имени (slug) страницы, можно также использовать ее ID, например page-14.php

Вариант #3: Файл-шаблон для нескольких страниц

Если вы хотите использовать один и тот же шаблон для нескольких страниц, то вам необходимо создать файл, который именуется по формуле: (name)-template.php.

В самом файле обязательно нужно указать имя шаблона, оно будет отображаться в общем списке шаблонов.

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

Создадим файл с именем adpage-template.php

И вставим в него следующий код. Обратите внимание на 3 строку, в ней указывается имя шаблона.

<?php
/*
Template name: Доп. рекламный блок
*/
    // Добавляем содержимое файла header.php 
    get_header();
?>
<div class="main">
<div class="content">
    <div class="post common-page">
        <?php the_post(); // Получаем данные о странице ?>
        <article class="common-page__article">
            <h1 class="common-page__title"><?php the_title(); // Заголовок страницы ?></h1>
            <?php the_content(); // Выводим содержимое страницы ?>
        </article>
        <div class="ad-banner">
            <a href="#">
                <img src="img/london-theater-tour.jpg" alt="Реклама London Theater Tour">
            </a>
        </div>
    </div> <!--.post.common-page-->
</div> <!--.content-->
</div> <!--.main -->
<?php
    // Добавляем содержимое файла footer.php 
    get_footer();
?>

<?php

Template name: Доп. рекламный блок

// Добавляем содержимое файла header.php

get_header();

<?php the_post(); // Получаем данные о странице ?>

<?php the_content(); // Выводим содержимое страницы ?>

</article>

</a>

</div>

</div>

</div>

</div>

<?php

// Добавляем содержимое файла footer.php

get_footer();

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

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

Вывод рекламного блока в файле-шаблоне adpage-tempalte.php

Шаблоны страниц и записей в WordPress

Как изменить дизайн страницы авторизации в WordPress