Плагин 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 сайта мне хватило.

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

Другое. Здесь настраиваем, как открывать элемент, при нажатии на заголовок, миниатюру или кнопку далее: в новой или текущей вкладке.

На мой субъективный взгляд бесплатная версия плагина Content Views работает на достаточно высоком уровне. Покупать pro версию не нужно, стандартные функции плагина замечательно выводят практически любые сочетания записей и страниц.

Если вы не знаете, как красиво и оригинально вывести страницы или записи вашего сайта на WordPress, плагин Content Views поможет вам в этом. Не нужно копаться в коде, достаточно настроить отображение контента и плагин автоматически выведет нужные вам страницы в отдельной статье или виджете.

✓

Иногда бывает полезным скрыть и/или показать часть контента в записях/страницах WordPress в зависимости от тех или иных условий. Условия и ситуации бывают разными. Допустим, вы проводите конкурс на своем сайте и условия конкурса или его результаты должны автоматически появится на сайте 17 числа текущего месяца. Или вы распространяете ссылки на своем сайте, но не хотите, чтобы их видели все, а только зарегистрированные пользователи сайта. Или вы принимаете анкеты на сайте от аудитории, но хотите показывать анкету на сайте только с 1 по 10 число каждого месяца... И т.д.

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

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

Контент виден только для зарегистрированных пользователей

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

Function logged_in_user_content($atts, $content = null) { if (is_user_logged_in() && !is_null($content) && !is_feed()) { return $content; } return "Доступно только для зарегистрированных пользователей"; } add_shortcode("vizible", "logged_in_user_content");

Этот текст увидят только зарегистрированные пользователи. Он также будет исключен из поиска.

Видимость контента в зависимости от роли пользователя на сайте

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

