Разбираем и наполняем файл 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: файлы сайта
WordPress — это самая популярная система управления сайтов, помогающая быстро и легко запустить собственный проект. Она пользуется повышенной популярностью за счет легкой установки функционала и использования плагинов.
Однако, иногда приходиться работать в качестве программиста исправляя код сайта.
Для того, чтобы не нарушить работоспособность функций и выполнить задачу потребуется изучить и вникнуть структуру (иерархию) сайта, а также ознакомиться с каталогом файлов в CMS WordPress. Это позволит сразу понять, где лучше всего искать решение проблемы и какой код сайта нужно исправить для выполнения цели.
Особенно полезны эти навыки, если появилось желание изменить шаблон темы Вордпресс или добавить/удалить из него имеющиеся функции вывода.
Файлы WordPress (корневой каталог)
Корневой каталог WordPress — это важная информация для тех, кто хочет понять, как работает их CMS. Изучение данной структуры поможет понять, как изменить свой сайт, без обращений к программистам. Выглядит коневой каталог так:
Здесь главными файлами являются:
Для того, чтобы понять, как тот или иной файл влияет на работу CMS следует ознакомиться с иерархией файлов в следующей главе.
Структура сайта – иерархия
Иерархия сайта (шаблонов) в WordPress является показателем того, какой файл задействован в той или иной функции. В данном случае используются стандартные скрипты CMS, которые имеются в любой версии сайта.
Используя данные рекомендации и шаблоны можно самостоятельно изменить внешний вид тех или иных страниц, создав собственный и красивый шаблон.
Заключение
Изучение каталога и иерархии файлов CMS WordPress помогает разобраться в работе имеющегося сайта. Дополнительно, при наличии хороших знаний в этой теме, можно без обращений к программистам изменить:
В дальнейшем имеющиеся данные помогут в значительной степени помочь в реализации новых проектов, делая их лучше и выполняя работу быстрее. Дополнительно, не понадобиться тратить время на создание ТЗ для программиста, ожидать пока у него не появиться время на выполнение задания, а также запускать даже самые сложные проекты.
Главный файл иерархии шаблонов WordPress index.php
Итак, давайте будем разбираться в этой схеме (см. видео) визуализации иерархии файлов шаблонов WordPress, что здесь все значит и как с этим работать.
Для этого в предыдущих уроках мы с вами создали такую простую тему, которая состоит из 2-х файлов index.php и style.css.
И давайте приступать к работе.
Если перейти на главную страницу сайта, то у нас отображается просто белый экран. Ничего не отображается.
Почему так произошло?
Дело в том, что у нас сейчас в активной теме есть только один файл index.php и какой бы контент мы не открывали, во всех случаях будем открываться этот шаблон, который сейчас пустой.
Для того, чтобы в этом убедиться, давайте изменим содержимое этого файла и вставим туда простой HTML-каркас.
Сделаем это для того, чтобы было понятно, что у нас отображается этот файл. Пробуем снова перейти на главную страницу и мы с вами, что это у нас файл index.php. У нас появилась черная полоска, благодаря тому, что у нас появился каркас этой страницы.
Куда бы мы с вами не переходили и какой бы контент мы бы с вами не просматривали, у нас в любом случае будет срабатывать шаблон index.php.
Что бы мы с вами не просматривали: рубрики, содержимое, метки, страницы 404 и.т.д. В любом случае будет отображаться файл index.php. Это корень нашей темы WordPress, с помощью которой, соответственно, у нас выводится все содержимое, которое у нас есть на этом сайте.
Попробуйте добиться такого же эффекта у себя и будем переходить к следующим урокам, чтобы начинать разбираться в ветвлении иерархии файлов шаблонов WordPress и посмотрим, как это будет работать.
Файл index php wordpress
Статья посвящена файлам шаблона WordPress! Предупреждаю сразу – внимательно изучив данный материал Вы с легкостью будете ориентироваться в своем шаблоне и сможете практически моментально находить нужное место в нем. Мне кажется любой блоггер, который владеет ресурсом на WP, должен понимать из чего состоит его блог – а то получается: все работает, но что да как – без разницы! 
Не поленитесь и прочитайте данную статью до конца – и она обязательно поможет Вам в будущем или даже в настоящем! Как только понадобиться что-то изменить или добавить в шаблон, или Вам захочется написать свою собственную тему – за плечами уже будет необходимые знания о том как и что тут устроено.
Для начала предлагаю посмотреть из чего состоит Ваш шаблон. Для этого из административной панели перейдите по вкладкам: “Дизайн” → “Редактор”:
В правой колонке Вы увидите примерно следующую картину, в зависимости от установленной версии WordPress:
Не стоит пугаться их названий и неизвестностью. Открыли, посмотрели, закрыли. А после прочтения данного материала открыли снова и сравнили результат. Итак, давайте начнем по пунктам и с использованием живого примера!
Последовательность изучения файла шаблона обусловлена логическим строением любого блога.
1 файл: index.php – шаблон главной страницы.
За вывод главной страницы ответственен файл шаблона index.php. Именно в нем прописано все, что Вы видите на блоге вбивая его адрес в строку браузера!
2 файл: single.php – шаблон записей.
Вы прямо сейчас находитесь на странице записи. Именно шаблон записи задает оформление к ним. Вы с легкостью можете побродить по записям этого блога и увидеть что страница выглядит везде одинаково – отличается только контент, все другие элементы сделаны по шаблону single.php.
3 файлs: page.php – шаблон страниц.
Система управления контентом позволяет пользователям добавлять на блог не только записи, но и страницы, для которых существует отдельный шаблон: page.php. Два примера страниц: услуги, контакты. Естественно шаблон страниц от шаблона записей может отличаться, например у меня на страницах нет формы комментирования, формы подписки, блока кнопок социальных сетей и похожих записей.
4 файл: archive.php – шаблон архивов/рубрик.
По сути принцип работы страниц, созданных при помощи шаблона archive.php такой же как и у главной страницы (index.php) – он выводит список записей, но отличие конечно есть: при помощи данного файла создаются страницы разделов, архивов или меток. Например: страница категории Инвестиции.
5 файл: style.css – файл стилей.
Этот файл находится в самом низу списка, а над ним стоит говорящая надпись: “Стили”. Именно файл style.css отвечает за все визуальное оформление блога – цвета, шрифты, месторасположение элементов относительно друг друга и так далее.
По сути это все необходимые файлы, которые требуются для функционирования блога на CMS WordPress. Но остается открытым вопрос: если это все что нужно, то почему тогда в любой теме больше файлов?
Любой блоггер наверное замечал, что некоторые элементы повторяются на всех страницах, это:
Что бы каждый раз не прописывать то, что должно находится в этих местах на блоге в файлах: index.php, single.php, page.php и archive.php было принято решения создать файлы шапки, подвала и боковой колонки и ссылаться на них.
6 файл: header.php – шаблон шапки.
В этом файле прописано то, что должно выводится в верхней части блога:
7 файл: footer.php – шаблон подвала.
В файле footer.php прописано то, что должно выводится в нижней части блога:
8 файл: sidebar.php – шаблон боковой колонки.
Файл sidebar.php как правило не задействуют при правке шаблона, так как в WordPress предусмотрено его редактирование через виджеты (которые подключены специальным файлом functions.php – о нем ниже). Когда я создавал тему я добавил поддержку виджетов, однако у меня сейчас не добавлен ни один из них, все таки кому как удобней – мне легче отредактировать файл sidebar.php и дописать непосредственно туда все, что требуется:
9 файл: comments.php – файл комментариев.
В этом файле прописан вывод комментариев. Поэтому в single.php после кода вывода статьи прописывается “ссылка” на этот файл, так же этот файл может быть вызван и на страницах – page.php. Часто встречается вариант, когда часть функционала комментариев прописывается в файле functions.php.
10 файл: functions.php – функции темы.
Пожалуй самый непонятный и “могущественный” файл в сборке любого шаблона WordPress. С его помощью можно сделать с блогом практически все, что угодно. Вот несколько примеров, что мы может сделать редактируя этот файл:
Итак 10 файлов, необходимые для оптимального и полноценного функционирования шаблона WordPress:
Так же отмечу еще 5 файлов шаблона WordPress, которые встречаются довольно часто и которые обычно я созданию при написании темы:
11 файл: 404.php – шаблон 404 ошибки.
Когда Ваш блог не загружается браузер выдает 404 ошибку. Для того чтобы эта страница была красиво оформлена создается ее шаблон. Сейчас у меня на блоге самый примитивный вариант: в этом файле прописан вызов шапки, сайдбара и футера и появляется надпись, что страница не найдена:
12 файл: searchform.php – шаблон формы поиска.
Форма поиска может находится на сайте не в одном месте. Банальный пример – форма поиска в шапке и дублирующая форма на странице с результатами поиска, а может кто-нибудь еще и в сайдбар ее вставит. Поэтому чтобы не прописывать каждый раз длинный код этой формы и создается данный файл, а в том месте где ее нужно вывести ставится “ссылка” на него.
13 файл: search.php – шаблон результатов поиска.
Принцип работы этой страницы такой же как и файла index.php или archives.php, только список статей должен соответствовать введенному поисковому запросу.
14 файл и 15 файл: loop.php и theloop.php – файлы циклов вывода статей.
Создавать эти файлы необязательно, однако мне удобней работать с ними, что бы не делать больше файлы index.php и archives.php. “Лупы” содержат алгоритм вывода списка статей по параметрам (последние записи на главной или записи из одной категории на “архивной” странице). Так же эти файлы у меня имеют разное оформление:
Если Вы внимательно прочитали статью, то наверняка заметили что шаблон главной страницы (index.php) и страниц рубрик (archives.php) состоят из запросов к другим шаблонам, то есть “своей информации” в файле index.php нет никакой, есть лишь запросы к файлам (сверху вниз, слева направо по разметке страницы):
Чтобы укомплектовать все знания и запомнить наиболее распространенный вариант шаблона WordPress я создал вот такую картинку, в которой все собрал в одном месте. После прочтения данной статьи вопросов: что? откуда и куда? наверняка не останется, а графическая часть закрепит пройденный материал:
Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов
Скачать исходный файл
Данная статья является 2 из 3 частей цикла «Создаем тему WordPress на базе статического HTML» :
В первой части этой серии статей я рассказала вам, как подготовить файлы HTML и CSS для конвертации в WordPress, как правильно задать структуру, корректный код и классы.
В этой статье вы узнаете, как разделить ваш файл index.html на набор файлов шаблонов для использования в WordPress.
Что вам потребуется:
Для выполнения этого урока вам потребуются основные инструменты для редактирования HTML и PHP:
Редактор по вашему выбору.
Что такое файлы шаблонов?
Однако в хорошо проработанной теме содержимое файла index.php должно быть разделено на основной файл шаблона (index.php) и набор включаемых файлов. Это файлы, содержащие код для заголовка, боковой панели и подвала страницы.
В некоторых темах дополнительные включаемые файлы используются через Цикл; я расскажу об этом подробнее в четвертой части данного цикла.
Данные файлы называются « включаемые », потому что вы вставляете в файл index.php код, который сообщает WordPress, что их содержимое нужно включить в страницу.
Наш файл index.html будет разделен на четыре PHP-файла:
В этой серии вы добавите к этим файлам элементы, с помощью которых в вашу тему можно будет включить виджеты, меню и циклы, а также обращения, которые будут использоваться плагинами. Вы также добавите дополнительные файлы шаблонов для отображения различных типов контента.
Но сейчас все, что нам нужно сделать, это создать набор PHP-файлов и распределить между ними содержимое нашего файла index.php.
Создаем файлы PHP
Для начала мы создадим пустые файлы. Создайте четыре пустых файла со следующими названиями и откройте их в редакторе кода:
Заполнение файла Header
Откройте файл index.html и выберите все от объявления DOCTYPE до открытия тега div :
Скопируйте данный код и вставьте его в файл header.php.
Заполнение файла боковой панели
Теперь повторите все те же действия для файла боковой панели.
Если ваш файл index.html, имеет выделенный элемент aside >, и все, что касается сайдбара, содержится в нем.
Скопируйте данный код в файл sidebar.php и сохраните изменения.
Заполнение файла футера
Процесс заполнения файла footer.php идентичен.
Скопируйте весь код, который располагается после сайдбара в вашем файле index.html:
Заполнение файла Index
И последним этапом будет непосредственно создание файла index.php. Сделать это будет немного сложнее, вам придется добавить некоторые функции PHP, которые WordPress использует для включения заголовка, боковой панели и подвала.
Откройте пустой файл index.php и добавьте код, приведенный ниже:
Убедитесь, что между началом включаемого заголовка и включаемой боковой панелью оставлено пространство — сюда вы будете добавлять содержимое индексного файла, которое не является частью ни заголовка, ни боковой панели, ни футера.
Теперь откройте файл index.html еще раз и выберите весь код между открывающимся блоком элемента class=»main» и боковой панелью:
Сохраните изменения в файле index.php.
Подводим итоги
Теперь у нас есть основа для темы WordPress. Вы превратили ваш HTML-файл в набор файлов PHP и настроили их на совместную работу.
В следующей части этой серии статей я расскажу вам, как оредактировать таблицу стилей, чтобы создать рабочую тему, и загружу тему в WordPress.