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

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

Хотите узнать, как создать собственный шаблон одиночного поста? В этом посте я покажу вам, как вы можете легко создать свой собственный!

Преимущества пользовательских шаблонов

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

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

Готовы разработать собственный? Создание и использование пользовательского шаблона сообщения аналогично пользовательскому шаблону страницы.

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

В качестве примера я буду использовать тему Twenty Seventeen, но процесс будет одинаковым для любой темы.

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

Для пользовательского шаблона вы должны определить имя шаблона (имя шаблона) и тип публикации шаблона (где этот шаблон будет использоваться). Это выглядит так:

 [php]
<?php
/* Имя шаблона: Сообщение полной ширины * Тип сообщения шаблона: сообщение*/ /*Шаблон для отображения одиночных сообщений полной ширины. */
получить_заголовок();
?>
[/php]

При сохранении файла имя файла должно соответствовать имени шаблона, например full-width-post.php . Если вы просматриваете сообщение из панели администратора, он покажет новый шаблон в раскрывающемся списке раздела «Атрибуты сообщения».

Наш пользовательский шаблон готов, но пока бесполезен. Давайте сделаем его немного выгоднее!

Примечание. Мы будем работать с несколькими файлами, поэтому следите за именами файлов и папками.

Вот текущий макет страниц сообщений блога в теме Twenty Seventeen. Я доволен этим, так что мы оставим это как есть.

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

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

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

Путь get_template_part — самая важная часть, которой нужно следовать здесь.

 [php]

<div class="wrap">

<div id="основной" class="content-area">
        	<основной идентификатор="основной" класс = "основной сайт" role="main">
              	<?php /* Запуск цикла */ while ( have_posts() ) : the_post(); get_template_part('шаблон-части/пост/контент', get_post_format()); // Если комментарии открыты или у нас есть хотя бы один комментарий, загружаем шаблон комментария. если ( comments_open() || get_comments_number() ): comments_template(); конец; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Предыдущий пост', 'двадцать семнадцать' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' Предыдущий», «двадцать семнадцать» ). class="nav-title-icon-wrapper">' .twentyseventeen_get_svg(array('icon' => 'стрелка влево')) . '</ span>%title</span>',
                          	'next_text' => '<span class="программа чтения с экрана-текст">' . __('Следующая запись', 'двадцать семнадцать') . '</span><span aria-hidden="true" class="nav-subtitle">' . __('Следующий', 'двадцать семнадцать') . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . двадцать семнадцать_get_svg(массив('значок' => 'стрелка-вправо')). '</span></span>',
                    	));
              	конец; // Конец цикла.
              	?>
[/php]

Как видите, это относится к пути:

 [php]
get_template_part('шаблон-части/сообщение/контент', get_post_format()
);
[/php] 

Таким образом, файл content.php вызывается внутри single.ph для вывода страницы сведений о сообщении.

Теперь, когда вы знаете, как работает файл single.php , давайте скопируем код из него и вставим в наш ранее созданный файл full-width-post.php в дочерней теме. Так как это будет полноразмерный шаблон, мы удалим боковую панель.

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

Вы можете оставить имя файла как есть, но если вы когда-нибудь захотите что-то изменить в шаблоне по умолчанию, это вызовет конфликт. Чтобы избежать каких-либо проблем, я бы предложил переименовать файл и оставить его соответствующим имени шаблона, например, content-full-width.php .

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

 [php]

<header class="entry-header">
        	<?php

        	если ( is_single() ) {
              	the_title('

<h1 class="entry-title">', '</h1>

');
        	} elseif ( is_front_page() && is_home() ) {
              	the_title('

<h3 class="entry-title"><a href=""' . esc_url(get_permalink()). '" rel="bookmark">', '</a></h3>

');
        	} еще {
              	the_title('

<h2 class="entry-title"><a href=""' . esc_url(get_permalink()). '" rel="bookmark">', '</a></h2>

');
        	}

        	если ('сообщение' === get_post_type()) {

              	эхо '

<div class="entry-meta">';
                    	если ( is_single() ) {
                    	  	двадцать семнадцать_опубликовано_на();
                    	} еще {
                          	эхо двадцать семнадцать_время_ссылка();
                          	двадцать семнадцать_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->
[/php]

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

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

Мы должны добавить немного CSS, чтобы сделать его полной ширины. WordPress автоматически генерирует класс в соответствии с именем шаблона в разделе body.

Используйте этот класс для таргетинга на этот конкретный шаблон. Вы можете добавить CSS в файл style.css дочерней темы.

 [CSS]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
поплавок: нет;
ширина:авто;
}

.post-template-full-width-post .entry-header{
выравнивание текста: по центру;
нижняя граница: 1.3em;
}

.post-template-full-width-post .entry-meta{
граница сверху: 1px сплошная #ccc;
нижняя граница: 1px сплошная #ccc;
отступ: 15 пикселей 0;
}
[/css]

Теперь у нас есть макет, который мы хотели. Любой пост, использующий этот шаблон, будет иметь точно такой же стиль.

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

Могу ли я использовать плагин для этого?

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

Я нашел плагин Post Custom Templates Lite очень полезным. Это бесплатный плагин, который позволяет создавать шаблоны сообщений без какого-либо программирования в приятном интерфейсе перетаскивания. Он имеет множество параметров настройки, поэтому, если вы хотите настроить шаблон сообщения, в целом этот плагин может вам помочь.

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

Заключение

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

Итак, попробуйте и создайте свой собственный уникальный шаблон одиночного поста! Чтобы получить наилучшие результаты для каждого сайта, который вы создаете, выберите платформу управляемого хостинга WP Engine в качестве единственного источника для хостинга WordPress!