Создание темы WordPress - home.php, front-page.php, and index.php

Сегодня поговорим о трех очень важных файлах: home.php, front-page.php и index.php. Я объединяю эти три файла в одной статье, потому что только ваш выбор определит какой из этих файлов будет вашей “главной или домашней страницей”. Подумайте об этом с точки зрения обычных, статических html-сайтов. Обычно мы помещаем все в index.php и ваш браузер знает, что этот файл нужно искать. В WordPress все немного отличается. Существует некая иерархия шаблонов и файлов. То есть, чем конкретнее вы назовете файл, тем WordPress проще понять, что вы от него хотите. Пока не совсем понятно, так что разберем поглубже.

Параметры WordPress

Если вы войдете в Панель управления WordPress и найдете вкладку «Настройки», вы увидите вкладку «чтение».

Здесь вы найдете несколько очень важных параметров. Прежде чем выбрать какие-либо варианты, подумайте о том, как был задуман ваш сайт. Будет ли домашняя страница длинной, статичной страницей с различными битами информации или она будет просто отображать статьи в блоге? Может быть, даже и то, и другое! В зависимости от ответа на этот вопрос, мы определим, что мы выбираем для отображения на странице опции чтения.

home.php

Если ваш сайт будет блогом, вам следует остановиться на опции по умолчанию » Ваши последние записи «.

home.php — это файл, который WordPress ищет первым, когда вы выбираете эту опцию. Поэтому код, который идет в home.php будет вашим кодом «домашней страницы», который отображает ваши последние сообщения в блоге.

front-page.php

Предположим, веб-сайт, который вы создаете, предназначен для бизнеса, и заказчику нужен слайдер, за которым следуют три основные услуги, которые они предоставляют, а затем блок текста, сообщающий некоторую информацию “о компании” с боковой панелью, которая позволит отображать виджеты. В этом случае вы перейдете на страницу опции чтения и выберите опцию «статическая страница».

Затем вы должны назначить главную страницу, которую вы должны создать заранее (чтобы было из чего выбрать). Далее нужно выбрать на какой странице должны отображаться ваши сообщения в блоге. Если вы не планируете иметь блог вообще, вы можете оставить этот второй вариант пустым.

Теперь, когда вы выбрали статическую страницу, WordPress автоматически будет искать файл под названием front-page.php. Весь код для отображения каждой из областей, которые мы предположили выше, будет находиться внутри этого файла.

index.php

Для чего же тогда нужен index.php? WordPress использует этот файл для того, что называют резервным шаблоном по умолчанию. Это означает, что, если WordPress не может найти home.php или front-page.php, он будет искать index.php как последнюю инстанцию. Поэтому моя рекомендация и то, что я лично делаю, — это какой бы вариант я ни выбрала для своей домашней страницы, я возьму код из этого файла, скопирую и вставлю его в свой index.php. Потому что, если по какой-либо причине что-то случится с файлом моей главной страницы, у него всегда будет резервная копия.

Независимо от того, какой файл шаблона вы будете использовать, для кода страницы, на которой будут отображаться ваши последние сообщения в блоге, всегда будет использоваться home.php. Таким образом, если вы настроили статическую страницу в качестве главной целевой страницы, а затем решили разместить сообщения в блоге на странице под названием Блог, этот шаблон страницы будет home.php. То есть, вы используете и front-page.php и home.php в одном проекте, но front-page.php имеет код для отображения основного содержимого целевой страницы и home.php — код для отображения сообщений в блоге.

Пример

Давайте создадим пару новых записей через панель управления. И будем отображать на главной последние записи.

Теперь в корне нашей темы (на одном уровне index.php) создадим страницу home.php со следующим кодом (код можно посмотреть на gitHub):

Давайте разберем его по частям.

Главная часть любой страницы с контентом – это цикл, который по сути является функцией, которая динамически получает весь контент, отображаемых в записях и страницах. Базовая структура цикла выглядит так же, как и в приведенном выше коде, но ее можно расширить и использовать для передачи определенных спецификаций о том, какой тип данных вы хотите получить и как он будет отображаться. Мы не будем вдаваться в это подробно в этой статье, возможно, я напишу о цикле позже.

Цикл написан так: if (have_posts()) – он проверяет, есть ли у вас записи, а затем говорит, пока у вас есть запсиси while (have_posts()) – покажите их the_post()!

Оператор if начинается с if, затем дает вам состояние else (не всегда требуется), а затем заканчивается endif.

Оператор while начинается с while и заканчивается endwhile.

В случае цикла вы увидите, что мы начинаем с оператора if, затем идет оператор while, затем мы заканчиваем while с endwhile, затем приходит оператор else и, наконец, endif, чтобы остановить все.

Между оператором while и оператором endwhile мы хотим включить html для структурирования макета сообщений в блоге. В заявлении else всегда лучше предоставить простое предложение, которое говорит что-то вроде “Извините! Сообщений не найдено». Это лучшая практика на случай, если вы еще не добавили записи, и кто-то зайдет на страницу блога.

Внутри цикла есть несколько действительно важных функций, первая из которых-вызов миниатюры изображения записи. Вызывается эта функция the_post_thumbnail(). Хорошая практика перед вызовом миниатюры проверять, существует ли она вообще. Поэтому мы создаем другой оператор if, который использует функцию has_post_thumbnail (). Итак, мы спрашиваем WordPress, есть ли данное изображение? Если это так, покажите его, иначе не показывайте его вообще.

the_title(); — будет вызывать название записи в блоге.

Permalink

Постоянная ссылка — это ваш лучший друг! В приведенном выше коде вы увидите, что ссылка прикреплена к изображению и заголовку и помещена в тег src. Это связано с тем, что the_permalink() динамически создает ссылку на основной пост. Помните, что мы смотрим на список сообщений в блоге, которые не показывают весь текст и имеют кнопку read more. Поэтому, прикрепляя постоянную ссылку к src наших якорных тегов, WordPress делает всю работу для вас, чтобы связать страницу блога, которая содержит все содержимое этого одного сообщения.

Чтобы отобразить категории, прикрепленные к каждому сообщению в блоге, мы используем функцию the_category().

Таким же образом, как и категории, теги используют функцию the_tags ().

В коде мы видим еще три функции, которые не всегда необходимы, но их нужно знать.

Первая-это функция the_date (), которая вводит дату первоначального размещения сообщения в блоге. Мы передаем функцию get_option () в качестве параметра, чтобы захватить формат даты, который выбрали для использования в настройках панели мониторинга.

Затем у нас есть функция the_time (), которая работает также, но вызывает время публикации сообщения. Затем он передает функцию get_option (), чтобы вытащить формат времени, выбранный в настройках панели мониторинга.

И, наконец, у вас есть функция the_author_posts_link (), которая предоставляет вам имя человека, написавшего статью (если вы настроили его как пользователя, и он заполнил свой профиль) и ссылку на отдельную страницу автора.

Последние две функции, которые я хочу показать вам, являются важными!

Первая-the_excerpt (), которая вызывает первые несколько строк текста из записи блога в качестве тизера, чтобы заинтересовать кого-то щелкнуть по нему и прочитать полную статью.

Второй-the_content (), который я не использую в коде выше, но идет рука об руку с the_excerpt(). The_content() вызывает полную статью и будет использоваться в single.php — файле, который является файлом шаблона для отображения полной статьи записи.

Статическая страница

Если вы решили отображать на главной странице статический файл и используете шаблон front-page.php, то этот файл будет содержать только необходимую структуру html для отображения дизайна, который у вас уже есть. Поэтому нет никакого конкретного кода, который можно показать. Вы можете включить цикл здесь, вы можете использовать WP_Query для вызова пользовательских циклов, если это необходимо, или вы можете просто вставить статический html. Единственное, что я подчеркну — это обязательное включение функций get_header() и get_footer() в верхней и нижней части этой и каждой страницы.

<?php get_header ();?>

<!— ВЕСЬ ВАШ HTML ДЛЯ СТАТИЧЕСКОЙ СТРАНИЦЫ->

<?php get_footer ();?>

Вот как теперь выглядит наша главная страница (конечно, все это нужно красиво оформить с помощью .css)

Теперь вы можете создать главную страницу своего сайта по своему усмотрению. WordPress содержит гораздо больше функций и возможностей, с которыми вы моете познакомиться в кодексе. В следующей статье мы рассмотрим шаблон страницы — Page.php.

Иерархия шаблонов WordPress