Как создавать пользовательские шаблоны WordPress вручную — руководство

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

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

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

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

Примечание. В этой статье предполагается наличие практических знаний HTML, CSS и PHP.

Когда вам нужен собственный шаблон WordPress?

Возможно, вы еще не уверены, зачем вам на самом деле нужно использовать собственный шаблон WordPress. Проще всего объяснить это на примере.

Давайте представим, что у вас есть веб-сайт для вашего бизнеса. Тема «Двадцать Двадцать» активирована, и все необходимые страницы и сообщения уже созданы и заполнены контентом (текстом и изображениями), отрывком и избранным изображением.

Общие настройки также настроены, и вы внесли ряд изменений с помощью настройщика (например, цвета ссылок, цвет наложения шаблона обложки и т. д.).

Также было создано меню с 5 пунктами: Домашняя страница – Профиль компании – Услуги – О нас – Связаться с нами

В разделе Услуги есть подменю: Услуга 1 – Услуга 2 – Услуга 3.

Итак, с точки зрения разработчика WordPress у вас есть:

• Четыре стандартные страницы (Домашняя страница – Профиль компании – О нас – Контакты)
• Одна страница архива ( Услуги )
• Три почтовых страницы (Сервис 1 – Сервис 2 – Сервис 3)

По умолчанию все 3 страницы служебных сообщений будут иметь одинаковый макет. Единственный вариант, который у вас есть в настоящее время, чтобы различать эти сообщения по отдельным макетам, выбрав один из трех шаблонов, предоставленных в настройке «Атрибуты сообщения».

Если мы выберем каждый из разных шаблонов, мы увидим, что они выглядят так:

Шаблон по умолчанию

Шаблон полной ширины

Шаблон обложки

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

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

Как вручную создать пользовательский шаблон сообщения WordPress

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

Шаг первый: представляем наш шаблон в WordPress

Для начала нам нужно создать файл PHP с именем, например: «my-custom-post.php» в корневой папке вашей темы WordPress (в нашем примере он находится в /themes/twentytwenty/).

Откройте файл в своем любимом текстовом редакторе (например, Sublime) и добавьте содержимое ниже:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Эта строка * Template Name: My custom post template определяет имя, которое будет отображаться в раскрывающемся меню шаблона. Взгляните на скриншот ниже, и вы увидите, как это будет выглядеть.

* Template Post Type: post является необязательным и определяет тип сообщения, для которого шаблон будет отображаться в качестве опции. Поскольку мы определили это как «публикацию», этот шаблон не будет отображаться в меню параметров шаблона для страницы, как показано в примере ниже.

Последняя строка: get_header(); ?> get_header(); ?> извлекает содержимое заголовка.

На этом этапе, если вы выберете «Мой пользовательский шаблон сообщения» в качестве активного шаблона, скажем, для нашего сообщения «Услуга 1», вывод будет пустым. Этого мы и ожидали, поскольку нам еще предстоит добавить какую-либо структуру на страницу. Вы увидите что-то вроде этого:

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

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

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

Для дальнейшего уточнения — когда посты и страницы используют одну и ту же структуру, используется файл single.php, в противном случае (как, например, в популярной теме Astra) вы увидите файлы single.php, page.php, archive.php, которые закодированы для предоставления различных структур для постов, страниц и макетов блога соответственно.

В этом примере, используя тему Twenty Twenty, мы видим, что файл single.php использует функцию get_template_part для извлечения запрошенного макета из папки template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

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

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

После того, как вы определились с дизайном макета, вам нужно закодировать его с помощью HTML, CSS и PHP. В этой статье предполагается, что у вас есть практические знания этих языков и вы можете создать необходимый макет. Используя приведенный выше дизайн, мы напишем исходный код, который, добавленный в ваш файл my-custom-post.php, будет выглядеть так:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

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

• the_title() — повторяет заголовок поста
• the_excerpt() — повторяет отрывок поста
• the_post_thumbnail() — выводит размер эскиза поста по умолчанию. Вы можете использовать параметры the_post_thumbnail() для вывода определенного размера рекомендуемого изображения.
• the_content () — выводит содержимое поста

Если мы сохраним наши обновления и теперь посмотрим на пост «Сервис 1», мы увидим, что применяется макет пользовательского шаблона.

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

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

