Разбираем и наполняем файл 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(); — Начало цикла
get_template_part( ‘content’, get_post_format() ); — Выводится содержимое страницы content.php , другими словами содержимое цикла (в дальнейшем мы познакомимся с этим содержимым).
Cодержимое цикла может состоять из названия записи, рубрики, страницы, самого контента, даты, названия рубрики, меток, автора, и так далее.
endwhile; — окончание цикла.
Далее вкратце пробегусь по коду, так как все самое основное — это вывод цикла.
Функция постраничной навигации.
Это то, о чем я писал выше. Если нет подходящего по запросу посетителя контента, то начинается вывод различных, я их назову вспомогательными, шаблонов и служебных функций.
Например, Показывать различные сообщения для зарегистрированного пользователя, который может добавлять записи:
Для всех остальных выводить запись типа «Ничего не найдено» с поисковой формой:
Это окончание условного тега проверки, самого первого в коде have_posts() . Как в HTML как бы закрывающий тег, только здесь он означает завершение работы функции.
Функции вызова сайдбара и футера шаблона соответственно.
Создаем основную разметку файла index.php WordPress
Хватит теории, давайте займемся разметкой нашего шаблона Start WP. Так как мы делаем сайт с использованием сетки Bootstrap, нам нужно разметить соответствующим образом все файлы. Файл header.php мы уже разметили и даже наполнили, теперь пришла пора заняться файлом index.php
Откроем файл index.php нашей темы и дополним его стандартным содержанием. Скопируйте код, приведенный в самом начале статьи, и вставьте в индексный файл. Только описание оставьте наше, из прошлых занятий.
После того, как вставите код, WordPress выдаст ошибку такого рода:
Обратите внимание на ключевую фразу, которую выдает нам сервер — Call to undefined function twentytwelve_content_nav() Это значит, что вызов функции на странице есть, а саму функцию сервер найти не может. Это вызывается функция постраничной навигации, но так как мы ее еще не прописали в файле functions.php , просто пока закомментируйте ее таким образом:
Теперь ошибка устранена, а саму функцию мы пропишем позже.
Давайте пока вообще уберем, а лучше закомментируем весь цикл WordPress таким образом:
поставим нашу html разметку из исходников:
Я не стал публиковать весь код, он достаточно большой, в исходниках все помечено комментариями. Смотрите скрины.
Позже этот отрывок кода раскидаем по разным файлам, часть заменим функциями WordPres. А пока должно получиться вот так, без сайдбара и футера:
Если есть желание, пропишите линки на картинки, для чистоты эксперимента 🙂
Скачайте получившийся у меня файл index.php WordPress, для сравнения.
В следующих материалах
Следующим материалом по данной теме будет создание и наполнение сайдбаров WordPress. Очень интересная, на мой взгляд, тема. Следите за обновлениями сайта по FeedBurner, комментируйте, задавайте вопросы.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Продолжаю цикл статей по переносу HTML верстки в WordPress. В прошлом занятии мы первоначально…
Итак, мы уже подготовили минимально необходимые файлы для работы нашего учебного сайта. Теперь пришла…
Итак, мы предварительно наполнили файл header.php WordPress прописали мета теги, теперь пришла пора подключить…
Разделы сайта
- HTML СSS в примерах
- Безопасность WordPress
- Внешний вид и Функционал WP
- Выбираем домен и хостинг
- Оптимизация и продвижение
- Перенос сайта из HTML в WordPress
- Плагины WordPress
- Сборник интересных скриптов
- Сервисы и программы
- Шаблоны WordPress
- Юзаем Bootstrap
Реализация идеи
1. Создадим php-файл. Я назвал свой «test.php» и добавил его в корневой каталог с загруженной темой, вот сюда:
Должно получится следующим образом:
2. Для использования всех функций WordPress необходимо подключить «wp-load.php», вставляем приведенный ниже код в наш PHP:
require_once $_SERVER["DOCUMENT_ROOT"]."/wp-load.php";
3. Для примера добавляю в php-файл функцию получения временной зоны сайта с выводом на странице:
$timezone = wp_timezone(); echo $timezone->getName();
В итоге мой файл выглядит следующим образом:
В принципе, все готово, теперь можно переходить по ссылке ниже:
https://название_сайта/wp-content/themes/blogshare/test.php
Но блин, какая длинная ссылка получилась, это ведь не удобно! Давайте сократим ссылку и создадим человекоподобный URL (ЧПУ). Например, чтобы страница открывалась по короткому урл:
4. Находим в корневой папке WordPress файл «.htaccess», при помощи которого можно задавать различные настройки сервера apache и открываем его редактором.
5. Добавляем директиву «RewriteRule» после «RewriteBase»:
RewriteRule ^(test)/$ /wp-content/themes/blogshare/test.php [L]
6. Переходим в браузере по заданному URL и видим, что страница отображается и функция отображения часовой зоны работает.
Готово! И никакие плагины не нужны! Естественно существует огромное множество плагинов, чтобы это реализовать, но в них еще нужно разобраться, а можно за несколько шагов, описанных в статье, сделать самому.