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

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

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

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

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

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

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

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

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

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

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

<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*The template for displaying full width single posts. */
get_header( );
?>

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

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

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

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

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

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

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

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

<div class="wrap">

<div id="primary" class="content-area">
        	<main id="main" class="site-main" role="main">
              	<?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
                    	) );
              	endwhile; // End of the loop.
              	?>

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

get_template_part( 'template-parts/post/content', get_post_format()
);

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

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

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

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

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

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

        	if ( 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>

' );
        	} else {
              	the_title( '

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

' );
        	}

        	if ( 'post' === get_post_type() ) {

              	echo '

<div class="entry-meta">';
                    	if ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} else {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

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

<!-- .entry-header -->

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

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

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

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

.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:none;
width:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margin-bottom:1.3em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:15px 0;
}

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

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

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

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

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

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

Вывод

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

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

Все фотографии в этой статье были сняты в компании Flywheel.

Все еще нужно убедить своих клиентов?

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

Что вы собираетесь изучать дальше? Попробуйте один из этих уроков!

• Как выбрать лучшие блоки CSS для создания лучших макетов сайта
• Как добавить адаптивную карту Google в WordPress
• Как эффективно перенести сайты с Adobe Business Catalyst на WordPress (+ более 20 ресурсов!)