Wordpress привязать страницу к файлу
Обновлено: 04.07.2024
Рассмотрим еще одну важную особенность тем WordPress. Как вы уже успели заметить, некоторые из файлов шаблона (к примеру, header.php) не привязаны к определенным страницам или типам страниц. Когда же они используются? WordPress включает в себя группу функций, выполняющих подключение различных компонентов страницы:
Изменение футера
Следующий шаг редактирования домашней страницы заключается в изменении футера. Нам необходимо, чтобы в нем был отображен список всех страниц верхнего уровня блога. Мы знаем, что get_footer выполняет поиск файла, имеющего имя footer.php. Для того, чтобы вызвать собственный файл футера, необходимо отыскать следующую конструкцию в home.php:
и заменить ее на:
Тем самым мы переопределим стандартный вид футера для главной страницы. Однако, этим дело не ограничивается. Теперь нам надо создать файл footer-homepage.php и добавить в него некоторый код, который может иметь, к примеру, следующий вид:
На 13 строке появляется thematic_footer: он управляет отображением текста в футере, который можно задать в панели настроек Thematic. Подробнее о создании произвольных панелей настроек мы сможем узнать из последующих разделов.
Для того, чтобы вставить список страниц, необходимо использовать функцию wp_list_pages. Мы могли бы сразу добавить ее в наш новый файл футера и она бы отлично работала, но мы пойдем несколько иным путем. Спрячем объявление wp_list_pages в файл functions.php. Указанный файл выступает вместилищем всей функциональности, которую вы добавляете к своей дочерней теме. Сохранив генератор списка страниц в файле functions.php, мы можем быть уверены в том, что если нам понадобится вызвать его в других частях шаблона, мы сможем это сделать легко и быстро. Откройте файл functions.php и добавьте к нему свою первую пользовательскую функцию:
Теперь, когда мы создали нашу функцию, вызвать ее из футера можно следующим образом:
Результат можно будет увидеть в браузере. Для того, чтобы список страниц имел более интересное представление, к нему можно добавить стили CSS. Вот лишь некоторые из полезных стилей:
В следующем разделе мы рассмотрим еще один мощный механизм WordPress, позволяющий решать разнообразные задачи: хуки и фильтры.
Плагин Include Me поможет Вам подключить в записи или страницы сайта отдельные файлы, обычно разделяемые между разными страницами или записями, и содержащие PHP, HTML или иной код, который может быть испорчен визуальным редактором WordPress.
Загрузить плагин можно здесь:
Правильное написание шорт кода плагина
На практике, и я в свое время отказался от использования данного плагина в связи с тем что при подключении отдельного файла WP издавал множество ошибок, а (найденные на просторах инета) решения (которые обязывали переписывать часть кода плагина) не совсем являлись адекватными. Ведь после очередного обновления все примененные настройки тупо слетят. Как оказалось все намного проще, в шорт коде плагина необходимо указывать путь к встраиваемому (отдельному) файлу без слеша в начале строки, то есть как указано ниже:
Пример вставки пути в шорт код плагина include-me :
Именно без слеша в начале ссылки
Документация плагина:
Include Me – мощный плагин, который позволяет включать в контент сайта внешний HTML или PHP-файл или содержимое другой публикации / страницы. Когда вы включаете файлы PHP, они будут исполняться и подключаться в основной вывод, поэтому вы можете создавать независимые скрипты, которые могут быть доступны практически из любой части сайта.
Официальная страница документации плагина:
Пример №1
Вы хотите опубликовать отчет, сгенерированный некоторыми запросами в базе данных. Просто создайте такой скрипт и создайте для его вывода файл.html. Затем подключите данный файл на странице используя шорткод Include Me.
Пример №2
Вам нужна специальная страница с вашим виджетами Facebook Fan Page (которая состоит из Javascript). Просто создайте *.js файл с кодом виджета Facebook и подключите его в любом удобном для Вас месте при помощи Include Me шорт кода.
Включение может быть сделано и в IFRAME если потребуется создать элемент показывающий внешнюю веб страницу.
Основные методы применения плагина
где атрибут «file» содержит имя файла, которое должно быть включено. Любой текстовый файл может быть включен, и, если он является файлом PHP (с расширением «.php»), он будет выполнен и включен его вывод.
Имя файла может быть относительным (не начинаться с «/»), поэтому его будут искать, начиная с корневой папки блога (для техников ABSPATH будет добавлен в начале). Если имя файла является абсолютным (начиная с «/»), оно будет использоваться как есть (поэтому вы можете включать файлы, даже внешние из корневой папки сайта).
Подключение других записей или страниц
«post_id» – это числовой идентификатор записи или страницы (наведите на кнопку редактирования для нужного контента в админ панели, параметр ID можно увидеть и таким образом).
Подключение iframe
Второй синтаксис доступен и вместо этого генерирует iframe для включения файла. Синтаксис iframe:
«url» — это сторонний веб-адрес. Любой другой атрибут, добавленный в короткий тег, будет использоваться как атрибут iframe. Например, если вы пишете:
Передача переменных
Если вы подключите скрипт PHP, он может получить доступ к атрибутам короткого кода, используя синтаксис $attrs[‘attribute name’]. Например, вызов:
При содержимом файла out.php
Вывод будет, конечно:
Таким образом, вы можете создать общий скрипт и сделать его доступным другим скриптам, используя атрибуты shortcode.
Я широко использовал этот плагин как в своих блогах, так и в сторонних проектах.
Типы постов на WordPress являются самым широким полем деятельности для разработчиков. Изначально WordPress включает в себя 5 основных типов постов: запись, страница, вложение, ревизия и навигационное меню.
Записи и страницы являются основными типами постов для размещения контента на сайте. И между ними есть несколько отличий.
Записи, как правило, отображаются в обратном порядке на главной странице блога, а страницы отображаются без даты публикации. Категории и тэги также могут быть привязаны к записям, а к страницам нет (хоть и это можно сделать в настройках).
Дизайн страниц так же легко можно изменить, если использовать различные шаблоны страниц. Они позволят изменить стиль любой страницы на вашем сайте.
Давайте рассмотрим более детально, какие шаблоны страниц существуют, и как их можно использовать для сайта.
Почему бы не использовать разные шаблоны страниц?
В темах WordPress обычно используется шаблон page.php, который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).
По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.
Создание уникального шаблона страницы позволяет выйти за рамки стандартов WordPress и изменить отображение содержимого на сайте на свое усмотрение. Например, вы могли бы изменить дизайн страниц, удалив сайдбар. Также можно изменить привычный шрифт и использовать другую шапку, а не ту, которую предлагает домашняя страница.
Наиболее известный пользовательский шаблон страницы - это Archive (шаблон архивной страницы archive.php). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.
Многие шаблоны архивов также отображают полный список записей в блоге и поле для поиска записей на сайте. По сути, шаблон архива - это карта сайта, с помощью которой пользователь может найти то, что ищет.
В темах можно найти и другие типы шаблонов страниц, как например:
Возможности шаблонов страниц безграничны. Все зависит от того, насколько удобным вы хотите сделать свой сайт для конечного пользователя.
Как выбрать шаблон для страницы?
Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы». Оно размещено под окошком «Опубликовать».
В атрибутах страницы можно выбрать родительскую страницу и порядок ее размещения на сайте в соответствующем поле. А опция между ними позволяет изменить шаблон. Все что нужно сделать - это выбрать шаблон для страницы и обновить ее.
Шаблон также можно изменить другим способом - через список всех страниц. Нужно только нажать на «Свойства».
Затем изменить шаблон в опциях меню справа.
Опции шаблона не будут отображаться, если в вашей теме используется только стандартный шаблон страницы.
Создаем базовый шаблон страницы для сайта
Создать новый шаблон страницы для вашего сайта на WordPress легче, чем вы думаете. Для этого не нужно иметь опыт в разработке и создании тем или плагинов.
Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve . Файл page.php имеет следующий код:
Можно использовать этот код для создания шаблона новой страницы. Для этого нужно только убедиться, что комментарий к коду размещен вверху нового файла. Это определит данный файл как шаблон страницы:
Шаблон вашей страницы будет выглядеть следующим образом:
Давайте рассмотрим процесс создания базового шаблона страницы и попробуем создать шаблон страницы в полную ширину без использования сайдбара. Тема Twenty Twelve изначально включает в себя шаблон в полную ширину, но мы сделаем вид, что это не так, потому что нам это нужно для нашего обучения.
В стандартном шаблоне сайдбар страницы отображается с правой стороны:
Стандартный шаблон страницы в теме Twenty Twelve
Создать шаблон новой страницы без сайдбара просто.
Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.
По сути, наш шаблон - это шаблон от page.php темы Twenty Twelve, только с удаленным кодом < ?php get_sidebar(); ? >.
Он выглядит так:
После загрузки файла шаблона в вашу тему его можно использовать для всех страниц. Можно также привязать страницу к этому шаблону, чтоб удалить ее сайдбар.
Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы. А пока он занимает только две третьих страницы:
Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:
За стиль основной части контента отвечает вторая часть class="site-content" . Если проверить файл стилей (style.css) темы, то можно заметить, что этот класс находится почти в самом низу:
Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100%. Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php. Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.
Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:
После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:
Наш финальный шаблон будет выглядеть так:
Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:
Теперь контент на сайте отображается по всей странице
Все, что указано выше, можно сделать в любой теме WordPress. Для этого удалите сайдбар из созданного шаблона страницы и убедитесь, что вы меняете нужный класс таблицы стилей.
Как называть шаблоны страниц
Согласно WordPress Template Hierarchy , WordPress отображает шаблоны для страницы в следующем порядке:
- Пользовательский шаблон (Custom Template)
- page-.php
- page-.php
- page.php
- index.php
Вам будет проще, если вы будете иметь представление о порядке этих шаблонов, потому что так вы поймете, почему страница оформлена тем или иным образом.
Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-.php.
Если шаблон page-.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.
Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут. На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.
Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:
Заходим в админ. панель WordPress
Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.
В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:
В файле header.php можно вывести логотип вот таким образом:
Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.
Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.
Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.
Выносим структуру статей в файл content.php и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen». Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет, поэтому копируйте код ниже.
Вывод списка категорий на WordPress:
Вывод даты публикации на WordPress:
Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.
В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:
Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.
На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.
Читайте также: