Шаблоны страниц в WordPress. Разные шаблоны для WordPress страниц или записей

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

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

Большинство тем для WP содержат файл страницы (page.php) , который содержит шаблон страницы по умолчанию, используемый на каждой странице, если не указан конкретный тип. Если вам нужна страница с другим макетом или форматом, чем шаблон страницы по умолчанию, необходимо создать собственный тип шаблона. При разработке шаблонов для WP необходимы базовые знания HTML, CSS и PHP. Однако, вы можете воспользоваться готовыми темами WordPress - www.inbenefit.com , если не обладаете нужными навыками.

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

Чтобы создать собственный шаблон, вам понадобится текстовый редактор. Для Windows можно использовать обычный блокнот. В противном случае вам понадобится какая-нибудь простая система редактирования, например FileZilla или Dreamweaver. В любом случае выполните следующие действия:

Если вы зайдете на страницу в браузере, то увидите пустое место. Это связано с тем, что в созданном вами файле нет кода, чтобы сообщить WordPress, как отображать контент. Теперь в игру вступают ваши навыки HTML, PHP и CSS.

Подготовка шаблона

В действительности вы можете добавить любую форму HMTL, скрипт PHP или тег шаблона в файл custompage01.php, который вы хотите использовать. Возможно было бы полезно почитать немного о том, что вы можете сделать на уровне кодирования, прежде чем использовать этот шаблон. Вы также можете включить сценарии веб-сайта для различных целей.

Один простой способ начать с работать с шаблонами - скопировать основную информацию из файла page.php в тему, которую вы используете. Это даст вам отправную точку и может быть полезно, когда вы впервые научитесь программировать. Выполните следующие шаги:


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

Это работает для постов в WordPress?

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

Это повлияет на что-либо еще на сайте WordPress?

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

Есть ли альтернатива для создания макетов без кодирования?

Можно создать собственный макет, не предпринимая шагов для создания уникального шаблона. Вы можете использовать такой плагин, как Page Builder от SiteOrigin, который дает вам возможность настраивать уникальный макет при использовании виджетов внутри самого содержимого. Для тех, у кого нет навыков программирования, это может быть лучшей альтернативой.

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

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

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

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

Создаем копию этого файла и называем ее к примеру page_extra.php (имя может быть любым). После этого открываем ее в текстовом редакторе и меняем содержимое на то, какое нам нужно. Например, если нужно изменить шапку, то можно создать отдельный файл header_extra.php (имя опять же не имеет значения), а в файле page_extra.php вместо get_header(); вставляем include(«header_extra.php»); . Аналогично можем поменять другие блоки страницы.

Теперь в самом начале файла page_extra.php пишем

1 2 3 4 5

Это будет название нашего нового шаблона. Все, сохраняем файл и закидываем его в папку с установленной темой! Туда же отправляем и все вновь созданные файлы (header_extra.php ).

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



Так же можно прописать в файле page.php следующий код:

Для версий WordPress от 2.8 все вышесказанное можно сделать другим методом. Для этого используем функцию: . Ее нужно прописать в тег в файле header.php вашей темы.

В итоге текст заголовков третьего уровня станет равным 18px, причем только на статических страницах, или

1 2 3 #post-2 { color : red ; }

Этот код изменит цвет текста в посте с идентификатором 2 на красный.

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

  • archive
  • search
  • paged
  • attachment
  • error404
  • single postid- (id)
  • attachmentid- (id)
  • attachment- (mime-type)
  • author
  • author- (имя)
  • category
  • category- (имя)
  • tag- (имя)
  • page-parent
  • page-child parent-pageid- (id)
  • page-template page-template- (имя файла шаблона)
  • search-results
  • search-no-results
  • logged-in
  • paged- (номер страницы)
  • single-paged- (номер страницы)
  • page-paged- (номер страницы)
  • category-paged- (номер страницы)
  • tag-paged- (номер страницы)
  • date-paged- (номер страницы)
  • author-paged- (номер страницы)
  • search-paged- (номер страницы)

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

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

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

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

1. Создание php-файла для черновика шаблона на основе стандартного.

2. Настройки шаблона для особого вида страницы сайта на WordPress (можно это сделать на компьютере или прямо в админке сайта).

3. При создании новой страницы или редактировании существующей выбрать для нее полученный шаблон.

Создание php-файла для своего шаблона страницы

Скачать файл page.php из папки установленной на сайте темы. Находится по адресу:

/wp-content/themes/имя_темы/page.php

Открыть, например, в блокноте Notepad++.

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

Template Name: Album

Настройки своего шаблона страницы для сайта WordPress

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

Итак, нужно загрузить файл album.php в ту же папку, где находится стандартная страница page.php своей темы WordPress.

После загрузки файла идем в админке в меню «Внешний вид» - «Редактор» и справа выбираем из шаблонов новый файл.

В окне редактирования можно увидеть код страницы, в начале которой размещен наш код определения названия шаблона страницы «Album».

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

Если с сайдбаром всё просто (нужно удалить его код и всё)…

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

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

В Google Chrome удобно смотреть код элемента страницы, поэтому быстро нахожу, что блок с центральным полем имеет идентификатор postcont (в моем шаблоне). А блок с самим текстом страницы – content.

К ним и нужно добавить новые стили, то есть, только увеличить ширину (размер = ширина страницы – ширина левого сайдбара).

Вот они, родимые, в коде файла своего шаблона страницы album.php:

и

Мне не понадобилось меня стиль content, потому что для него вообще не указана ширина, он – просто вложенный блок в postcont.

! important – обязательный параметр в таких случаях, потому что я не смотрел и не знаю, что там в стилях написано, и мои новые стили должны иметь приоритет.

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

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

Апдейт от 20.10.14: добавляю, как и обещал в начале года, скрин страницы с фотографиями. Да, сколько всего произошло с тех пор. 17 февраля — последний мирный день перед последовавшими за ним стремительно разными событиями...

И наконец завершающий этап (который я уже немного показывал на скриншотах выше).

Настройки своего шаблона для страниц сайта WordPress

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

Выбираем меню «Страницы» и «Добавить новую» или нажимаем на ту, которую нужно поменять.

Справа в меню «Шаблон» меняем «Базовый шаблон» на новый «Album» и сохраняем или публикуем страницу.

Вот теперь действительно всё!

Фото © Nancy L Misiewicz. A Romp in the Woods

Другие интересные записи

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

Страница – это одна из основных частей сайта на WordPress. Как сделать страницу, и как её можно использовать, мы вам расскажем в той статье.

Как сделать страницу на WordPress

Для того чтобы сделать страницу на WordPress, необходимо в консоли администратора нажать на пункт меню «Страницы» и выбрать «Добавить новую». Вы попадёте в , который такой же, как и редактора добавления записей. Здесь есть все те функции, а также можно переключать между двумя видами редакторов – текстовый и визуальный.

К странице потребуется придумать название и заполнить её содержание. Кроме того, если у вас установлен плагин All in one SEO pack, то страницу можно SEO-оптимизировать. Для этого надо записать заголовок, описание и ключевые слова в соответствующие строки.

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

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

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

Что можно делать со страницей на WordPress

Страницы могут быть заполнены каким-либо текстом, изображениями или другим контентом. Тогда это будет статичная страница – она не будет изменять произвольно. Страница может также выводить какой-либо HTML код, как это бывает при добавлении формы обратной связи или карты сайта. Это могут быть как динамические, так и статичные страницы, в зависимости от функций кода.

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

Страницы могут быть добавлены в меню сайта, в пункте панели администратора «Внешний вид» – «Меню». А это меню может быть помещено на сайт.

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

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

Итак, сегодня рассмотрим:

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

Теоретически все, что вам нужно в этом случае — размещение некого кода в самом верху соответствующего файла:

/* * Template Name: NoAds Single Page * Template Post Type: post, page, product */ ?>

В первой строке указывается название для WP админки, во второй определяются типы записей, в которых можно этот макет применять (в примере: post, page и product).

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

Общий алгоритм действий:

1. С помощью FTP клиента FileZilla заходите на свой хостинг в директорию с названием установленной темы wp-content/themes/имя_темы (или дочерней).

2. Копируете файл, используемый для отображения постов/страниц (single.php и page.php) на локальный компьютер.

3. Переименовываем, например, в page-new.php или page-noads.php и т.п. (название роли не играет).

5. Загружаете новый вариант обратно на хостинг в ту же директорию.

Выбор шаблона страницы в WordPress

Теперь переходим в админку системы, открываем любую публикацию для редактирования и ищем там следующий блок:

Отображаемое здесь название задается в строке Template Name.

Кстати, удобно, что доступно , то есть изменить шаблон страниц можно сразу у нескольких объектов. Переходите в пункт «Все записи», где отмечаете парочку статей и выбираете в «Действиях» значение «Изменить».

После выбора не забудьте кликнуть «Обновить».

Разный сайдбар, хедер, футер и не только

Внимательно посмотрев на установленную тему, увидите, что для вывода базовых элементов там применяются стандартные функции: get_sidebar, get_header, get_footer. Если вы модифицировали свой макет, но оставили их там, то на сайте будет отображаться такое же содержимое, что и в основном варианте.

Разберем самую простую ситуацию — у нас получился новый исправленный page.php, но в сайдбаре также требуется внести некоторые коррективы. В таком случае вместо get_sidebar я использую конструкцию:

Разумеется, вам нужно создать соответствующий файл sidebar-category-noads.php . Хотя, теоретически, можно сразу в новом макете писать код без include, но так структура становится менее наглядной.

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

Отдельные шаблоны записей по категориям

Тут, по сути, имеется два способа. Я лично предпочитаю тот, что попроще — открываете единичный пост single.php в редакторе, и размещаете код:

In_category проверяет какому разделу принадлежит публикация: если с ID=5, то грузится single-category5.php, в противном случае — single-forall.php. Конечно, эти два файла следует добавить на FTP заранее (можно опять же скопировать из исходного и слегка подправить) + названия допускаются любые.

Второй вариант рассмотрен . Вам нужно разместить следующий код в functions.php:

/* * Define a constant path to our single template folder */ define (SINGLE_PATH, TEMPLATEPATH . "/single" ) ; /** * Filter the single_template with our custom function */ add_filter("single_template" , "my_single_template" ) ; /** * Single template function which will choose our template */ function my_single_template($single ) { global $wp_query , $post ; /** * Checks for single template by category * Check by category slug and ID */ foreach ((array ) get_the_category() as $cat ) : if (file_exists (SINGLE_PATH . "/single-cat-" . $cat -> slug . ".php" ) ) return SINGLE_PATH . "/single-cat-" . $cat -> slug . ".php" ; elseif (file_exists (SINGLE_PATH . "/single-cat-" . $cat -> term_id . ".php" ) ) return SINGLE_PATH . "/single-cat-" . $cat -> term_id . ".php" ; endforeach ; }

/* * Define a constant path to our single template folder */ define(SINGLE_PATH, TEMPLATEPATH . "/single"); /** * Filter the single_template with our custom function */ add_filter("single_template", "my_single_template"); /** * Single template function which will choose our template */ function my_single_template($single) { global $wp_query, $post; /** * Checks for single template by category * Check by category slug and ID */ foreach((array)get_the_category() as $cat) : if(file_exists(SINGLE_PATH . "/single-cat-" . $cat->slug . ".php")) return SINGLE_PATH . "/single-cat-" . $cat->slug . ".php"; elseif(file_exists(SINGLE_PATH . "/single-cat-" . $cat->term_id . ".php")) return SINGLE_PATH . "/single-cat-" . $cat->term_id . ".php"; endforeach; }

После этого в директории темы создаете новую папку «single» по типу /wp-content/themes/ваша_тема/single/ куда загружаете файлы, название которых имеет следующий формат single-cat-{category-slug}.php, например: single-cat-news.php или single-cat-articles.php . Данный метод лично я не тестил, но источник надежный.

Дополнительные нюансы

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

Метод, конечно, не самый грамотный, но работает. Не забудьте внести правки в соответствующий файл.

Вторая фишка — когда нужно скрыть/показывать виджет в зависимости от выбранного варианта макета. В таком случае на помощь приходит и условные операторы is_page_template либо has_post_format.

Итого. Повторюсь, если требуется создать разные шаблоны страницам и постам в Вордпресс, но при этом сами page.php и single.php отличаются, то вы для каждого из них делаете свою «копию». Когда же их структура одинакова, новые возможности системы позволяют сделать всего один макет, где в описании Template Post Type просто указываете типы объектов, с которыми он будет работать.

Если есть вопросы по основной части заметки, и по доп.нюансам, пишите ниже, — постараюсь ответить.