Шаблон страницы WordPress. Полное руководство. Разбираем и наполняем файл index php WordPress

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

Он позволяет настраивать отображение записей на главной и других страницах блога без каких-то специализированных знаний в программировании — скачать его можно отсюда . Название на странице репозитория какое-то слишком длинное «Query posts by category… and display posts on page in grid layout without coding — Content Views» , если устанавливаете через админку вордпресс, попробуйте поискать по ключу Content Views. Требуемая версия WP выше 3.3 и до 4.2.2 (на момент написания поста), скачали модуль более 10тыс. раз, рейтинг практически максимальный!

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

• отображать на главной посты по категориям в адаптивном дизайне;
• выводить записи блога в 2/3 колонки;
• выводить посты в нужном формате на определенной странице;
• выводить заметки по нужному тегу или автору;
• для отображаемых записей выбрать сортировку по заголовку или дате;
• заменить стандартную навигацию на более красивую;
• отображать в анонсах постов миниатюры разных размеров.

В принципе, вы могли бы настроить вывод последних постов по категории , о котором я когда упоминал (через WP_Query). Но не каждый пользователь в этом разберется, а плагин Content Views значительно упрощает задачу. Рассмотрим детальнее работу с модулем.

После установки в админке появится раздел плагина Content View Settings . Для создания нового элемента вывода постов кликаем по ссылке «Add New».

Здесь задача делится на 2 составляющих:

• Filter Settings — задание параметров выборки записей;
• Display Settings — формат отображения постов.

На первом шаге вы определяете тип записи — страница или пост. Можно при этом включить в список или исключить из него конкретные ID. Параметр Limit определяет число элементов.

Чуть ниже в Advanced filters происходит все самое интересное. На скриншоте вы видите как я отметил параметр Taxonomies и задал выборку по рубрикам. Дальше определил категорию из которой будут выводиться посты. Есть возможность сделать выборку по нескольким рубрикам или исключить какую-то из общего списка.

Кроме параметра Taxonomies есть:

• Status — статус отображаемых записей. Внимание! Если вы хотите показывать только опубликованные посты, то также задайте этот параметр (значение Publish).
• Order & Orderby — варианты сортировки.
• Search — отображение записей по поисковой фразе.
• Author — выборка по конкретному автору.

Вкладка Display Settings содержит настройки по внешнему виду блока:

Здесь есть три формата отображения: сетка (Grid), раскрывающийся список (Collapsible List), блоки с перелистыванием (Scrollable List). Для «сетки» можно выбрать число элементов в столбце и/или 2 колонки при отображении. Также отмечаете поля, которые требуется выводить у каждого элемента: дата, заголовок, текст, миниатюра. Можно выбрать открытие ссылки в новом окне.

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

После указания всех параметров, сохраните элемент. В меню «All views» можете увидеть список всех созданных блоков и шорткоды для их вставки. Размещать их можно на обычных страницах блога или в шаблоне через функцию вызова шорткода:

Напоследок хочется сказать, что у плагина есть Pro версия, которая обладает чуть большим числом опций и настроек. Стоимость ее 29 долларов за 1 или 89 за 5 сайтов. Тут добавляется 2 дополнительных варианта отображения Pinterest, Timeline, идет полная замена отображения последних постов в архивах категорий, тегов, авторов, появляется поддержка WooCommerce, добавляется механизм Drag & drop, а также много разных параметров для внешнего вида блоков. В принципе, бесплатной версии для решения задачи оригинального оформления главной страницы WordPress сайта мне хватило.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Совет. Шаблон, созданный таким способом, может быть расположен в подпапке текущей темы. Тем самым не занимая лишнего места и создавая компактный вид.

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

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

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

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

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

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

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

Теперь нужно прописать стили в файле 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 .

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

/images/img.png"/> /images/img.jpg"/> /images/img.jpg"/> /images/img.jpg"/>

вывод информации