» » » Шаблоны страниц для WordPress
logotip

Шаблоны страниц для WordPress

Всем привет! Сегодня на seo-mayak.com я расскажу, как создавать индивидуальные шаблоны страниц для WordPress.

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

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

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

shablony stranitc

Все дело в том, что стандартный редактор WordPress TinyMCE не хочет выполнять php коды, да и скрипты, написанные на JavaScript, при сохранении записи или при смене режима редактора, превращает в «фарш».

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

Из данной статьи Вы узнаете, как создать шаблоны: для главной страницы и для статической страницы (page). Сразу скажу, что есть два способа создания шаблонов страниц:

Способ №1. Создается файл с произвольным названием и подключается к теме через админ-панель WordpRess.

Способ №2. Создается файл с названием, соответствующим иерархии шаблонов WordPress.

Теперь давайте разберем оба способа более подробно.Поехали!

Как создать шаблон страницы. Способ №1

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

Создаем новый файл с расширением .php. Лично я для создания и редактирования файлов использую редактор Notepad++, что и Вам советую.

Открываем редактор и во вкладке «Файл» выбираем пункт «Новый»:

shablony stranitc1

Затем в той же вкладке «Файл» жмем на строчку «Сохранить как»:

shablony stranitc2

Сохраняем файл в выбранную папку под произвольным названием.

shablony stranitc3

Главное, чтобы название файла состояло англ. символов и включало в себя одно цельное слово или несколько слов разделенных дефисом. Например:
mayak.php
mayak-home.php
Обязательно поставьте расширение .php, иначе шаблон работать не будет.

Итак, у нас есть пустой файл, который надо превратить в шаблон главной страницы.

Прежде всего файл надо пометить. Для этого в самое начало вставляем следующий код:

<?php
/*
Template Name: mayak-home
*/
?>

Тем самым мы укажем WordPress, что файл с названием mayak-home надо считать шаблоном (у Вас конечно может быть другое название).

Далее нам необходимо сформировать страницу в соответствии с дизайном Вашего сайта. Процесс очень схожий с созданием страницы с ошибкой 404.

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

Вот пример:



<!--Выводим шапку-->
<?php get_header(); ?>

<!--Индивидуальные стили шаблона. У Вас они скорее всего отличаются-->
<div id="content">
<div id="postarea">
<div class="homepage_post">
<div class="homepage_in">
<div class="post">

<!--Заголовок страницы-->
<h2>Здесь должен быть заголовок</h2>

<!--Какой-то текст-->
<p>Здесь может быть текст, но это не обязательно</p>

<!--Код вывода миниатюр на главной-->
<div class="katalog">
<ul><?php query_posts('showposts=20'); ?> <!--Цифра 20 - количество миниатюр-->
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
<!--Конец кода вывода миниатюр-->

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

<!--Код вывода сайдбара-->
<?php get_sidebar(); ?>
</div>
<!--Конец индивидуальных стилей-->

<!--Код вывода подвала-->
<?php get_footer(); ?>

Конечно варианты наполнения могут быть разные. Идем дальше.

Как подключить шаблон страницы через админ-панель WordPress

Итак, шаблон страницы мы создали, теперь надо его подключить. Для этого с помощью FTP клиента закидываем созданный файл в корень темы, туда, где находятся файлы header.php, single.php, footer.php и т.д.

Далее идем в админку WordPress, Страницы -> Добавить новую и с правой стороны, в блоке «Атрибуты страницы», в пункте «Шаблон» выбираем название созданного файла:

shablony stranitc4

Далее заполняем поле «Заголовок страницы». Если мы делаем главную страницу, то заголовок можно сделать такой:

shablony stranitc6

Жмем кнопку «Опубликовать» и смотрим что получилось. А получится следующее:

shablony stranitc7

У нас теперь две главных страницы, но это не беда, сейчас мы это дело поправим.

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

Снова идем в админку и следуем Настройки -> Чтение. На открывшейся странице, в пункте «На главной странице отображать» ставим галочку возле строчки «Статическую страницу»:

shablony stranitc8

И ниже, в пункте «Главная страница», выбираем название «Главная»:

shablony stranitc9

Сохраняем изменения и вуаля, у нас новая главная страница.

Создание шаблона страницы. Способ №2

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

Известно, что в большинстве шаблонов за вывод главной страницы отвечает файл index.php, а за вывод статических страниц — файл pade.php.

Но не все знают, что у файла index.php есть «старший брат» — файл home.php, который в «глазах» WordPress имеет белее высокий приоритет. Т.е, если в шаблоне будут находится оба вышеперечисленных файла, то WorsPress отдаст право выводить главную страницу именно файлу home.php. Вот такие дела.

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

У файла page.php, что отвечает за вывод статических страниц, также есть «родня» и в этой «семейке» иерархия файлов имеет еще более сложную логику.

Допустим нам надо создать шаблон статической страницы с уникальным дизайном или функционалом и заголовок у данной страницы допустим будет «Каталог товаров».

В админке WordPress создаем новую страницу, вписываем заголовок и если у нас настроены ссылки ЧПУ, то в поле «Постоянная ссылка», URL страницы будет выглядеть так:

shablony stranitc10

Далее, в корне темы создаем файл с таким названием:

page-katalog-tovarov.php

Наполняем файл, подобно файлу page.php, но уже с нужными нам стилями и функционалом. Далее идем в админку и опубликовываем пустую страницу.

WordPress будет считать шаблоном данной страницы именно файл page-katalog-tovarov.php, а все остальные страницы будут как прежде выводится файлом page.php. Надеюсь понятно, но это еще не все.

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

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

Разработчики WordPress видимо предусмотрели такую ситуацию. В том случаи, если WordPress не сможет обнаружить файл в названии которого присутствует окончание постоянной ссылки, то следующим объектом его поиска станет файл, в названии которого будет ID страницы (читайте, как определить ID страницы). Например такой:

page-3201.php

Понятно, что ID остается неизменным при смене URL адреса страница, поэтому такой способ создания шаблона считается более безопасным.

Но что будет, если WordPress не сможет обнаружить оба вышеперечисленных файла? В этом случаи вся ответственность за отображение страницы возляжет на файл page.php и если и такового не будет найдено, то WordPress обратится к файлу index.php.

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

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

На этом все. Как вам статья?

До встречи!

C уважением, Виталий Кириллов

« Шаблоны для категорий WordPress. Как сделать каталог из рубрики
« Индивидуальные шаблоны записей

Комментарии: 8

  1. Роман:

    Доброго времени.
    Помогите разобраться для СЕО:
    -есть ли разница между страницами и записями в вордпресс?
    -Если есть «карта сайта» то все страницы автоматом 2-3 уровня?
    -есть разница при продвижении уровень страницы?
    -Как менять содержимое(наполняемость не автоматически а в ручную) рубрики( вордпресса) чтобы внести туда свои данные!?
    Заранее благодарен Белоусов РОман

    Ответить
    • Виталий Кириллов:

      Здравствуйте Роман!
      1. С точки зрения SEO разницы между статическими страницами и записями нет.
      2. Уровень страницы, определяется количеством кликов (переходов), относительно главной страницы. Главная страница всегда имеет первый уровень вложенности.
      3. Да имеет значение, так как поисковые роботы плохо индексируют страницы с уровнем вложенности ниже третьего.
      4. По четвертому вопросу я не совсем понял. Куда вы хотите внести изменения, на страницу с рубриками или в меню рубрик?

      Ответить
  2. Сергей:

    Добрый день. Сделал все как написано, но все равно 2 кнопки главной страницы. Что делать? Заранее спасибо.

    Ответить
    • Виталий Кириллов:

      Сергей, значит что-то не сделали.

      Ответить
  3. Василий Цубера:

    Спасибо за толковую статью, нашел то, что искал! Еще раз человеческое спасибо!

    Ответить
  4. Remo:

    То что искал, решил разработать главную страницу, отличную от блогового вида, то есть будет статичная с кучей всяких примочек!
    Автор такой еще вопрос — можно как то оптимизировать и также менять страницу категорий? Ну например у меня есть там список статей которые идут друг за другом (аля главная страница), можно как то ее оптимизировать? Добавить ключевые слова, вставить картинки и т.д.?

    Ответить
    • Виталий Кириллов:

      Можно сделать отдельный шаблон для любой категории. Подробности тут.

      Ответить
  5. александр:

    А как сделать что бы выводилось 2 шаблона а не один (когда идет выбор шаблона для запеси или страницы)

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS