WP主题开发15：如何创建wordpress主题trans的文章页模板？

通过上一章“怎样添加WordPress主题trans的文章列表页模板”的介绍，我们知道了，怎样快速创建WordPress主题的模板文件了，公共模板的使用，让我们节省了不少的时间。本节，我们用同样的方法，来创建trans主题的文章详情页模板。废话不多说，我们直接动手操作。

第一步：创建一个single.php文件。

在trans主题目录下创建一个single.php，这是wordpress默认的文章详情页模板，名字不能变。然后，把trans主题的静态模板single.html中的代码复制到这个single.php文件中。

第二步：替换头部代码。

在single.php代码中找到< !doctype html>与之间的代码，全部删除掉。然后，在同样的位置上添加如下代码：

< ?php get_header(); //调用header.php公共头部模板 ?>

第三步：替换右侧边栏代码。

在single.php文件的代码中找到< div class="c_right">标签，把它所包含的所有代码全部删除掉，然后，在同样的位置上，添加如下代码：

< ?php get_sidebar(); //调用公共侧边栏模板sidebar.php ?>

第四步：替换底部代码。

在single.php这个文章页模板中找到< footer>标签，把它后面的所有代码全部删除掉，然后，在这个位置上，添加底部模板的调用代码：

< ?php get_footer(); //调用底部公共模板footer.php ?>

第五步：修改文章页模板的左侧主体部分。

single.php模板的左侧主体部分的修改，才是本节所讲的重点。它包括文章页的面包屑导航、文章标题、文章内容、相关文章、评论等等。

1、添加循环体。

跟列表页模板一样，文章详情页模板，如果想要获取当前文章的信息，就必须使用wordpress提供的循环体。找到< div class="c_left">标签，在它的前面添加如下代码：

< ?php
if( have_posts() ):
while( have_posts()):
the_post();
?>

在它的结束标签的后面，添加循环的结束代码：

< ?php
endwhile;
endif;
?>

2、修改面包屑导航。

文章页的面包屑导航跟文章列表页的差不多，只是要添加一个文章的标题在上面。如下图：

这里我们直接把代码放出来吧：

< div class="left_post_menu">
< li>
< a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home">首页 >
< ?php the_category(","); echo " > "; the_title(); ?>

< li>
< span class="dashicons-before dashicons-admin-users">< a href="javascript:;">< ?php the_author(); ?>
< span class="dashicons-before dashicons-calendar">< ?php the_time("m-d"); ?>
< span class="dashicons-before dashicons-visibility">
< ?php echo get_post_meta($post->ID,"views",true); ?>

这段代码中，我们用到了几个函数：

the_title() => 获取当前文章的标题
the_time("m-d") => 获取当前文章发表时间的月分和日期。
get_post_meta($post->ID,"views",true) => 获取浏览量

3、修改文章标题的调用。

一个页面只能有一个< h1>标签，这个< h1>标签就是用来放置文章标题的，代码如下：

< h1>< ?php the_title(); ?>

4、调用文章的内容。

在single.php模板中找到< ul class="post_content">标签，把它里面的所有标签代码字符全部删除，然后，在< ul class="post_content">标签内部添加发下代码：

< ?php the_content(); //调用文章的全部内容 ?>

5、修改版权声明及上一篇下一篇的代码。

< ul class="post_bottom">
< li>< b>版权声明：如非注明，此文章为本站原创文章，转载请注明：转载自< ?php bloginfo("name"); ?>
< li>< b>本文链接地址：< ?php the_permalink(); ?>
< li>
< ?php echo get_option("share"); ?>

< li>上一篇：< ?php previous_post_link("%link"); //调用上一篇文章 ?>
< li>下一篇：< ?php next_post_link("%link");//调用下一篇文章 ?>

6、修改相关文章列表。

在single.php找到< div class="post_rel_list">标签，反它内部的所有代码删除掉了，然后在< div class="post_rel_list">的内部添加如下代码：

< ?php
//按分类目录来调用相关文章
$cats = wp_get_post_categories($post->ID); //获取当前文章分类ID信息
if($cats){ //如果不为空
$catid = $cats[0]; //分类ID
$args = array(
'category__in' => array($catid), //允许 的分类ID ,可以多个
'post__not_in' => array($post->ID), //不允许的文章ID，这里排除当前文章
'showposts' => 6, //显示6篇
);
query_posts($args); //查询
if(have_posts()): //如果有文章
while (have_posts()) : the_post(); //就循环显示出来
?>
< ul>
< li>
< a href="< ?php the_permalink(); ?>">
< ?php
if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片
the_post_thumbnail(
'thumbnail' ,
array(
'alt' => trim(strip_tags( $post->post_title )),
'title' => trim(strip_tags( $post->post_title )),
'class' => 'home-thumb'
)
);
}else { //否则调用文章第一张图片
echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
}
?>


< li>< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?>
< li>
< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?>
< span class="dashicons-before dashicons-calendar">< ?php the_time("m-d"); ?>


< ?php
endwhile; wp_reset_query();
endif;
}
?>

7、修改评论代码。

在文章模板文件中，找到< div class="comment_list">标签，把它里面的所有内容全部删除，然后，在< div class="comment_list">这个标签里面添加评论调用代码，如下：

因为，trans主题的静态模板没有写wordpress默认评论模板的CSS样式，所以，我们在这里还要为这个评论模板添加CSS样式，代码如下：

/ *自带评论表单*/
.comment-respond{ float:left; width:100%; padding:0 15px; box-sizing: border-box; margin-top:15px; }
.comment-respond h3{ float:left; color:#444; font-weight: 400; margin:10px 0; }
.comment-respond h3:before {
font-family: 'dashicons'; /*因为是字体图标，所以当然要指定字体，这是必须的代码*/
content: "\f125";
vertical-align: -2px;
margin-right: 10px;
color:#aaa;
}
.comment-respond form p{ padding-bottom:10px; float:left; width:100%; }
.comment-respond form p textarea{ width:100%;margin-top:5px; }
.comment-respond form p:nth-child(3),.comment-respond form p:nth-child(4){ width:48%; display:inline-block; box-sizing: border-box; }
.comment-respond form p:nth-child(4) { float:right; }
.comment-respond form p input{ width:100%; margin-top:5px; line-height: 24px; }
.comment-respond form p input[type=submit]{ width:90px; background:#3571CC; color:#fff; }
.comment-respond form p.comment-form-cookies-consent{ display:none; }
/*评论列表*/
.post_comment .comment_list{ width:100%; float:left; font-size:14px; }
.post_comment .comment_list h3#comments { display:none; }
.post_comment .comment_list ol { width:100%; }
.post_comment .comment_list ol.commentlist>li{ border-bottom:1px solid #ccc; padding-bottom: 20px; margin-top:15px; }
.post_comment .comment_list ol li { width:100%; position:relative; float:left;padding:0 15px; box-sizing: border-box; }
.post_comment .comment_list ol li .comment-author .fn{ vertical-align: top; font-weight: 800; margin-right:15px; }
.post_comment .comment_list ol li .comment-author .says{ display:none; }
.post_comment .comment_list ol li .comment-author img{ width:45px; height:auto; }
.post_comment .comment_list ol li .comment-author{ float:left; }
.post_comment .comment_list ol li .commentmetadata{ float:left; }
.post_comment .comment_list ol li p{ position:absolute; top:20px; left:65px; }
.post_comment .comment_list ol li .reply{ float:left; color:#3571CC; margin-left:15px; }
.post_comment .comment_list ol li .reply a{ color:#3571CC; }
.comment-body{ float:left; width:100%; }
.post_comment .comment_list .children{ float:left; margin-left:30px; margin-top:10px; }

我们再看一下评论模板显示的效果，如下图：

好了，通过上面的步骤，我们全方位地修改了wordpress主题trans的文章详情页模板的代码。相对于文章列表页，详情页模板的修改稍微要麻烦一些。尤其是评论模板的CSS样式的修改，因为wordpress评论是可以嵌套的，所以，评论列表中可能会有“子孙级评论”，这样一来，CSS样式写起来，还是有点麻烦的。嗯，本节就介绍到这里，如有疑问，欢迎点评或关注我。