通过上一章“怎样添加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样式写起来,还是有点麻烦的。嗯,本节就介绍到这里,如有疑问,欢迎点评或关注我。