Function content_by_user($attr, $content = null) { $defaults = array("capability" => ""); extract(shortcode_atts($defaults, $attr)); if (current_user_can($capability) && !is_null($content) && !is_feed()) { return $content; } return "У Вас не хватает прав"; } add_shortcode("rolecontent", content_by_user");

Использование в теле записи/страницы:

Эта часть контента видна пользователям, c соответствующими правами на сайте.

Можно использовать следующие параметры:

• read - контент будет виден всем
• edit_posts - виден редакторам
• manage_options - только администраторам

Видимость контента в диапазоне дат каждого месяца

Если вы хотите сделать видимым часть контента в определенном диапазоне дат каждого месяца (скажем, с 1 по 10 число), можно использовать такой шорткод:

Function content_countdown($atts, $content = null){ extract(shortcode_atts(array("ot" => "", "do" => ""), $atts)); $dt=date("j"); if ($dt>=$ot && $dt<=$do) { return $content; } } add_shortcode("data", "content_countdown");

Использование в теле записи/страницы:

Показываем пользователям то, что будет доступно лишь с 1 по 10 число (включительно) каждого месяца.

Видимость контента в определенное число месяца

Бывает полезным, например, если 30 числа каждого месяца вы подводите какие-то итоги. Делается как и аналогично в прошлом случае, с некоторыми модификациями:

Function content_countdown_data($atts, $content = null){ extract(shortcode_atts(array("chislo" => ""), $atts)); $dt=date("j"); if ($dt==$chislo) { return $content; } } add_shortcode("datas", "content_countdown_data");

Использование в теле записи/страницы:

Этот контент будет доступным пользователям лишь 30 числа каждого месяца.

Видимость контента в определенный день недели

Контент можно прятать/показывать и в определенный день недели (понедельник, вторник и т.д.)

Function content_countdown_w($atts, $content = null){ extract(shortcode_atts(array("chislo" => ""), $atts)); $dt=date("w"); if ($dt==$chislo) { return $content; } } add_shortcode("week", "content_countdown_w");

Использование в теле записи/страницы:

Этот контент будет доступен лишь в определенный день недели. Достаточно указать в параметре порядковый номер дня недели: от 0 (воскресенье) до 6 (суббота)

Видимость контента только в определенный месяц в году

Чтобы выводить контент на своем сайте в отдельном месяце года (не уверен, что кому-то надо, но все же), используем такой шорткод:

Function content_countdown_month($atts, $content = null){ extract(shortcode_atts(array("month" => ""), $atts)); $dt=date("n"); if ($dt==$month) { return $content; } } add_shortcode("month", "content_countdown_month");

Использование в теле записи/страницы:

Этот контент будет доступным пользователям лишь в январе месяце. Число указывать: от 1 до 12.

Видимость контента в диапазоне месяцев

А вдруг вам понадобится показывать/прятать контент лишь летом или зимой? Или в первый квартал года? Можем сделать таким шорткод:

Function content_countdown_months($atts, $content = null){ extract(shortcode_atts(array("ot" => "", "do" => ""), $atts)); $dt=date("n"); if ($dt>=$ot && $dt<=$do) { return $content; } } add_shortcode("months", "content_countdown_months");

Использование в теле записи/страницы:

Контент будет доступен лишь в первом квартале года, с 1 по 3 месяц (включительно).

Видимость контента после наступления даты

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

Function content_countdown_day($atts, $content = null){ extract(shortcode_atts(array("month" => "", "day" => "", "year" => ""), $atts)); $remain = ceil((mktime(0,0,0,(int)$month,(int)$day,(int)$year) - time())/86400); if($remain > 1){ return $daysremain = "Осталось дней - ($remain)"; } else if($remain == 1){ return $daysremain = "Остался 1 день"; } else{ return $content; } } add_shortcode("newyear", "content_countdown_day");

Использование в теле записи/страницы:

Новый год! Давайте праздновать!

Если не работают шорткоды в шорткоде

Все вышеприведенные шорткоды призваны прятать/показывать некоторый HTML код на ваших страницах. Но что произойдет, если в шорткод заключить шорткод? Правильно, вложенный шорткод не будет работать. Такой конфликт случится, например, если вы попытаетесь вложить в шорткод контактную форму, например так:

[соntаct-fоrm-7 id="6122" title="Контактная форма"]

Чтобы заставить шорткод работать в шорткоде WordPress нам необходимо заменить всего одну строку в функциях приведенных здесь шорткодов. Строчку:

Return $content;

заменить на:

Return do_shortcode($content);

Все должно работать!

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

Однако многие пользователи не останавливаются на простом знакомстве. Вместо этого они начинают активно пользоваться системой. Придумывают больше идей. Экспериментируют. Пробуют новые плагины. Открывают Firebug. Всё. Точка невозврата уже пройдена. Согласитесь, похоже на вашу историю? Для пользователей WordPress вполне нормально желать все больших и больших аспектов управления своим сайтом. Желать уникального дизайна, выверенной функциональности, настройки всех деталей.

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

Среди наиболее важных инструментов, касающихся полного управления сайтом, можно отметить шаблоны страниц. Они позволяют пользователям кардинально изменить дизайн и функциональность своего сайта. Хотите сделать совершенно иной хэдер для главной страницы? Легко. Дополнительный сайдбар, который будет выводиться только на странице блога? Без проблем. Уникальную страницу 404? Пожалуйста!

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

Шаблоны в WordPress

Что мы подразумеваем, когда говорим о шаблонах в контексте WordPress? Если говорить кратко, то шаблоны – это файлы, которые говорят WordPress, как нужно выводить разные типы контента.

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

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

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

Вы можете представить себе эту иерархию как дерево решений. Когда WordPress пытается решить, как вывести на экран текущую страницу, он идет вниз по иерархии шаблонов, пока не найдет первый шаблон, отвечающий запрашиваемой странице. К примеру, если кто-то пытается получить доступ к http://yoursite.com/category/news, WordPress будет искать соответствующий шаблон в таком порядке:

1. category-{slug}.php: в данном случае category-news.php
2. category-{id}.php>: если ID рубрики — 5, WordPress попробует найти файл под названием category-5.php
3. category.php
4. archive.php
5. index.php

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

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

Для страниц стандартным шаблоном является файл page.php. Если нет более подходящего шаблона (такого как, к примеру, archive.php для страниц архивов), WordPress будет использовать page.php для вывода контента всех страниц на вашем сайте.

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

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

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

Как изменить любую страницу в WordPress

Есть три основных способа применения произвольных шаблонов страниц в WordPress: добавление условных операторов к существующему шаблону; создание шаблона определенной страницы, который будет ранжироваться выше в иерархии; а также прямое присваивание шаблонов к определенным страницам. Мы рассмотрим каждый из этих способов по очереди.

Использование условных тегов в стандартных шаблонах

Самый простой способ внесения изменений для отдельной страницы – это использование условных тегов в ее шаблоне. Как и предполагает название, эти теги используются для создания функций, которые выполняются только в том случае, когда условие было выполнено. В контексте шаблонов страниц это напоминает следующее: «Выполняй действие X только на странице Y».

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

Вот некоторые распространенные условные теги:

1. is_page(). Указывает на определенную страницу. Может использоваться с ID, заголовком, а также URL/названием.
2. is_home(): применяется к домашней странице.
3. is_front_page(): применяется к главной странице вашего сайта, заданной в разделе «Параметры» – «Чтение».
4. is _category(): условия для страницы рубрик. Может использоваться с ID, заголовком, URL/названием, как и тег is_page().
5. is_single(): для отдельных записей и вложений
6. is_archive(): условие для страниц архивов
7. is_404(): применяется только к страницам 404

К примеру, если добавить к шаблону page.php вместо стандартного тега get_header(); следующий код, то вы получите произвольный хэдер, названный header-shop.php, при выводе страницы http://yoursite.com/products.

If (is_page("products")) { get_header("shop"); } else { get_header(); }

Хороший пример использования такого кода: если у вас есть магазин на вашем сайте, и вы хотите вывести другое изображение в хэдере или измененное меню на странице магазина. Вы можете внести соответствующие изменения в header-shop.php, чтобы все это отобразилось на вашем сайте.

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

If (is_page("products")) { get_header("shop"); } elseif (is_page(42)) { get_header("about"); } else { get_header(); }

В этом примере мы задали два условия, которые изменят поведение различных страниц вашего сайта. Помимо загрузки уже упомянутого выше хэдера для магазина, мы загружаем header-about.php на странице с ID 42. Для всех остальных страниц будет выведен стандартный хэдер.

Создание шаблонов страниц в иерархии шаблонов WordPress

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

Один из способов сделать это – воспользоваться иерархией шаблонов WordPress. Как мы уже видели, WordPress пройдет по списку всех возможных шаблонов и выберет первый шаблон, соответствующий запрашиваемой странице. Для страниц иерархия выглядит следующим образом:

• Произвольные шаблоны страниц
• page-{slug}.php
• page-{id}.php
• page.php
• index.php

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

Затем WordPress будет искать шаблон страниц, который включает в себя слаг рассматриваемой страницы. К примеру, если вы подключите файл page-about.php в файлах вашей темы, WordPress будет использовать этот файл для вывода вашей страницы About (О себе) или любой другой страницы, найденной по адресу http://www.yoursite.com/about.

Того же самого вы можете добиться путем указания ID вашей страницы. К примеру, если та же самая страница имеет ID 5, WordPress будет использовать шаблон page-5.php, если он существует; Это будет лишь в том случае, если отсутствуют шаблоны страниц, имеющие более высокий приоритет в иерархии.

Вы можете узнать ID любой страницы, просто наведя курсор на ее заголовок в разделе All Pages (все страницы) бэкэнда WordPress. ID будет находиться в ссылке, выведенной вашим браузером.

Привязка произвольных шаблонов страниц

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

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

Привязка произвольного шаблона страниц через редактор WordPress

В редакторе WordPress вы можете найти поле, названное Page Attributes (Атрибуты страницы). В нем содержится список Template (Шаблон).

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

Задание произвольного шаблона через быстрое редактирование

То же самое может быть сделано без обращения к редактору WordPress. Переходим в раздел All Pages и наводим курсор мыши на любой пункт из списка. На экране появится меню, которое будет включать в себя пункт Quick Edit.

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

Не так сложно, не правда ли? Однако как быть, если у вас пока что нет произвольного шаблона страниц? Как создать его? Не переживайте, в следующем разделе мы обсудим это.

Пошаговое руководство по созданию произвольных шаблонов страниц

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

1. Ищем стандартный шаблон.

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

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

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

Как видите, ничего интересного: обычные вызовы хэдера и футера, а также цикл посередине. Страница будет выглядеть так:

1. Копируем и переименовываем шаблон

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

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

Лучше всего именовать файл так, чтобы он отражал суть шаблона. К примеру, my-custom-template.php. В нашем случае мы назовем его custom-full-width.php.

1. Меняем заголовок шаблона

Теперь нам нужно сообщить WordPress, что этот новый файл является произвольным шаблоном страниц. Чтобы сделать это, мы просто скорректируем заголовок файла:

Название в Template Name будет выводиться в разделе Page Attributes на странице редактора WordPress. Убедитесь в том, что вы изменили его на свое.

1. Настраиваем код.

Теперь пришла пора к работе с кодом шаблона. В нашем примере мы удалим сайдбар с демо-страницы.

Сделать это относительно просто – достаточно удалить get_sidebar(); из шаблона страниц. В результате этого мой шаблон получил следующий вид:

1. Загружаем шаблон страниц

После сохранения измененного файла нам нужно загрузить его на сайт. Произвольные шаблоны страниц могут храниться в разных местах:

• Папка с вашей активной (дочерней) темой
• Папка с вашей основной родительской темой
• Подпапка в папке с любой темой (как родительской, так и дочерней)

Я предпочитаю создавать папку page_templates в дочерней теме и размещать в ней все произвольные шаблоны. Так мне проще всего обращаться к измененным файлам.

1. Активируем шаблон

Последний шаг: нам нужно активировать шаблон страниц. Как было указано ранее, делается это в секции Page Attributes → Templates в редакторе WordPress. Сохраняем, просматриваем страницу – и видим наш новый шаблон в действии (уже без сайдбара):

Не так трудно, не правда ли? Не переживайте, вы сможете быстро отточить свои навыки создания шаблонов. Чтобы вы поняли, как именно можно использовать такие шаблоны, я покажу вам несколько интересных вариантов использования.

Пять разных способов использования шаблонов страниц

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

Шаблон для вывода страниц во всю ширину экрана

Первый случай, который мы рассмотрим – это расширенная версия демонстрационного шаблона, созданного нами выше. Мы уже удалили сайдбар, убрав get_sidebar(); из кода. Однако, как вы можете видеть на скриншоте, страница все равно не стала выводиться во всю ширину экрана, поскольку секция контента осталась с выравниванием по левому краю.

Чтобы исправить это, нам нужно поработать с CSS, особенно с этим участком:

Site-content { float: left; width: 65.1042%; }

Атрибут width задает ширину нашего контента равной 65.1042% от доступного пространства. Мы хотим увеличить это значение.

Если мы просто поменяем значение width на 100%, то в итоге все страницы нашего сайта будут выводиться во всю ширину экрана – нам это не нужно. Первый наш шаг – это изменение класса у div с id=primary в нашем произвольном шаблоне. Можно изменить его на class=»site-content-fullwidth». Результат:

Теперь мы можем скорректировать CSS для нашего произвольного класса:

Site-content-fullwidth { float: left; width: 100%; }

В итоге контент будет занимать весь экран:

Динамические страницы 404 с областями виджетов

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

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

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

Специально для этого мы возьмем файл 404.php, который поставляется вместе с темой Twenty Twelve (помните про иерархию шаблонов?). Но перед тем как что-то менять в нем, давайте создадим новый виджет путем вставки кода в файл functions.php:

Register_sidebar(array("name" => "404 Page", "id" => "404", "description" => __("Content for your 404 error page goes here."), "before_widget" => "

", "before_title" => "

", "after_title" => "

"));

Это приведет к выводу нашего нового виджета в бэкэнде WordPress. Чтобы убедиться, что он действительно появится на нашем сайте, нам нужно добавить следующую строку кода к файлу 404 страницы в соответствующее место:

В моем случае я хочу заменить форму поиска get_search_form(); в шаблоне на область виджетов. Вот как это выглядит:

После загрузки шаблона на сайт мы можем заполнить новую область виджетов:

Если теперь перейти к странице 404, мы увидим новые виджеты:

Шаблон страниц для вывода произвольных типов записей

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

Сначала мы должны создать наш произвольный тип записей. Сделать это можно вручную или через плагин. Я могу порекомендовать для этого плагин Types. Он позволит вам легко создать произвольные типы записей и произвольные поля.

Установите и активируйте Types , добавьте произвольный тип записей, сделайте его слаг «portfolio», настройте поля, которые вам требуются (к примеру, добавление миниатюры), откорректируйте другие опции и сохраните.

Теперь, когда у нас есть тип записей portfolio, мы должны вывести его на сайте. Первое, что мы сделаем – это создадим нужную страницу. Учтите, что если вы выбрали portfolio в качестве слага для вашего произвольного типа записей, страница не должна иметь такой же слаг. Я остановился на clients-portfolio и добавил некоторый дополнительный текст.

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

Чтобы сделать это, мы используем дубликат page.php. Скопируем файл, назовем его portfolio-template.php и изменим его заголовок:

Однако в данном случае нам нужно будет внести некоторые изменения и в исходный шаблон. Если вы взглянете в код page.php, вы увидите, что в нем стоит вызов другого шаблона content-page.php (get_template_part(‘content’, ‘page’);). В этом файле нам нужен будет следующий код:

>

"

" . __("Pages:", "twentytwelve"), "after" => "

")); ?>

Как вы можете видеть, здесь вызывается заголовок и контент страницы. Поскольку они нужны нам и в разделе портфолио, мы скопируем эти фрагменты в наш шаблон page.php. Результат будет следующим:

Get_header(); ?>

Чтобы вывести пункты портфолио на нашей странице, нам нужно будет добавить следующий код сразу после вызова the_content():

"portfolio", // enter custom post type "orderby" => "date", "order" => "DESC",); $loop = new WP_Query($args); if($loop->have_posts()): while($loop->have_posts()): $loop->

"; endwhile; endif; ?>

В итоге произвольный тип записей будет выведен на нашей странице:

Выглядит это не так красиво, поэтому давайте добавим сюда некоторую стилизацию:

/* Portfolio posts */ .portfolio { -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); margin: 0 0 20px; padding: 30px; } .portfolio-image { display: block; float: left; margin: 0 10px 0 0; max-width: 20%; } .portfolio-image img { border-radius: 0; } .portfolio-work { display: inline-block; max-width: 80%; } .portfolio h3{ border-bottom: 1px solid #999; font-size: 1.57143rem; font-weight: normal; margin: 0 0 15px; padding-bottom: 15px; }

Теперь гораздо лучше, не находите?

Вот весь код шаблона страницы с портфолио:

Страница участников с аватарами

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

Начнем мы все с того же гибридного файла, что и ранее, и добавим к нему код для вывода списка участников.

Стандартная тема Twenty Fourteen поставляется вместе со страницей участников по умолчанию. Вы можете найти этот шаблон в папке page-templates под названием contributors.php.

Однако если вы взглянете в этот файл, вы найдете там только следующий вызов: twentyfourteen_list_authors();. Понятно, что это связано с функцией, содержащейся в файле function.php темы. Нас интересует следующий ее фрагмент:

"ID", "orderby" => "post_count", "order" => "DESC", "who" => "authors",)); foreach ($contributor_ids as $contributor_id) : $post_count = count_user_posts($contributor_id); // Move on if user has not published a post (yet). if (! $post_count) { continue; } ?>

Мы добавим его сразу под вызовом the_content() и получим следующий результат:

Теперь зададим некоторую стилизацию:

/* Contributor page */ .contributor { border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; padding: 48px 10px; } .contributor p { margin-bottom: 1rem; } .contributor-info { margin: 0 auto 0 168px; } .contributor-avatar { border: 1px solid rgba(0, 0, 0, 0.1); float: left; line-height: 0; margin: 0 30px 0 -168px; padding: 2px; } .contributor-avatar img{ border-radius: 0; } .contributor-summary { float: left; } .contributor-name{ font-weight: normal; margin: 0 !important; } .contributor-posts-link { background-color: #24890d; border: 0 none; border-radius: 0; color: #fff; display: inline-block; font-size: 12px; font-weight: 700; line-height: normal; padding: 10px 30px 11px; text-transform: uppercase; vertical-align: bottom; } .contributor-posts-link:hover { color: #000; text-decoration: none; }

Готово. Спасибо Twenty Fourteen!

Измененная страница архивов

Twenty Twelve поставляется вместе со своим собственным шаблоном для страниц архивов. Он будет использоваться, к примеру, если вы попытаетесь просмотреть прошлые записи из определенной рубрики.

Однако мне хотелось бы сделать нечто более интересное, как, к примеру, у Problogger : страница, которая позволяет людям получать дополнительный контент разными способами. Делается это, опять же, при помощи шаблона страниц.

Мы можем добавить следующий код сразу под the_content() в наш файл, который используется для примеров:

Archives by Year:

Archives by Month:

Archives by Subject:

Также понадобится некоторая стилизация для поиска:

Archive-search-form { padding: 10px 0; text-align: center; }

Результат будет следующим:

Вот весь файл, чтобы вы могли понять, что к чему:

Не забудьте привязать этот шаблон к странице!