趣文网 > 作文大全

WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

2020-11-30 12:15:01
相关推荐

在前面的章节中,我们创建了wordpress主题trans的公共模板:header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板,这样就更加方便了trans主题的其它动态模板的开发。就比如,今天我们要开发的模板——文章列表页模板,就不需要再去修改头部、侧边栏、底部的代码了。好了,闲话不多说,我们直接进入到今天的主题当中,怎样添加trans主题的文章列表页模板?

第一步:创建列表页模板文件。

在trans主题目录下创建一个列表页模板的文件——archive.php。wordpress程序默认的文章列表页模板的名字必须是:archive 或 categoty,也就是说,可以是archive.php,也可以是category.php,我们这里用archive.php。

第二步:引入头部模板。

用sublime等编辑器打开trans主题的静态模板list.html,把里的代码复制到archive.php文件中。然后,在代码找到这句代码,从与这间的所有代码全部删除,因为这段代码,我们已经可以使用公共模板——header.php来代替了。

删除后,我们再来引入header.php这个头部模板:

< ?php get_header(); ?>

这时,我们可以正常打开列表页了。但是有一个小问题:标题显示的不是文章分类的名称,仍然是网站的名称。而我们需要的效果是,在列表页时,我们需要显示的是文章分类目录的名称。所以,我们要在header.php文件中的标签中修改一个调用代码,

原代码是:

< title>< ?php echo get_bloginfo("name"); ?>

修改成如下代码:

< title>< ?php if(is_home()){echo get_bloginfo("name"); }else{if(is_category()){$cat_c = get_the_category();echo $cat_c[0]->cat_name; echo " - "; bloginfo("name");}else{the_title(); echo " - "; bloginfo("name");} } ?>

这段代码的意思是:如果是网站的首页,就显示网站的名称;如果是列表页,就显示为“分类目录名称 + 网站名称”;否则就显示“文章标题+网站名称”。

第三步:引入右侧边栏模板。

在archive.php中找到< div class="c_right">标签中的所有代码,删除掉,然后,在当前位置上,引入公共模板sidebar.php侧边栏模板,代码如下:

< ?php get_sidebar(); ?>

这样,我们就不需要再去修改原< div class="c_right">标签内的代码了,而只需直接把sidebar.php拿来用就可以了。

第四步:引入底部模板。

同上,在archive.php代码中找到< footer>标签,然后,把< footer>及它后面的所有代码全部删除掉,现在不需要了,因为,我们有footer.php底部公共模板了。删除掉后,我们在原位置上直接引入这个footer.php底部模板,代码如下:

< ?php get_footer(); ?>

在引入完头部、侧边栏、底部的公共模板后,我们再来看看archive.php的模板代码,如下图:

然后,我们只需要修改archive.php模板代码中的 < div class="c_left">标签内部的代码就可以了。

第五步:修改左侧主体部分。

其实,我们查看trans主题的静态代码的效果时,我们可以看到,列表页与首页基本上是一样的,只是左侧的顶部多了一个面包屑导航。所以,我们只需要修改< div class="c_left">标签里的代码就可以了(如上图所示)。我们可以先把archive.php代码中的< div class="c_left">里的代码全部删除掉,然后把首页模板index.php代码中的< div class="c_left">所有代码全部复制下来,粘贴到archive.php中。这段代码包括了左侧的文章列表以及分页按钮。这样,archive.php的左侧主体部分基本弄好。

第六步:添加面包屑导航。

我们在archive.php模板的< div class="c_left"> 标签中的< div class="left_bottom">标签的上方,添加发下代码:

< div class="left_top">< ul>< li>cat_name; //获取当前分类名 ?>< li>< a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home">首页 > < ?php the_category(","); ?>< ul>< ?php $cat_desc = $cat_c[0]->category_description; //获取当前分类的描述。if($cat_desc){echo $cat_desc; }else{echo $cat_c[0]->cat_name; //获取当前分类名}?>

这段代码中,我们又用到了几个wordpress的函数:

the_category(","):获取当前分类导航;$cat_c = get_the_category():获取当前分类的信息,并赋值给$cat_c这个变量

面包屑导航的主要作用,就是让用户可以看到当前页面所在的个体位置。而且,可以通过点击面包屑导航中的相关链接,可以跳转到链接页面,如:返回首页(如下图)。

通过上面的几步,我们就完成了wordpress主题trans的文章列表页动态模板的修改。嗯,是不是有一个小小的发现:修改trans主题的列表页模板要比修改首页模板index.php所花的时间要少得多。是的,因为在修改index.php首页模板时,我们需要所有的代码,而修改archive.php模板时,我们只需要把公共模板拿来直接用就可以了,省去了大量的时间,这就是公共模板的魅力之所在。好了,本节就介绍到这里,如有疑问,欢迎点评。

阅读剩余内容
网友评论
显示评论内容(2) 收起评论内容
  1. 2021-08-07 14:21将爱藏在心底[江苏省网友]IP:3398918952
    对于刚开始学习WP主题开发的人来说,这个问题一直困扰着我,感谢作者详细的讲解!
    顶0踩0
  2. 2020-03-14 17:24yangliwei[江苏省网友]IP:704643828
    这篇教程太棒了,我一直在寻找这方面的指导,真的帮了大忙!
    顶24踩0
相关内容
延伸阅读
小编推荐

大家都在看

付出与收获的作文 写西湖美景的作文 我很感激他作文 五年级下册读后感作文 跌倒作文600字 收获作文600字初中 家乡美景作文500字 写冬天的作文400字 我的好朋友作文开头 记忆中的年味作文 那一次我流泪了作文 不一样的中秋作文 我的假期作文400字 品味遗憾作文 游记怎么写400字作文 冬景作文600字 除夕习俗作文 我最喜欢的一首歌作文 运动使我快乐作文 关于成长感悟的作文 洗碗作文100字 五年级下册四单元作文 最喜欢吃的食物作文 我喜欢的季节英语作文 有趣的事作文600字 我的爸爸作文100字 逛超市作文300字 春节的英语作文带翻译 我的哥哥作文400字 七年级下册作文题目