Шаблон страницы WordPress. Полное руководство

Сайтостроение WordSmall

шаблон страниц вордпресс

Не так давно был опубликован мануал о создании шаблона для категорий. Он носил характер знакомства на начальном этапе, но также включал в себя и практические примеры. Хотелось бы продолжить это направление, только уделить внимание страницам. Материал по данной теме является многофункциональным, то есть очень большим. Поэтому затруднительно будет открыть все возможности шаблона страниц в одной статье. Но по меньшей мере постараемся затронуть косвенные детали и, конечно, главные параметры.

Иерархия страниц

Иерархия – это означает последовательность от вышей ступеньки до самого низа, или наоборот. В нашем случае это же порядок авторитетности шаблонных файлов для страницы. Когда пользователь попадает на одну из ваших страниц, то WordPress показывает ее содержимое исходя из варианта создания страниц (подробнее ниже).

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

page-slug.php – шаблон с названием страницы (ярлыка). Если пользовательский шаблон не был указан, то WordPress использует данный тип в качестве основного.

page-id.php – уникальный идентификатор страницы.

page.php – стандартный файл, отвечающий за содержимое страниц.

index.php – индексный файл. Если WordPress не найдет ни одного из выше перечисленного шаблона, то по умолчанию ответственный за страницы станет именно он.

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

Создание пользовательского шаблона для массового использования

Есть несколько вариантом создания шаблона со своими плюсами и минусами, почти незначительными. Этот вариант, который сейчас мы рассмотрим, является самый распространенный. Первым делом необходимо создать файл php или продублировать стандартный page.php. После чего сохранить его под другим именем, к примеру, templates_my.php. Затем вверху файла добавить комментарий:

<?php /* Template Name: Любое название */ ?>

Следующим действием загрузите файл в вашу тему, перейдите в админ-панель во вкладку «Страницы-Добавить новую» или можете открыть существующею. В атрибутах страницы выберете какой шаблон будет использоваться на этой странице.

атрибуты

Если вдруг у вас не окажется панели «Атрибуты страницы» тогда просто поставьте галочку в настройках экрана верхнем правом углу, чтобы ее отобразить.

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

Совет. Шаблон, созданный таким способом, может быть расположен в подпапке текущей темы. Тем самым не занимая лишнего места и создавая компактный вид.
Важно. Не используйте префикс page- в качестве названия шаблонной страницы. Так как WordPress будет интерпретировать файл как специализированный, что однозначно применяется только к одной странице.

Специализированные шаблоны страниц

Второй способ предназначен только для определенных страниц без исключения. Приведем пример по старой схеме. Допустим, у вас есть страница с названием «Портфолио», по умолчанию ее ярлык транслируется в английское слово «portfolio». Это можно увидеть в настройках «Страницы-Свойства». Теперь просто дублируем файл page.php и переименовываем в page-portfolio.php.

С идентификатором создается точно так же, только вместо ярлыка подставляется ID страницы. Он находится в адресной строке, раздел «Страницы-Изменить» выглядит так post=9. Таким же макаром дублируется стандартный файл и переименовывается в page-9.php.

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

Практический пример создания шаблона страниц

Сейчас для примера создадим шаблон на основе первого варианта и изменим в нем цикл, добавив вывод категорий с записями. Открываем любой редактор, добавляем ниже представленный код, сохраняем под названием template_my.php, загружаем на сервер.

  <?php
        /**
        Template Name: шаблон для примера
        **/
        get_header(); ?>
    <!-- основной контейнер -->
    <div class="my_main">
    <ul class="page_cat">
        <h2>Категория-1</h2>
    <!-- определение категории и количество записей -->
    <?php $the_query = new WP_Query('cat=2&showposts=7'); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
    <!-- заголовок записи -->
    <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 33,"...") ?></a>
    </li>
    <?php endwhile; ?>
    <!-- функция для правильной работы условных тегов -->
    <?php wp_reset_query(); ?>
    </ul>
        
        <ul class="page_cat">
        <h2>Категория-2</h2>
    <!-- определение категории и количество записей -->
    <?php $the_query = new WP_Query('cat=28&showposts=7'); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
    <!-- заголовок записи -->
    <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 33,"...") ?></a>
    </li>
    <?php endwhile; ?>
    <!-- функция для правильной работы условных тегов -->
    <?php wp_reset_query(); ?>
    </ul>
        
        <ul class="page_cat">
        <h2>Категория-3</h2>
    <!-- определение категории и количество записей -->
    <?php $the_query = new WP_Query('cat=15&showposts=7'); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
    <!-- заголовок записи -->
    <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 33,"...") ?></a>
    </li>
    <?php endwhile; ?>
    <!-- функция для правильной работы условных тегов -->
    <?php wp_reset_query(); ?>
    </ul>
    </div>
    <!-- функция вывода футера -->
    <?php get_footer(); ?>

Теперь нужно прописать стили в файле style.css


.my_main {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    padding: 15px;
        background: #fff;
        width:1000px;
}

.page_cat {
    margin: 0 9px 20px;
    padding: 15px;
        vertical-align: top;
    width: 28%;
        display: inline-block;
}

.page_cat h2 {
    color: #676767;
    font: bold 18px arial;
    margin-bottom: 20px;
}

.page_cat li a {
    text-decoration: none;
    color: #2879af;
        display: block;
}

.page_cat li {
    margin-bottom: 6px;
    padding: 3px 3px 3px 10px;
        display: block;
}

.page_cat li a:hover {
   text-decoration: underline;
}
.page_cat li:nth-child(2n) {
         background: #f7f7f7;
}

Осталось сделать одно: в админ-панели во вкладке «Страницы-Изменить» указать в атрибутах страницы наш ранее созданный шаблон «шаблон для примера».

Результат.

резултат шаблона

Условные теги страниц

В заключительном пункте рассмотрим несколько условных тегов. Прописываются они в стандартном файле page.php.

Вывод элементов на определенных страницах

<?php if(is_page(18)):?>
<img src="<?php bloginfo('template_url'); ?>/images/img.png"/>
<?php elseif (is_page(9)):?>
<img src="<?php bloginfo('template_url'); ?>/images/img.jpg"/>
<?php elseif (is_page(44)):?>
<img src="<?php bloginfo('template_url'); ?>/images/img.jpg"/>
<?php elseif (is_category(7)):?>
<img src="<?php bloginfo('template_url'); ?>/images/img.jpg"/>
<?php endif;?>
<?php if ( is_page(18))
        {
                echo '<div id="block">Рекламный блок</div>';
        }
?>
<?php
        if ( is_page(16) || is_page(11)) {
                echo '<div id="block">вывод информации</div>';
        }
?>
<?php
        if ( is_page(22))  {
                echo '<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>';
        }
?>

Источник: https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code