файл index php wordpress
Разбираем и наполняем файл index php WordPress
Разбираем и наполняем файл index php WordPress, знакомимся с некоторыми функциями и переносим часть HTML шаблона в файл index.php WordPress
В прошлой статье мы перенесли часть дизайна из статического HTML файла в WordPress шаблон, тем самым наполнив файл header.php. Теперь пришла пора разобрать содержимое стандартного файла index.php WordPress и перенести еще часть верстки из HTML в WP.
Как устроен файл header.php можно узнать из статьи «Наполняем файл header.php WordPress». Сссылка на все статьи из рубрики «Перенос сайта из HTML в WordPress».
Содержимое стандартного файла index php WordPress
Прежде, чем приступить к наполнению файла index.php, верно будет вкратце объяснить как он устроен и что выполняют функции, заложенные в него.
Стандартный файл index php WordPress из темы Twenty Twelve 1.8
Его мы возьмем за основу index.php нашей темы Start WP.
В коде я вырезал лишь описание, дабы сократить его. Итак, теперь по порядку:
Подключает файл header.php в index.php, тем самым соединяя нашу заготовку в одно целое.
Условный тег, который проверяет, есть ли публикации для текущего запроса. Читайте далее и увидите, что будет выводиться, при отсутствии подходящих постов.
Если есть что выводить, запускается цикл
Циклы в WordPress нужны для вывода страниц и записей. И в зависимости от страницы, на которой находится посетитель, цикл будет отдавать из базы данных соответствующее содержимое.
Например, если посетитель находится на главной странице, то выведется контент, тот, что вы указали в консоли с настройками. Либо это статическая страница, либо записи. Если посетитель находится на странице рубрик, выводятся записи, соответствующие данной рубрике. Если посетитель находится на странице с записью, то выводится сама запись, и так далее.
/* Start the Loop */ — Просто комментарий, разработчики темы пометили начало цикла. И переводится соответственно как «начало цикла».
while ( have_posts() ) : the_post(); — Начало цикла
Cодержимое цикла может состоять из названия записи, рубрики, страницы, самого контента, даты, названия рубрики, меток, автора, и так далее.
endwhile; — окончание цикла.
Далее вкратце пробегусь по коду, так как все самое основное — это вывод цикла.
Функция постраничной навигации.
Это то, о чем я писал выше. Если нет подходящего по запросу посетителя контента, то начинается вывод различных, я их назову вспомогательными, шаблонов и служебных функций.
Например, Показывать различные сообщения для зарегистрированного пользователя, который может добавлять записи:
Для всех остальных выводить запись типа «Ничего не найдено» с поисковой формой:
Функции вызова сайдбара и футера шаблона соответственно.
Создаем основную разметку файла index.php WordPress
Хватит теории, давайте займемся разметкой нашего шаблона Start WP. Так как мы делаем сайт с использованием сетки Bootstrap, нам нужно разметить соответствующим образом все файлы. Файл header.php мы уже разметили и даже наполнили, теперь пришла пора заняться файлом index.php
Откроем файл index.php нашей темы и дополним его стандартным содержанием. Скопируйте код, приведенный в самом начале статьи, и вставьте в индексный файл. Только описание оставьте наше, из прошлых занятий.
После того, как вставите код, WordPress выдаст ошибку такого рода:
Теперь ошибка устранена, а саму функцию мы пропишем позже.
Давайте пока вообще уберем, а лучше закомментируем весь цикл WordPress таким образом:
поставим нашу html разметку из исходников:
Я не стал публиковать весь код, он достаточно большой, в исходниках все помечено комментариями. Смотрите скрины.
Позже этот отрывок кода раскидаем по разным файлам, часть заменим функциями WordPres. А пока должно получиться вот так, без сайдбара и футера:
Если есть желание, пропишите линки на картинки, для чистоты эксперимента 🙂
Скачайте получившийся у меня файл index.php WordPress, для сравнения.
В следующих материалах
Следующим материалом по данной теме будет создание и наполнение сайдбаров WordPress. Очень интересная, на мой взгляд, тема. Следите за обновлениями сайта по FeedBurner, комментируйте, задавайте вопросы.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Продолжаю цикл статей по переносу HTML верстки в WordPress. В прошлом занятии мы первоначально…
Итак, мы уже подготовили минимально необходимые файлы для работы нашего учебного сайта. Теперь пришла…
WordPress index.php
index.php файл-шаблон WordPress
index.php — главный файл-шаблон темы WordPress, на основе которого строится каркас всех остальных файл-шаблонов.
В index.php внедряются подключаемые файлы WordPress: header.php (шапка сайта), sidebar.php (боковая панель, с виджетами, сайта) и footer.php (подвал сайта). Как подключать эти файлы мы рассмотрим в следующих уроках.
Что такое цикл WordPress, мы рассмотрим чуть далее.
Заполним файл index.php
На данный момент, наш файл index.php пустой, заполним его HTML-кодом. Здесь сделаю некоторое отступление, так как данный учебник посвящён созданию тем WordPress, то я не буду объяснять что делает тот или иной HTML или CSS код, но при этом сделаю его наиболее простым, чтобы вы могли полностью сосредоточиться на вопросе темизации WordPress и его функциях.
При открытии вашего сайта, у вас должно появится следующее:
Отформатируем наш HTML-код с помощью CSS. Разместите код расположенный ниже, в файл style.css:
Затем в файл-шаблон index.php, добавьте WordPress функцию, которая подключит файл style.css, к файлу index.php
Код который нужно добавить выделен зелёным цветом, а сама WordPress функция красным.
bloginfo(‘stylesheet_url’) — функция выводящая путь к файлу style.css
В итоге, открыв свой сайт на WordPress, вы должны увидеть следующую картину:
Главный файл иерархии шаблонов WordPress index.php
Итак, давайте будем разбираться в этой схеме (см. видео) визуализации иерархии файлов шаблонов WordPress, что здесь все значит и как с этим работать.
Для этого в предыдущих уроках мы с вами создали такую простую тему, которая состоит из 2-х файлов index.php и style.css.
И давайте приступать к работе.
Если перейти на главную страницу сайта, то у нас отображается просто белый экран. Ничего не отображается.
Почему так произошло?
Дело в том, что у нас сейчас в активной теме есть только один файл index.php и какой бы контент мы не открывали, во всех случаях будем открываться этот шаблон, который сейчас пустой.
Для того, чтобы в этом убедиться, давайте изменим содержимое этого файла и вставим туда простой HTML-каркас.
Сделаем это для того, чтобы было понятно, что у нас отображается этот файл. Пробуем снова перейти на главную страницу и мы с вами, что это у нас файл index.php. У нас появилась черная полоска, благодаря тому, что у нас появился каркас этой страницы.
Куда бы мы с вами не переходили и какой бы контент мы бы с вами не просматривали, у нас в любом случае будет срабатывать шаблон index.php.
Что бы мы с вами не просматривали: рубрики, содержимое, метки, страницы 404 и.т.д. В любом случае будет отображаться файл index.php. Это корень нашей темы WordPress, с помощью которой, соответственно, у нас выводится все содержимое, которое у нас есть на этом сайте.
Попробуйте добиться такого же эффекта у себя и будем переходить к следующим урокам, чтобы начинать разбираться в ветвлении иерархии файлов шаблонов WordPress и посмотрим, как это будет работать.
Иерархия файлов темы (шаблона)
В этом посте речь пойдет о том, какие бывают названия у файлов темы WordPress и за показ какой страницы на сайте отвечает каждый из них. Это очень важные, нужные, и в тоже время очень простые, для понимания, знания. Ими должен обладать каждый, кто работает с WordPress. Ниже полностью расписана структура файлов темы WordPress и порядок их подключения (иерархия).
Об иерархии файлов темы я упоминал в статье «Условные теги в WordPress». А ниже тоже самое, только описано подругому (надеюсь более понятно).
Пример того как работает иерархия
Иерархия, в данном случае — это последовательная проверка на существование файла шаблона. Для контента одной страницы на сайте, может подходить несколько файлов. Проверка какой именно файл будет использован идет по-очереди. Т.е. в WordPress есть список подходящих названий файлов, каждое из названий проверяется по очереди на физическое существование такого файла, как только WordPress видит что файл существует поиск подходящего файла прекращается и найденный файл используется в качестве шаблона.
Другие файлы темы
Также, в WordPress есть общепринятые подключаемые файлы. Он не участвуют в иерархии, а просто подключаются вручную там где нужно. Например файл sidebar.php подключается в файле шаблона темы с помощью функции get_sidebar().
Список таких «подключаемых» файлов:
Типы страниц и названия файлов
Теперь когда мы понимаем как работает иерархия, давайте посмотрим на все варианты названий файлов, которые WordPress пытается найти при посещении той или иной страницы сайта.
Полная схема для всех видов страниц и подходящих для них файлов выглядит так:
Теперь, я распишу эту картинку, сделаю из неё список страниц сайта и подходящие для них php файлы темы.
Файлы из списка ниже должны находится в папке темы.
Записи
Страница (запись page)
Запись (запись post)
Произвольный тип записи
Вложение
Полный список MIME типов смотрите в описании get_allowed_mime_types().
Архивы
Рубрика
Метка
Таксономия
Страница архива типа записи
Страница автора
Страница архива по дате (день, месяц, год)
404 страница
Страница поиска
Главная страница
Страница блога
Страница блога появляется, когда для главной выбрана постоянная страница
Встраивания (embeds)
Шаблоны встраивания используются когда запрашивается короткая версия статьи для добавления её на другом сайте. Обычно такие URL выглядят так: http://dom/post-url/embed Встраивания появились в версии 4.5 и позволяют встраивать ваши записи в чужие сайты. См. get_post_embed_url()
Чтобы изменить только контент встраивания, можно в теме создать файл embed-content.php и описать там HTML. Оригинальный HTML находится в файле движка /wp-includes/theme-compat/embed-content.php
Как это работает в коде ядра
За всю логику: какой файл подключать, отвечает файл ядра wp-includes/template-loader.php. Если разобраться, в нем все описано. Но, это занятие не особо интересное, поэтому я его распишу.
Дальше идут проверки по всем условным тегам где выясняется какой файл шаблона подходит под текущий запрос. Проверяется условный тег, затем еще один и еще. Как только один из условных тегов сработал, вызывается соответствующая функция, которая находит подходящий файл шаблона и возвращает путь до него. Все такие функции описаны в get_query_template().
Дальше, файл подключается в PHP и запускается визуальная часть генерации страницы.
Фильтры
Иерархию файлов можно изменить через динамические фильтры:
Пример использования такого фильтра смотрите в ответе на этот вопрос.
WordPress.org
Codex
Основы шаблонов
Contents
Файлы шаблонов это основной строительный материал вашего сайта на WordPress. Они соединяются вместе как кусочки пазла для формирования web-страниц на вашем сайте. Некоторые шаблоны, например, заголовок (header) и «подвал» (footer) обычно используются на всех web-страницах сайта, в то время как остальные могут использоваться только при некоторых условиях.
Традиционная web-страница состоит из двух файлов:
В WordPress присутствует структура (X)HTML и стили CSS, но контент формируется «за кулисами» различными файлами шаблона. Файлы шаблона и таблицы стилей хранятся вместе с темой WordPress. Чтобы узнать больше про создание тем, прочтите статью Создание_тем.
Структура страницы WordPress
Простая web-страница WordPress сделана из трех основных блоков: заголовок (header), контент и подвал (footer). Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.
Основные файлы шаблона
Чтобы сформировать структуру темы WordPress, начните с файла шаблона index.php в папке вашей темы. У этого файла две основные функции:
В нашей упрощенной структуре нам достаточно включить два других файла шаблона: заголовок и подвал. Они должны быть названы header.php и footer.php. Теги шаблонов, которые включают их, выглядят так:
Если нужно показать записи и страницы вашего блога (и настроить их внешний вид), файл index.php должен запустить цикл WordPress между вызовами файлов заголовка и подвала.
Более сложные структуры страниц
Множество тем WordPress используют одну или несколько боковых панелей, которые содержат меню навигации и дополнительную информацию о вашем сайте. Боковая панель формируется с помощью файла шаблона sidebar.php. Он может быть включен в файл шаблона index.php с помощью следующей строки (теги шаблонов):
А где все остальное?
Заметьте, что мы не включили шаблонный тег для «получения» контента нашей web-страницы. Это потому, что контент формируется в цикле WordPress, внутри index.php.
Также стоит отметить, что таблицы стилей темы определяют внешний вид и положение заголовка, подвала, боковой панели и контента в браузере пользователя. Чтобы узнать больше об изменении дизайна ваших тем WordPress и web-страниц, смотрите Дизайн и раскладка блога.
Файлы шаблонов внутри файлов шаблонов
Вы узнали, как WordPress включает стандартные файлы шаблона (заголовок, подвал и боковую панель) в файле index.php. Но вы также можете включить и другие файлы шаблона в любом из ваших файлов.
Например, sidebar.php может содержать файл шаблона, который формирует строку поиска — searchform.php. Т.к. это не один из стандартных файлов шаблона WordPress, код для включения будет немного отличаться:
Нам больше не нужно использовать «include» и «TEMPLATEPATH» для вставки нашей формы поиска в темы, т.к. WordPress предоставляет нам вышеуказанный тег шаблона.
Множество тем WordPress включают в себя различные файлы шаблона для формирования web-страниц на сайте. Ниже приведен список типичных файлов для основного шаблона ( index.php) сайта на WordPress:
Но, в любом случае, эту структуру можно изменить. Например, вы захотите вставить строку поиска в заголовок. Или ваш дизайн не предполагает использование подвала, так что его можно вообще не использовать.
Специальные файлы шаблона
В WordPress существуют два основных вида страниц на сайте. Вид одиночной записи используется, когда web-страница показывает одну запись из блога. Вид нескольких записей выводит список множества записей блога или сводку записей, и применяется к архивам категорий, архивам дат, архивам автора и (обычно) к «нормальному» виду домашней страницы блога. Вы можете использовать файл шаблона index.php для формирования всех этих типов страниц или положиться на иерархию шаблонов для выбора других файлов шаблона в зависимости от ситуации.
Иерархия шаблонов WordPress отвечает на следующий вопрос:
Какой файл шаблона будет использовать WordPress при формировании определенного типа страниц?
WordPress автоматически распознает файлы шаблона с определенными стандартными именами и использует их для определенного типа страниц. Например, когда пользователь кликает на заголовок записи блога, WordPress знает, что тот хочет увидеть именно эту статью на своей собственной странице. Иерархия шаблонов WordPress будет использовать файл шаблона single.php вместо index.php для формирования страницы — если в вашей теме есть файл single.php. Так же, если пользователь кликнет на ссылку для конкретной категории, WordPress будет использовать шаблон category.php, если найдет его; если нет, он будет искать archive.php, а если и этот шаблон не существует, WordPress будет использовать основной шаблон index.php. Вы можете сделать специальный шаблон для конкретной категории (см. Шаблоны категорий), или даже шаблоны для конкретных страниц.
Советы по файлам шаблонов
Здесь приведены несколько советов по созданию файлов шаблонов:
Отслеживайте открывающие и закрывающие теги Файлы шаблона подразумевают использование тегов XHTML и ссылок на CSS. Элементы HTML и ссылки на CSS могут «пересекать» файлы шаблона, т.е. начинаться в одном файле и заканчиваться в другом. Например, HTML элементы html и body обычно начинаются в header.php и заканчиваются в footer.php. Большинство тем WordPress используют HTML элементы div, которые также могут охватывать несколько файлов. Например, основной div для контента страницы может начаться в header.php и закончиться либо в index.php, либо в single.php. Отслеживание начала и конца элементов HTML может быть довольно сложным в процессе разработки или изменения тем. Используйте комментарии чтобы отмечать в файлах шаблона, где открываются и закрываются теги большого контейнера, так что вы сможете отслеживать, где какой div, и в какой секции. Тестируйте разные файлы шаблона с разными типами страниц Если вы сделали изменения в шаблоне комментариев, боковой панели, форме поиска или любом другом файле шаблона, протестируйте их на разных типах страниц (одиночная запись блога, разные типы архивов, страницы). Дополнительные комментарии Если вы разрабатываете темы для публикации, то учтите, что тот, кто скачает вашу тему, возможно захочет немного модифицировать ее для собственного использования. Так что будет весьма полезным оставлять комментарии в ваших файлах шаблона в тех местах, где вы сделали изменения относительно стандартной логики классических тем. Также неплохо будет добавить комментарий, если вы подключили свою собственную таблицу стилей где-нибудь в header.php. Не забывайте закрывать HTML теги Если вы открыли тег (например, div) в одном файле шаблона и не закрыли его там же, убедитесь, что тег закрыт в другом файле. На форуме WordPress полно вопросов типа «что случилось с моей темой??», когда начинающий разработчик удаляет шаблон footer.php и при этом не закрывает теги, открытые в заголовке. Следите за вашими тегами. Хороший способ найти ошибки на странице — проверить ее в HTML валидаторе. Таблицы стилей CSS в шаблонах Вы можете использовать любые HTML и CSS теги и стили, которые захотите. Однако, мы рекомендуем следовать стандартной структуре тем WordPress (см. Site Architecture 1.5). Это сделает ваши темы более понятными для других пользователей.
Дополнительная информация
Для получения более полной информации по файлам шаблона, ознакомьтесь со статьей Шаблоны. Также вы можете посмотреть другие статьи в Category:Templates и Category:Template Tags.