如何在 WordPress 中创建自定义单篇文章模板

您是否见过与同一站点上的其他帖子布局完全不同的帖子详细信息页面？ 这可能是因为它使用的是自定义模板。 您可以为各个帖子分配自定义模板，从而提高网站外观的灵活性。

有兴趣学习如何创建自定义单篇文章模板吗？ 在这篇文章中，我将向您展示如何轻松创建自己的！

自定义模板的好处

在我们开始创建之前，让我们探讨为什么您可能需要自定义模板以及它的作用。

如果您希望特定的帖子或帖子类型从您的其余内容中脱颖而出，您可能需要考虑创建一个自定义的单帖子模板。 此模板将仅应用于您分配给它的帖子，这意味着它可以具有与您的标准帖子完全不同的布局。 然后，独特的设计和布局可以增加该特定帖子的用户参与度。

准备好自己开发了吗？ 创建和使用自定义帖子模板类似于自定义页面模板。

如何创建自定义帖子模板

我将使用二十七主题作为我的示例，但任何主题的过程都是相同的。

在创建自定义帖子模板之前，我将首先创建一个子主题。 您可以在主主题中工作，但由于您正在创建自定义模板，如果您更新父主题，您将丢失您的模板。 因此，最好将自定义模板与主题分开。

对于自定义模板，您必须定义模板名称（模板的名称）和模板发布类型（将使用此模板的位置）。 它看起来像这样：

 [php]
<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*显示全宽单篇文章的模板。 */
get_header( );
?>
[/php]

保存文件时，保持文件名与模板名称相关，例如full-width-post.php 。 如果您从管理面板查看帖子，它将在帖子属性部分的下拉列表中显示新模板。

我们的自定义模板已准备就绪，但还没有用。 让我们让它更有益一点！

注意：我们将处理多个文件，因此请跟踪文件名和文件夹。

这是二十十七主题中博客文章页面的当前布局。 我对此很满意，所以我们就这样吧。

现在，假设您想要一些帖子的全角布局。 我们会将帖子标题放在元数据上方。 元数据应该在顶部和底部有一个边框，标题和元数据都应该居中对齐。 这是线框：

要进行此布局，您需要找到负责显示帖子详细信息页面的文件。 在大多数主题中， single.php是文件，除非有某些预定义的模板。 代码结构因主题而异，因此可能需要一些学习才能了解您的特定主题的工作原理。

找到显示帖子详细信息页面的文件后，您应该查看是否使用函数调用另一个文件或直接创建模板。 在这个主题为二十七岁的示例中，它是 get_template_part 函数。

get_template_part路径是此处最重要的部分。

 [php]

<div class="wrap">

<div id="主要"; class="内容区域">
        	<main id="main"; 类=“网站主要” 角色=“主要”>
              	<?php /* 开始循环 */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // 如果评论已打开或我们至少有一条评论，请加载评论模板。 if ( comments_open() || get_comments_number() ) : comments_template(); 万一; the_post_navigation( array( 'prev_text' => '<span class='screen-reader-text'>' . __( '上一篇文章', '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">' . __( '下一篇文章', 'twentyseventeen' ) . '</span><span aria-hidden="true"; class="nav-subtitle">' . __( '下一个', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) 。 '</span></span>',
                    	));
              	结束; // 循环结束。
              	?>
[/php]

如您所见，它指的是一条路径：

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

所以在single.ph里面调用了content.php文件来输出帖子详情页。

现在您知道single.php文件是如何工作的，让我们从中复制代码并将其粘贴到我们之前在子主题中创建的full-width-post.php文件中。 由于它将是一个全角模板，我们将删除侧边栏。

现在从上述路径复制 content.php 文件。 您可以将其粘贴到模板文件所在的同一目录中，但我建议遵循与父主题相同的文件夹结构。

您可以保持文件名不变，但如果您希望更改默认模板中的某些内容，则会导致冲突。 为避免出现任何问题，我建议重命名文件并使其与模板名称保持相关，例如content-full-width.php 。

文件已就位，现在让我们修改代码以交换帖子标题和帖子元数据。

 [php]

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

        	如果 ( is_single() ) {
              	标题（ '

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

');
        	} elseif ( is_front_page() && is_home() ) {
              	标题（ '

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

');
        	} 别的 {
              	标题（ '

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

');
        	}

        	如果（'帖子'=== get_post_type（））{

              	回声 '

<div class="entry-meta">';
                    	如果 ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} 别的 {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

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

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

要使用此模板，请从 WordPress 管理员编辑所需的帖子并从下拉菜单中分配模板。

如果你在前端检查帖子，它仍然不是全角的，但是标题和元数据已经交换了位置，所以我们知道帖子正在使用我们的自定义模板

我们必须添加一些 CSS 以使其全宽。 WordPress 会根据正文部分中的模板名称自动生成一个类。

使用那个类来定位这个特定的模板。 您可以将 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{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
填充：15px 0；
}
[/CSS]

现在我们有了我们想要的布局。 使用此模板的任何帖子都将具有完全相同的样式。

您可以根据需要创建任意数量的自定义模板。 您甚至可以根据帖子类别创建模板。

我可以为此使用插件吗？

如果您不熟悉 PHP 代码，那么您可以使用一些插件，但我必须承认，可用于创建自定义帖子模板的插件非常少，而且大多数都不是很有用，因为无论如何您都必须手动创建模板。

我发现 Post Custom Templates Lite 插件非常有用。 它是一个免费插件，允许您在漂亮的拖放界面中创建帖子模板而无需任何编码。 它有很多定制选项，所以如果你想定制一个帖子模板，一般来说这个插件可以帮助你。

注意：免费版本只允许您自定义普通的帖子模板。 您必须使用专业版才能创建自定义帖子模板并获得一些附加功能。

结论

无论您是手动工作还是使用插件创建自定义单篇文章模板，它都能让您最重要的文章脱颖而出。 如需灵感，请查看 Brian Dean 的网站； 他为他的权威指南帖子使用了一个特定的模板，使它们看起来与他的其他帖子不同。

所以，试试看，创建您自己独特的单篇文章模板吧！ 为了让您构建的每个站点都获得最佳结果，请选择 WP Engine 的托管托管平台作为 WordPress 托管的单一来源！