Самый простой способ сделать это — напрямую отредактировать файл index.php (расположенный в нашей корневой папке /themes/twentytwenty/). Хотя редактирование этого файла напрямую подходит для учебных целей, если веб-сайт работает, вы можете использовать дочернюю тему, чтобы гарантировать, что любые обновления не будут перезаписаны при следующем обновлении темы.

Если мы посмотрим на код index.php, то заметим, что он в основном заполнен PHP-условиями «если», которые определяют доступные выходные данные в зависимости от типа контента. Например, следующий код проверяет, содержит ли содержимое сообщения (это сообщение, страница или архив) или это страница результатов поиска, и соответственно отображает правильный контент.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Если вы следуете этому руководству и используете тему Twenty Twenty, найдите следующий код в файле index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

В template-parts/content.php мы видим, что содержимое извлекается с помощью функции get_template_part.

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

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Если вы внимательны, то увидите, что мы ссылаемся на файл с именем my-custom-category-view.php , который нам теперь нужно создать и добавить в папку нашей темы (альтернативный подход — добавить эту информацию напрямую в наш файл index.php , но сохранить его как отдельный файл гораздо удобнее.

Создайте файл my-custom-category-view.php и добавьте следующий код:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Вы увидите, что мы смогли использовать более продвинутый формат функции the_title() для указания заголовка записи. Ссылка на страницу отдельного поста была сгенерирована с помощью функции get_permalink().

Чтобы закончить, вам нужно добавить дополнительные стили в ваш файл style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Давайте посмотрим, чего мы достигли на данный момент:

Хороший!

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

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

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

И все, молодец! Теперь вам удалось создать свой собственный персонализированный макет и дизайн для представления категории сообщений.

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

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

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

Нашей целью будет создание обзорной страницы «Услуги», на которой перечислены три наших бизнес-услуги (в данном примере — Служба 1, Служба 2 и Служба 3). Вместо того, чтобы вручную добавлять их на нашу страницу, они будут динамически загружаться на страницу. Хотя на практике вам, возможно, не нужно беспокоиться об этом, принципы кодирования полезны для понимания и дальнейшей демонстрации гибкости, предлагаемой WordPress.

Для начала создайте новый файл в папке вашей темы и назовите его, например, my-services-template.php . Сделав это, мы теперь добавим некоторые необходимые комментарии к объявлениям, как мы делали раньше с шаблоном одиночного сообщения. Мы также будем использовать функцию get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

Функция get_template_part() — это, по сути, механизм, который позволяет нам загружать многократно используемые фрагменты кода. В этом случае он захватит содержимое template-parts/content-cat_services.php . Именно в этот файл мы вставим некоторый код, который будет выводить сообщения категории «Услуги».

В общем, что будет делать код в этом файле:

• Дайте название странице категории.
• Запрос сообщений указанной категории из базы данных.
• Прокрутите сообщения и отобразите макет для каждого.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Мы рассмотрим запросы более подробно в следующей статье. Что вам нужно знать для целей этой статьи, так это то, что $args = array( 'cat'=>4, 'orderby' => 'title' ); извлекает категорию сообщений с идентификационным номером 4 (ID = 4). Этот номер категории относится к нашей категории «Услуги».

Итак, как вы можете увидеть идентификатор для каждой категории? На самом деле это довольно просто. Перейдите в «Сообщения меню» > «Категории» и откройте любую категорию для редактирования. Идентификатор находится в URL-адресе страницы редактирования категории, как показано ниже:

Чтобы просмотреть наш новый шаблон, нам нужно перейти на страницы и создать новую страницу. В области редактирования страницы вам не нужно вводить какой-либо контент. Вместо этого просто выберите параметр «Мой шаблон категории сообщений» в раскрывающемся меню шаблона «Атрибуты страницы».

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

Давайте посмотрим, что мы сделали:

В приведенном выше методе показано, как создать пользовательский шаблон страницы WordPress, который извлекает определенную категорию (в этом примере наши «Услуги»). Если вы выберете тот же шаблон, но для другой страницы категории, вы снова увидите сообщения категории «Услуги», поскольку мы специально запросили это с идентификатором категории (ID = 4). Таким образом, если вы хотите, чтобы новый шаблон страницы содержал другую категорию, вам нужно будет создать для этого отдельный файл шаблона (и соответствующим образом обновить идентификатор категории).

Вывод

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

Смотрите также

• Как создавать пользовательские шаблоны WordPress с помощью конструкторов страниц — руководство