Создание шаблона страницы для 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 есть пункты Записи и Страницы , с помощью которых можно добавлять на сайт контент. Записи предназначены для добавления постов (заметок, статей) в блог, страницы стоит создавать для не подпадающей под рубрики информации - «Главная», «О нас», «Контакты». Для создания записи щёлкните Записи -> Добавить новую .
Открылась страница с текстовым редактором, в котором и создаётся контент. По умолчанию редактор работает в визуальном режиме, то есть вы сразу можете видеть, как будет выглядеть содержимое в браузере, и работать с ним примерно так же, как, например, в Microsoft Word. Если возможностей визуального редактора вам не хватает, его можно переключить в текстовый режим, и тогда запись будет отображаться в виде HTML-кода, а оформлять контент можно будет с помощью HTML-тегов.
Необходимый минимум для публикации записи - ввести заголовок, добавить содержимое и нажать кнопку Опубликовать . WordPress допускает запись и без заголовка, и без текста, но смысла в таких постах нет.
После публикации запись появится на главной странице сайта.
Перед публикацией рекомендуется посмотреть, как запись будет выглядеть на сайте - за это отвечает кнопка Просмотреть . Если заметка ещё не готова, но вы хотите отложить работу и вернуться к ней позже, то нажмите кнопку Сохранить . CMS сохранит черновик записи для вас, не публикуя его на сайте.
Посту можно задать формат (желательно, чтобы он соответствовал содержимому заметки, например, в записи формата Видео лучше разместить ролик, а не картинки), миниатюру (картинка, которая будет отображаться в анонсе записи на главной странице) и метки. Также вы можете выбрать рубрику, к которой относится публикация. Конечно, за управление разделами отвечает соответствующая вкладка (Записи -> Рубрики ), но новую категорию можно добавить прямо со страницы редактирования записи. Для этого надо щёлкнуть ссылку Добавить новую рубрику , выбрать категорию-родителя и нажать Добавить новую рубрику .
Установка родительских разделов актуальна, когда вы создаёте подкатегории статей. Например, у вас есть обширный раздел «Медицина», вы написали статью о китайской медицине и понимаете, что записей этой подгруппы будет ещё много. Тогда вы создаёте рубрику «Китайская медицина» и в качестве родительской категории указываете «Медицина», получая тем самым подраздел «Китайская медицина» раздела «Медицина».
Созданные записи (и опубликованные, и черновики) можно увидеть на странице Записи -> Все записи . Их можно просматривать, изменять, удалять. Причём менять можно не только текст или заголовок поста, но и такие параметры, как ярлык и дата публикации. Кроме того, каждую запись можно защитить паролем или сделать личной, чтобы кроме вас её никто не видел,
Страница изменения от страницы создания записи почти ничем не отличается.
Из вкладки Записи -> Рубрики можно управлять категориями постов, в том числе задавать им ярлыки и описания, чего страница редактирования записи делать не позволяет.
Работа со страницами мало чем отличается от работы с записями: редактор точно такой же, свойства и действия те же, но есть несколько незаметных с первого взгляда отличий.
В блоке Атрибуты страницы можно указать порядковый номер и выбрать шаблон страницы, от которого будет зависеть её внешний вид. По умолчанию для оформления используется Базовый шаблон , список остальных зависит от активной темы оформления.
В принципе, ничего сложного в управлении записями, рубриками и страницами нет, почти всё интуитивно понятно и не требует пояснений.
Те, кто пробовал хоть раз создавать темы или ковыряться в их коде, знают, что за стиль всех страниц сайта отвечает шаблон «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 .
Вывод элементов на определенных страницах
вывод информации
