Как сделать страницу на WordPress. Создаем новый шаблон страницы в WordPress

30.08.2019

Skype

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

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

Создание страниц в WordPress

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

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

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

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

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

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

Как это работает:

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

{любое_название}.php (когда используется шаблон страницы)
page-{ярлык_записи}.php
page-{ID_записи}.php
page.php
singular.php
index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

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

Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).

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

Войдите в админ панель WordPress.

Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.

Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .

Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:

Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.

Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).

Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.

Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.

Давайте сначала добавим хедер и футер в новый шаблон страницы:

Если вы сохраните изменения, то сможете увидеть их на странице:

Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .

Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):

" data-motopress-wrapper-file="page-testi.php" data-motopress-wrapper-type="content">

" data-motopress-type="static" data-motopress-static-file="static/static-title.php">

" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-testi.php">

sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team

И замените page-testi.php на new.php в этом коде.

Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).

Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:

" data-motopress-wrapper-file="new.php" data-motopress-wrapper-type="content">

" data-motopress-type="static" data-motopress-static-file="static/static-title.php">

" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-new.php">

sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).

Те, кто пробовал хоть раз создавать темы или ковыряться в их коде, знают, что за стиль всех страниц сайта отвечает шаблон «page.php ». Зачастую в этом файле выводятся блоки, которые одинаковые и на записях, и в архивах и т.д. WordPress дает возможность создавать свои собственные шаблоны страниц . А это, в свою очередь, означает, что можно выйти за рамки стандартного дизайна. Объясняю. Например, в своем созданном шаблоне страниц можно убрать сайтбар или поменять месторасположение блоков, сделать другую шапку или поменять абсолютно весь дизайн. Также благодаря созданию собственных шаблонов есть возможность создать одностраничники (лендингпейдж).

Итак, с помощью личного шаблона страниц можно:
- убрать или добавить сайдбар, подвал, шапку;
- изменить дизайн шапки, подвала, сайдбара;
- создать страницу регистрации или формы связи, встроенную в дизайн;
- внедрить какой-нибудь скрипт (JavaScript, php и другие);
- оригинально оформить страницы

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

Способ№1

○ Создание своего шаблона

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

Откройте файлы темы (wp-content/themes/Ваша-тема/ )

Скачайте файл «page.php » и откройте его с помощью , а потом вставьте в самое начало файла вот такой код:

Естественно, название «новая страница для сайт » меняете на свое
Этим кодом мы сообщили WordPress о создании индивидуального шаблона под именем «новая страница для сайт ».

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

А сам файл сохраните как «page-no-sidebars.php ».
Залейте новый созданный файл «page-no-sidebars.php » через FTP ко всем файлам темы.

○ Подключение нового шаблона к странице

В админке WordPress на любой уже созданной странице (или на той, которую вы создадите) с правой стороны найдите пункт «Шаблон ». Вот в этом пункте выберите ваше название нового шаблона страницы (в моем случае это «новая страница для сайт »):

Сохраняйте и смотрите результат.

Способ №2

Способ №2 отличается от Способа №1 тем, что следует называть файл конкретным названием:

Page-{слаг-страницы}.php

Например: page-contact.php

Page-{ID-страницы}.php

Например: page-12.php

Объясняю.

При создании страницы автоматически ей присваивается url-адрес. Его можно изменить так, как вам удобно, рекомендую использовать плагин rustolat ():

Значит, если УРЛ страницы у меня «proba », тогда файл, который мне нужно создать для этой страницы будет вот таким:

page-proba .php

Если УРЛ страницы была бы «contact », тогда файл для этой страницы был бы вот таким:

page-contact .php

Файл заливаете через FTP ко всем файлам темы. Проверяйте, все должно работать.

Недостаток Способа №2 в том, что файл создается только для одной страницы, все остальные будут стандартными.

Это все! Теперь вы сможете создать для любой страницы уникальный дизайн.

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

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

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

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

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

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

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

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

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

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

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

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

Часто бывает нужно задать какой-либо странице блога на 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 которые можно использовать для применения к ним стилей: