wordpress 主题制作教程(九):制作 index.php 文件

本贴最后更新于 4357 天前,其中的信息可能已经时过境迁

我们前面已经将index.php文件里面的公用代码提取出来制作成了header.php\footer.php\sidebar.php,现在我们就来整理一下index.php的代码,index.php文件算是一个最普遍使用的模板页面了,如果你的主题没有home.php、且后台设置首页显示最新文章,那么index.php文件就是首页模板了,如果你的主题没有文章也模板(single.php)、没有单页面模板(page.php)、没有分类页模板(category.php)、没有标签页(index.php)......没有404页面等的,都将会使用index.php文件代替。

那么我们今天要整理的index.php文件到底要以什么形式来显示呢?一般来说都是文章列表,这样这个文件做首页能正确显示、还能做归档页、搜索结果页等。。

不过我们首页如果需要显示20篇文章?我们是不是需要写20篇文章的代码呢?其实这20篇文章代码都是同样的形式,所以我们只需要写一篇文章的代码,然后将这个代码循环输出就好了。如果你之前学过任何一门编程语言,那么while\for循环应该不陌生,条件语句if也应该不陌生。

下面用编辑器打开index.php文件,可以看到里面有3篇文章的代码,我们将其中两篇代码删除,只留下一篇、并且将摘要文字删除:

  1. <?php get_header(); ?>   
  2.     <!-- Column 1 /Content -->   
  3.     <div class="grid_8">   
  4.         <!-- Blog Post -->   
  5.         <div class="post">   
  6.             <!-- Post Title -->   
  7.             <h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>   
  8.             <!-- Post Data -->   
  9.             <p class="sub"><a href="#">News</a>, <a href="#">Products</a> &bull; 31st Sep, 09 &bull; <a href="#">1 Comment</a></p>   
  10.             <div class="hr dotted clearfix">&nbsp;</div>   
  11.             <!-- Post Image -->   
  12.             /images/610x150.gif" />   
  13.             <!-- Post Content -->   
  14.                
  15.             <!-- Read More Button -->   
  16.             <p class="clearfix"><a href="single.html" class="button right"> Read More...</a></p>   
  17.         </div>   
  18.         <div class="hr clearfix">&nbsp;</div>   
  19.            
  20.         <!-- Blog Navigation -->   
  21.         <p class="clearfix"> <a href="#" class="button float">&lt;&lt; Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>   
  22.     </div>   
  23.     <?php get_sidebar(); ?>   
  24. <?php get_footer(); ?>  

我们可以看到,实际上文章骨架,也就是每篇文章都需要的那个代码框架,当然这里说的仅仅是只的这个主题,如果主题的样式不同那html代码的结构也不一样,代码如下:

  1. <div class="post">   
  2.     <!-- Post Title -->   
  3.     <h3 class="title"><a href="single.html">文章标题</a></h3>   
  4.     <!-- Post Data -->   
  5.     <p class="sub"><a href="#">标签1</a>, <a href="#">标签12</a> &bull; 发布时间 &bull; <a href="#">评论数</a></p>   
  6.     <div class="hr dotted clearfix">&nbsp;</div>   
  7.     <!-- Post Image 文章的缩略图 -->   
  8.     /images/610x150.gif" />   
  9.     <!-- Post Content -->   
  10.     文章内容   
  11.     <!-- Read More Button -->   
  12.     <p class="clearfix"><a href="single.html" class="button right"> 阅读全文按钮</a></p>   
  13. </div>   
  14. <div class="hr clearfix">&nbsp;</div>  

接下来我们将里面的静态内容改成动态的。
一、文章标题
将文章标题代码:

 
  1. <h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>  

替换成

 
  1. <h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>  

里面的代码php函数:the_permalink();是输出当前文章的链接地址,注意是直接输出;the_title();函数直接输出当前文章的标题。
二、文章标签
将index.php里面的标签代码:

 
  1. <a href="#">News</a>, <a href="#">Products</a>  

替换成:

 
  1. <?php the_tags('标签:', ', ', ''); ?>  

the_tags函数直接输出文章标签。
三、日期
找到日期文字,31st Sep, 09直接替换成:

  1. <?php the_time('Y年n月j日') ?>  

the_time函数直接输出文章日期,至于输出格式Y年n月j日可以改你也可以改成Y-n-j这些参数非常多,请自己到官网查询。
四、评论数
在文章归档页显示文章的评论数和点击数似乎很是流行,将里面的评论代码

 
  1. <a href="#">1 Comment</a>  

替换成

 
  1. <?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>  

comments_popup_link()函数里面的三个参数分别代表输出无评论、一条评论、N条评论,里面那个%相当于占位符了。这个函数输出的代码带有链接,会链接到文章页,并定位到评论位置。
五、文章内容
在文章内容的位置添加代码

  1. <?php the_content('阅读全文...'); ?>  

即可,事实上我们要输出的是摘要,而the_content是输出文章内容的,但是在首页和归档页,如果你在文章中添加了more标签,则会输出more标签之前的内容,并且在后面加上一个“阅读全文”的链接。但是很多人会想到使用另一个输出摘要的函数the_excerpt();我不建议你这样做,这个函数会输出文章的摘要(也就是在后台添加文章的时候有一个专门用来添加摘要的地方),如果没有摘要的话,就会自动截取前50个字符,不过这是对于英文而言,对于中文的多字节语言,这个函数是截取不了的,所以他会全文输出,相比而言,添加More标签更麻烦还是填写摘要更麻烦呢?不过如果你打算每篇文章手动指定一个摘要的话,建议你使用the_excerpt函数。

六、文章循环

前面的代码我们已经将一篇文章的框架写好了,现在要做的就是将这个文章框架代码放在一个循环语句中输出。

在文章框架的前面,也就是有注释<!-- Blog Post -->的地方,添加代码,效果:

  1. <!-- Blog Post -->   
  2.         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  

再在文章框架后面,添加结束循环的代码,找到:

 
  1. <div class="hr clearfix">&nbsp;</div>  

修改为

 
  1. <div class="hr clearfix">&nbsp;</div>   
  2.         <?php endwhile; ?>  

再找到:

  1. </div>   
  2.     <?php get_sidebar(); ?>  

修改为:

 
  1. <?php else : ?>   
  2.        <h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>   
  3.        <p>没有找到任何文章!</p>   
  4.        <?php endif; ?>   
  5.    </div>   
  6. ?php get_sidebar(); ?>  

OK,到此为止我们的循环代码已经完成,分析一下我们刚才添加的代码,大致是这样子的:

 
  1. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>   
  2.     文章html骨架   
  3. <?php endwhile; ?>   
  4. <?php else : ?>   
  5.     输出找不到文章提示   
  6. <?php endif; ?>  

have_posts()函数是判断当前是否有文章:当前页面要输出的所有文章存放在一个全局数组$posts中,have_post()函数就是检查这个数组的一个计数器,如果当前还有文章,那么就返回true,如果没有就返回false;
the_post()函数用来将have_posts计数器前移,并且将当前文章填进变量$post中,而前面的函数the_title(),the_content()这些函数只是用用来输出$post变量中的的内容,你完全可以用

 
  1. <?php echo $post->title;?>  

来代替the_title()函数,你也可以输出$post变量中的其它内容,比如文章ID。
七、文章分页
前面的代码一次只能输出部分文章,如果整个博客有100篇文章,不可能将100篇文章全部列出来,这时候就需要分页显示了。
找到我们的分页代码:

 
  1. <p class="clearfix"> <a href="#" class="button float">&lt;&lt; Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>  

替换成

 
  1. <p class="clearfix"><?php previous_posts_link('&lt;&lt; 查看新文章', 0); ?> <span class="float right"><?php next_posts_link('查看旧文章 &gt;&gt;', 0); ?></span></p>  

下面提供露兜博主经过经过本次修改后的主题文件
下载改文件

  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 223 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 7 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 14 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • 自由行
    4 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 29 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 789 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 223 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1435 引用 • 10056 回帖 • 489 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