• ×

    • Создание шаблона страницы wordpress. Отдельный шаблон страницы WordPress

    13.07.2019

    Те, кто пробовал хоть раз создавать темы или ковыряться в их коде, знают, что за стиль всех страниц сайта отвечает шаблон «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 показывает ее содержимое исходя из варианта создания страниц (подробнее ниже).

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

    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 , загружаем на сервер.

      Категория-1

      have_posts()) : $the_query -> the_post(); ?>
    • ">

      Категория-2

      have_posts()) : $the_query -> the_post(); ?>
    • ">

      Категория-3

      have_posts()) : $the_query -> the_post(); ?>
    • ">

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

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

    "; } ?>

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

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

    Записи и страницы являются основными типами постов для размещения контента на сайте. И между ними есть несколько отличий.

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

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

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

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

    Почему бы не использовать разные шаблоны страниц?

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

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

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

    Наиболее известный пользовательский шаблон страницы - это Archive (шаблон архивной страницы archive.php ). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.

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

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

    • Контактную форму
    • Страницы без сайдбара (боковой панели)
    • Лендинговую страницу (посадочную страницу)
    • Индекс блога

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

    Как выбрать шаблон для страницы?

    Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы ». Оно размещено под окошком «Опубликовать ».

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

    Шаблон также можно изменить другим способом - через список всех страниц. Нужно только нажать на «Свойства ».

    Затем изменить шаблон в опциях меню справа.

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

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

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

    Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve . Файл page.php имеет следующий код:

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

    /* Template Name: My Custom Page Template */

    Шаблон вашей страницы будет выглядеть следующим образом:

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

    В стандартном шаблоне сайдбар страницы отображается с правой стороны:

    Стандартный шаблон страницы в теме Twenty Twelve

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

    Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.

    По сути, наш шаблон - это шаблон от page.php темы Twenty Twelve, только с удаленным кодом .

    Он выглядит так:

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

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

    Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:

    За стиль основной части контента отвечает вторая часть class="site-content" . Если проверить файл стилей (style.css ) темы, то можно заметить, что этот класс находится почти в самом низу:

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

    Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100% . Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php . Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.

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

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

    После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:

    Наш финальный шаблон будет выглядеть так:

    Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:

    Теперь контент на сайте отображается по всей странице

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

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

    Согласно WordPress Template Hierarchy , WordPress отображает шаблоны для страницы в следующем порядке:

    • Пользовательский шаблон (Custom Template)
    • page-{slug}.php
    • page-{id}.php
    • page.php
    • index.php

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

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

    Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.

    Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.

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

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое