Как создавать собственные шаблоны страниц WordPress

Шаблоны страниц в темах WordPress помогают определить макет страниц на веб-сайте. Однако настройка этих шаблонов иногда может быть пугающей, особенно для новичков. К счастью, WordPress предлагает некоторую гибкость, когда дело доходит до шаблонов страниц, позволяя вам создавать собственные шаблоны страниц в вашей теме.

Создание пользовательских шаблонов страниц для вашего сайта позволяет вам легко настраивать макеты и дизайн вашего сайта по своему усмотрению. Это также позволяет вам добавлять пользовательские требования, такие как использование разных заголовков для разных страниц. Эти изменения могут применяться на разных страницах или на одной странице.

В этой статье мы рассмотрим, что такое пользовательские шаблоны страниц WordPress, иерархию шаблонов страниц по умолчанию, а также как создавать пользовательские шаблоны страниц WordPress в вашей теме.

Оглавление

Что такое пользовательский шаблон страницы WordPress

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

Создание пользовательского шаблона страницы

• Как создать глобальный пользовательский шаблон
• Создание единого шаблона страницы

Вывод

Что такое пользовательский шаблон страницы WordPress

Пользовательский шаблон страницы WordPress — это файл шаблона, который позволяет вам иметь отдельный дизайн и внешний вид вашего веб-сайта.

Например, если на вашем сайте есть тема для ведения блога, вы можете создать собственный шаблон для своего сайта, который не отображает боковую панель или комментарии. Вы также можете создать шаблон для страниц, где у вас есть шаблон, отображающий содержимое в макете с коробкой, а другой — в макете полной ширины. Нет никаких ограничений на количество шаблонов страниц, которые вы можете создать.

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

Если есть более конкретные шаблоны страниц, то срабатывает иерархия шаблонов.

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

Иерархия шаблонов страниц определяет, какой файл шаблона WordPress выбирает при отображении страницы, в зависимости от характера сделанного запроса, а также его наличия в теме.

Иерархия шаблонов WordPress по умолчанию выглядит следующим образом:

Шаблон страницы : WordPress проверяет шаблон, назначенный странице, и использует этот шаблон на странице.

page-{slug}.php : если странице не назначен шаблон, WordPress затем проверяет наличие шаблона с слагом на странице и применяет его, если он найден.

Слаг — это часть URL-адреса страницы после имени домена, которую можно редактировать. Ниже приведен пример иллюстрации по этому поводу.

page-{id}.php : WordPress затем проверит наличие шаблона страницы с идентификатором страницы для отображаемой страницы, если шаблон с слагом не найден.

page.php : если шаблон с идентификатором страницы не найден, WordPress будет использовать стандартный шаблон page.php для отображения страницы.

single.php : в случае, если файл page.php не найден, WordPress будет использовать файл single.php независимо от типа записи.

index.php : если ни один из вышеперечисленных шаблонов недоступен, WordPress по умолчанию отображает страницы с использованием файла index.php.

Следовательно, рендеринг страниц в вашей среде WordPress может выполняться любым из приведенных выше шаблонов страниц. Следовательно, вам решать, какой уровень приоритета вы хотите иметь.

Создание пользовательского шаблона страницы

Создание пользовательских шаблонов страниц в вашей теме довольно просто. Однако вам необходимо определить, будут ли шаблоны страниц предназначены для одной страницы или для любой страницы.

В этом руководстве мы рассмотрим, как вручную создать глобальный шаблон страницы в теме Stax, а также один шаблон страницы для одной из наших страниц.

Как создать глобальный пользовательский шаблон

Иногда вы хотите создать шаблон страницы, который можно использовать глобально на любой странице вашего веб-сайта.

Для этого вам нужно будет сначала определить текстовый редактор, который вы будете использовать, например Блокнот, Блокнот ++, возвышенный текст или любой другой редактор по вашему выбору.

Как только это будет сделано, вы можете приступить к созданию файла шаблона, выполнив следующие действия:

Шаг 1: Создайте новый файл и добавьте следующий код :

 <?php /* Template Name: PageWithNoFooter */ ?>

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

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

Шаг 2: Добавьте нужный код в файл

На этом этапе вы можете добавить в файл предпочитаемый вами код, будь то на PHP или на PHP и HTML.

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

Следовательно, наш код будет следующим:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Шаг 3: Загрузите шаблон страницы в файлы вашей темы .

С помощью программы FTP, такой как Filezilla, или через панель хостинга загрузите свой собственный файл в корень файлов вашей темы. В нашем случае это будет либо в пределах следующих путей к каталогам:

i) wp-content> Темы> Stax

ii) Рекомендуется: wp-content > Themes > stax-child

Это применимо при использовании дочерней темы на вашем сайте, а stax-child — это ваша дочерняя тема.

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

Шаг 4: Создайте новую страницу и назначьте ей шаблон «PageWithNoFooter».

Для этого перейдите в раздел «Страницы» > «Добавить новую» на панели инструментов WordPress и создайте свою страницу.

Создав страницу, назначьте ей шаблон «PageWithNoFooter» и сохраните изменения.

Ниже приведен пример иллюстрации этого:

Теперь, при предварительном просмотре страницы во внешнем интерфейсе, на нашей странице не будет отображаться нижний колонтитул на вашей странице. У вас также будет пользовательский HTML, который мы добавили.

Ниже скриншот по этому поводу:

Вы можете использовать шаблон на любой странице, где вы хотите применить его макет, или на любой странице, на которой вы не собираетесь иметь нижний колонтитул.

Создание единого шаблона страницы

Пользовательские шаблоны страниц для отдельных страниц более специфичны для страниц. Как упоминалось ранее, эти шаблоны рассматриваются для выбора, если странице не назначен «шаблон страницы».

Что касается этих шаблонов, вы можете настроить таргетинг на страницу по слагу или идентификатору страницы. Также важно учитывать будущие перспективы вашего веб-сайта, когда решаете, использовать ли слаг страницы или идентификатор. Например, если вы собираетесь перенести свой сайт на другой домен, использование идентификатора страницы при создании файла шаблона будет неуместным. Вместо этого использование slug будет считаться лучшим вариантом. Если, с другой стороны, вашим сайтом управляют несколько человек, и вы считаете, что есть вероятность, что они могут изменить слаг страницы, тогда было бы гораздо предпочтительнее использовать идентификатор страницы при создании шаблона страницы.

В нашем случае здесь мы создадим собственный шаблон страницы для нашей страницы контактов и отключим нижний колонтитул со страницы. Для создания такого шаблона вам потребуется выполнить следующее:

Шаг 1: Скопируйте содержимое page.php

На этом этапе вам нужно сначала найти файл page.php в файлах вашей темы.

Найдя файл, выберите его, чтобы отредактировать и скопировать его содержимое.

Шаг 2: Создайте новый шаблон на странице

В корне файлов вашей темы создайте шаблон страницы для страницы контактов. Вы можете использовать файл page-{id}.php или page-{slug}.php. В нашем случае здесь мы будем использовать слаг, поэтому мы назовем наш шаблон как page-contact.php, поскольку «контакт» — это слаг нашей страницы, как показано ниже:

Ниже также показано расположение файла:

Шаг 3: Вставьте содержимое файла page.php

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

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

После предварительного просмотра вашей контактной страницы вы обнаружите, что на странице нет нижнего колонтитула.

Ниже приведено сравнение скриншотов на странице изначально и после применения нового шаблона.

Контактная страница с нижним колонтитулом

Контактная страница без нижнего колонтитула

Вывод

Создание пользовательских шаблонов страниц для вашего веб-сайта относительно просто. В этом руководстве мы специально рассмотрели, как вручную создавать собственные шаблоны в вашей теме WordPress. В качестве примера мы использовали бесплатную тему Stax. Однако вы можете применить ту же технику ко всем другим темам WordPress, которые следуют стандартам кодирования WordPress. Однако есть и другие способы создания пользовательских шаблонов страниц, например, с помощью конструкторов страниц, таких как Elementor.

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