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

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

我们前面已经将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)下授权发布。

    45 引用 • 113 回帖 • 276 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 443 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 465 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 396 关注
  • 倾城之链
    23 引用 • 66 回帖 • 121 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 195 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 442 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 2 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 712 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 446 关注
  • sts
    2 引用 • 2 回帖 • 167 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    86 引用 • 897 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 4 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 161 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    26 引用 • 85 回帖
  • JWT

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

    20 引用 • 15 回帖 • 20 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 82 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 348 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 510 关注