使用 PHP 获取并解析 JSON 显示在页面中

很久没写过 PHP 的文章了,也很久没有用 PHP 了,差点忘了怎么做了。JSON 是现在比较流行的数据交流方式,比 XML 都流行,一般用作 api 接口进行数据获取、交流。

就文章的标题来说,本文介绍两个小要点:PHP 获取内容、PHP 解析 JSON 并显示。

PHP 获取接口内容

你如果想解析 JSON 数据并且显示在页面中,第一步肯定要先得到 JSON 接口文件的内容。在 PHP 中获取一个页面的内容,可以使用 fopen() 函数远程页面然后使用 fread() 函数循环获取内容。

假设接口文件页面为:http://www.qttc.net/api.php?action=open_getBlogList&only_recommend=1&limit=5 ,那么我们可以使用下面语句获取这个接口文件内容:

$handle = fopen("http://www.qttc.net/api.php?action=open_getBlogList&only_recommend=1&limit=5","rb");
$content = "";
while (!feof($handle)) {
    $content .= fread($handle, 10000);
}
fclose($handle);

这样 content 保存的就是 JSON api 内容。

PHP 解析 JSON 并显示

原始的内容是无法直接调用的,必须被 PHP 进行进一步处理,才能被调用显示在网页中。在 PHP 5.2 及后续版本中,使用 json_decode() 函数来解析 JSON 数据,将其转换成 PHP 可以调用的数据格式。例如:

$content = json_decode($content);

解析之后呢,我们就可以按照 PHP 中调用数组数据的方法一样的调用 JSON 中的数据。这个调用方法需要按照具体的 JSON 数据格式来写,演示请看下面。关于 json_decode 函数的使用,具体看 PHP 手册,这里不再赘述:http://php.net/manual/en/function.json-decode.php

实战调用琼台博客的 api

细心的朋友会发现 潜行者 m 博客的边栏最下面多了一个“友文推荐”模块,里面推荐了一些琼台博客的文章。

友文推荐

友文推荐是琼台博客倡议的一种博客之间交流方式,比传统的友情链接更有效,同时实现了博客内容互补。由于琼台博客的博客程序是他自己本人编写的,所以他提供了 JSON api 接口,可以获取到最新的可推荐的文章。

本人使用 PHP 获取这个 JSON 接口,然后输出到自己博客的边栏中,下面来实战操作一下。

第一步,查看 api 调用方式

调用之前,你肯定要看一下对方的 api 调用手册,包括调用地址、如何调用、数据输出格式等等。琼台博客的 api 说明地址如下:http://www.qttc.net/openapi.html

根据文档,我使用了 http://www.qttc.net/api.php?action=open_getBlogList&only_recommend=1&limit=5 这样的参数,意思就是调用五条他推荐的文章。

第二步,获取 api 结构数据

很简单,上面说过了,具体代码如下:

$handle = fopen("http://www.qttc.net/api.php?action=open_getBlogList&only_recommend=1&limit=5","rb");
$content = "";
while (!feof($handle)) {
    $content .= fread($handle, 10000);
}
fclose($handle);

先打开这数据文件,然后把所有内容保存到 content 变量中,因为可以肯定 api 数据不会超过 10000 个字符,所以用 10000 作为 fread 函数的第二个参数。这样,api 返回的 JSON 数据就保存在了 content 变量中。

第三步,解析并输出内容

使用下面代码解析数据,然后调用输出

$content = json_decode($content);
foreach ($content->data as $key) {
    echo '<li><a target="_blank" href="'.$key->b_url.'">'.$key->b_title.'</a></li>';
}

首先对 content 变量中的 JSON 数据处理,然后变成 PHP 可以调用的数据,再使用 foreach 遍历输出这五条内容,按照我需要的 HTML 格式,将内容插入进去即可。

再加上样式修饰,这样就完成了 获取并解析 JSON 显示在页面中了。调用其它 api 数据的方法大同小异。

将 WordPress 博客从 SAE 迁出搬回 JustHost

前几天不知道为什么,SAE 老是抽风,然后打开很慢甚至无法打开,然而 ping 确实可以 ping 的通。不通过顶级域名而是直接使用 SAE 提供的二级域名也无法打开。

我一直以为 SAE 是非常正规、高质量的,可能偶尔遇到几次抽风问题,事实上这是我第一次遇到。写了一篇文章,结果等了一个下午也没有发表出去。期间,我找了一些网友进行测试,发现不是我个人网络的问题,他们也都打不开。然后 哼哼猪 跟我说,我的博客经常遇到这种很慢的情况。难道是我之前都没有怎么管理导致的吗?

我打算再等等看,第二天恢复正常了。然后第三天一大清早的,又是这种问题。我上网搜索了一下其他放在 SAE 上面的网站,没有这个问题。我开始忍受不了了,忍受不了这种影响用户体验的问题存在。于是打算从 SAE 迁出去。

软矿 的博主 MK 聊了一下,跟我推荐了几个 VPS,我看了半个下午的 VPS 套餐,确定下来之后发现人家卖完了,很无语。于是晚上将博客数据什么的搬回了之前的 JustHost 暂时用一下待日后再解决主机问题。虽然访问速度比较慢,但是至少不会出现那种打不开的抽风问题,使用 又拍云 进行静态文件加速,应该也不会慢到受不了。

WordPress 迁出 SAE 的步骤

这段虽然比较水,但是还是大体说一下,因为搬出来的时候遇到了一些小插曲,可供后来者参考使用。

WordPress 搬家步骤有很多,我个人比较喜欢的是:导出数据》》在目的主机安装 WordPress 》》导入数据。

这时候,强大的资源外链的作用体现出来了,因为图片等都用外链,所以根本不用管那些资源,直接把数据库内容转移即可。看起来步骤非常简单,但实际上从 SAE 迁移到 JustHost 的过程中遇到了很多问题,折腾了一个下午。

SAE 的数据导出问题

导出 WordPress 的数据有两种方式,第一种是在后台使用“工具”里面的“导出”,导出为 xml 文件,然后在新博客的后台直接导入即可。当然,这是一种不完全的导入方式,虽然说是博客全部的数据,但实际上只有文章、页面、简单的配置数据,一些博客名称什么的内容,还需要自己在新博客后台细微调整。

因为这种方式比较傻瓜,所以优先考虑。这时候出现问题了,SAE 上的 WordPress 无法导出所有的数据,只能导出 34kb 的 xml 数据文件。原因不详,看后台提示可能是因为 SAE 限制了数据查询次数还是其他乱七八糟的东西,反正导不出所有数据。不得已,我拿出前天导出的备份 xml 文件,大约 3M 左右大小。这时候要上传新博客的时候,发现服务商把 php 的上传限制在了 2M 大小。好吧,这种方法还得看你的主机参数配置,所以不是好办法。

SAE 上面也附带了 PHPMyAdmin 那就使用它直接把 MySQL 的数据库内容导出,然后在 JustHost 后台的 PHPMyAdmin 中导入好了。SAE 上的东西肯定都是阉割版的,不知道 PHPMyAdmin 是什么版本的,把数据库导出之后,在 JustHost 后台无法导入,因为某些语句出错。后来经过搜索,发现也有网友迁移的时候,遇到了这种问题。

SAE 还提供了一个他们自己开发的数据库管理服务 Deferred Jobs 可以用来导入导出 MySQL 数据库。因为使用这个服务需要排队等,不是立即生效的,所以官方推荐 4M 一下的数据库用 PHPMyAdmin 导入导出,4M 以上的使用这个服务。不管了,直接用了,其实没过多久就直接导出完毕。

下载下来 sql 文件有 3M 多,而使用 PHPMyAdmin 导出的才有 2M 多一点,我怀疑没有完全导出,难道又是被 SAE 阉割限制了?这次的 sql 文件非常正常,使用 JustHost 的后台 PHPMyAdmin 直接上传导入就可以了。

再全面的检查一下,增加一下固定链接伪静态,把主题文件、插件上传到新博客,这样搬家完成了,顺带升级成了最新版的 WordPress,SAE 上用的是 3.2.1 阉割版的 WordPress 大家都懂的。

感谢 SAE

我从2012年10月16号左右,把 WordPress 博客从 JustHost 迁移到了 SAE,后来总结写了《WordPress 迁移 SAE 完全操作攻略》 这篇文章,下面虽然有评论说看到很多人进去又出来了,但是我觉得我不会。因为我对 SAE 的服务挺有好感的,一直以为 新浪 是大公司,放在上面很安全,不会丢失数据也不会轻易被黑客攻击,可以安心写文章。以至于后面的这段时间,我连数据都没有备份过几次。

截止到今年3月份,博客在 SAE 上面已经5个多月了,这段时间内访问速度还是挺不错的,当然是相对于 JustHost 来说。对于小型的博客来说,花费非常少,我也做了很多优化,消耗资源很少,所以截止到现在的5个月的使用,算起来只花了2块钱的短信验证费,其他都是实名认证送的云豆。

同时通过 SAE,还学到了一些简单的 SVN 使用等。总之,虽然搬出了 SAE 还是要感谢它,日后一些小应用的开发什么的,说不定还会放在上面。感谢 SAE !

为什么不要用 SAE

在刚开始使用 SAE 的时候,对 SAE 充满了好感,曾经强烈推荐周围的朋友试用 SAE,也曾建议 多说 他们使用 SAE 或者 阿里云 主机,这样可以减少成本、人力消耗。因为他们的服务器都是自己购买,自己维护的,如果使用第三方稳定的服务,就可以仅仅专注于 多说 的开发了。但是他们拒绝了,我现在明白了。

东西只有掌握在自己手里,才是最安全的。SAE 或许比一些低端主机靠谱的多,但是为了开发或者资源限制,功能什么的阉割的太严重了。开发、修改等,都得按照他们的套路来,而放在自己的主机或者服务器上,想怎么处理就怎么处理(当然,你得有相关技术),无论是备份还是什么,都是很方便的。我想,多说团队之所以自己维护服务器,就是这个原因吧。

对我个人来说,可能也不会在 SAE 上寄放博客了,因为我本身要折腾 WordPress 所以在自己的主机上折腾比较方便,SAE 上的是早期阉割版本的 WordPress。

博客未来的发展

JustHost 虽然便宜,但是速度实在是比较慢,之前也是因为经常抽风宕机所以才想搬到 SAE 上面的。但是最近手头太紧,买好点的 VPS 又没有足够的资金,此外还有几个筹划中的网站项目等待上线。所以先暂时使用 JustHost,多写一些文章,等访问量大了,也有足够的资金,就会更换好点的主机,例如 linode 啥的。暂时先忍忍吧。

WordPress 子主题功能 + 为 WordPress 增加分类搜索功能并美化

近期关于 WordPress 方面主要写了两篇文章,分别是 使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题为 WordPress 增加按分类搜索功能并自定义外观

之后,关于 WordPress 的文章,我直接首发在 我爱水煮鱼 上面,在 潜行者m 博客就不转发了,只对一些比较好点的文章做一个链接。欢迎大家关注 我爱水煮鱼,国内最专业的 WordPress 技术平台。

子主题功能

如果你想修改一个 WordPress 最好的方法并不是直接上去修改,而是通过 WordPress 的子主题功能进行修改。这样修改之后,不会影响到原来主题文件,原来主题升级覆盖之后,也不会影响你修改的内容。

结合着官方文档,并且动手实践了一下,写出了这篇文章:使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题

增加分类搜索功能并定义外观

对于一个比较大型类门户的博客来说,按照分类搜索功能是必不可少的,这篇文章就介绍了如何增加这个功能。同时对输出的 select 分类选择下拉列表进行了美化。
这篇文章中,提供并用 jQuery 实现了模拟下拉列表的功能,想要围观请看这里:为 WordPress 增加按分类搜索功能并自定义外观

如何用 WordPress 写出一篇“好看”的文章

一篇文章是否好看,无非在于两方面,第一个就是文章本身的内容,另一个就是文章显示的排版布局。潜行者 m 博客自创建以来,也已经过去了近两年的时间,这其中积攒了很多在 WordPress 写作的经验,特别是在文字排版这块。回首观看,早期的文章质量比现在的要差远了,本文就是总结一下对于使用 WordPress 写作文章排版的经验。

一些基础知识

在后台编写文章通常使用可视化的编辑器,你看到的排版布局就是比较具体的效果,但实际上数据是用 HTML 结构来记载的。例如,当你回车换行,那么在换行的地方系统就会加上一个段落标签(<p>),当你插入一个连接的时候,用的就是锚标记(<a>)。HTML 是具有语义性的,根据 HTML 的语义性写出的一篇文章,对于 SEO 、排版都有好处。此外,WordPress 主题的作者,通常也会针对这些结构进行一些设计和样式处理,会使其显示的效果更好。

用标题划分文章层次

用标题划分文章层次

标题标签(<hn>)是非常重要的一个 HTML 标签,它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章,肯定要有一定的层次,也就是所谓的大论点、小论点等。通常的文章一般具有三个层次:文章标题、大标题、小标题,通常来说,对应的标签是 h1、h2、h3。对于有的主题来说,设计者会用 h2 作为文章标题,这点也需要注意。标题标签一共有六个(h1-6),分别代表不同的重要等级,实际应用当中,只会使用 h1-3。需要注意以下两点:

  • 内文标题层次不要高于文章标题。如果文章标题使用了 h1,那么内文大标题只能使用 h2。
  • 小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次,不能把小标题和大标题的层次混合。
    合理的使用标题划分文章层次,可以让文章变得更容易理解,对阅读者和 SEO 都有好处,更有一些插件可以根据文章的标题建立目录层次,例如 水煮鱼 开发的 TOC 文章目录插件

对于重要的文字进行加重处理

这一点大家都知道,不再赘述。但是要注意的一点,只对非常重要的关键词进行加重,加重的效果通常是文字加粗,这样可以吸引浏览者的目光,如果太多的话,就会分散阅读者的注意力,要尽可能的少。下图就是个加太多的例子。

善用有序和无序列表

如果你在文中写的内容具有明显的并排性,可以作为一个列表,那么一定要使用无序列表(<ul>)或者有序列表(<ol>)。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点,或者是一些赛事列表,那么你应该使用无序列表。有序列表是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤,或者是发布一个有明确顺序的资源列表,那么就用无序列表。

善用有序和无序列表

见过很多文章会对一些并排性的内容,手动编写诸如 1、2、3 之类的编号,其实这是错误的,应该使用有序列表, CSS 自动添加编号上去。

善用空格

空格是文章中比不可少的一部分,但是很多人用空格的方法是错误的。空格不是用来排版的,它不像是在 Word 之类的软件里面,使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头,空开两个字符,这空开的距离,并不应该使用空格来实现,而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作,如果你用的主题并没有做这个,那就不会自动空开了,你只能自己修改 CSS 或者用空格模拟空出两字的效果,但这是不合理的。

善用空格

那么空格究竟要用在什么地方呢?用在重要的关键词上面,特别是英文关键词。英文在中文文章中是个不太好处理的东西,绝大多数的作者会直接把英文字母和中文混写在一起,但是这样的显示效果并不好。具体对比效果如下图

善用空格

在稍微重要的关键词的两边,我加了两个空格,稍稍加一点距离,对于英文单词,除了空格之外还对首字母进行大写,两条文字一对比效果很明显就可以看出来。

标注文章引用内容

标注文章引用内容

有的文章可能会引用一些其他文章的资料、名人名言等,这样就需要选中这块文字,点击“块引用”,这样就可以告诉阅读者,这是一块来自他人的内容,我引用过来的。

用预格式化描述代码等有格式的内容

例如一段代码,通常有换行、空格之类的用来保持代码的结构,如果以普通的文字发布,可能会破坏这个结构,所以要用预格式化。

用预格式化描述代码

使用其他修饰的注意事项

其他的文字修饰还有很多,包括:斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用,用多了,会让阅读者感觉杂乱影响阅读心情。就颜色来说,一篇文章中最多不要超过两种颜色。

颜色不要超过两种

尽量多的使用图片

虽然不能极端的说没有图片的文章不是好文章,但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处:

  • 与文章内容相符增强文章表现力
  • 缓和阅读中的视觉疲惫
    所以,文章中,要尽量配图。配图也要跟文章主题相符合,例如:介绍人物的文章,配张人物图片;介绍软件的,配张软件截图;写心情生活类的,可以配张唯美的图片等等。

用心去写文章

一篇文章最吸引人的是文章的内容,再好的排版,没有好的内容,人们也不会去看的。所以要用心去写文章。

写之前有明确的目的(介绍自己的写作排版经验),有一个大体的构思(包括写哪几部分),然后觉得写出来会给阅读者一定的帮助,这时候就开始动手写。写的过程中,按照之前的构思,列出大纲和知识点收集整理相关资料,然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后,还要反复检查两边,看看是否有废话、错别字以及没介绍清楚的地方。

就本文而言,本人用了两个小时的时间来写作,为写出一篇有价值的文章,付出这些是值得的。

一个反例

下图是从 所谓刚子 博客上截取的,是一篇被我缩小的文章,整体是一大段文字没有任何的段落层次、修饰、图片,是一个非常好的反例。

一个排版不好的反例

如果只是一篇短小的文字,这样是可以的,如果是一篇很长的文字,不免让阅读者疲惫。

写在最后

用 WordPress 写出一篇好看的文章,首先要用心去写,写出一篇高质量、有阅读价值的文章,其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。

至于文章内容具体的修饰样式,是根据你用的 WordPress 主题而定。本人的原创主题 Qetro 就对文字的排版进行了一定的优化,如果你的博客写文字比较多一点,不妨试用一下看看效果。 ^_^

【基础篇】13,补充之前教程中的一些知识要点

在之前的教程中,我通过做一套非常简单的 WordPress 主题,介绍了一系列关于 WordPress 主题制作的方法和函数。对于基础篇,有一些细节略过了,有一些功能没有提到,因为这些对于基础比较差的朋友有点难度,所以放在了 中级篇 教程中。回顾整个初级篇教程,有几个知识点需要介绍但是没有介绍到,还有一个小错误,于是就在本文中总结一下。

显示更多的文章列表

在目前的主题中,在首页中,只能显示有限的文章列表内容,并没有前后翻页的功能。这样,时间比较早的文章就看不到了,现在就要加上。需要用到的代码如下:

<div id=”pagination” class=”mt10”>
<?php posts_nav_link(); ?>
</div>

其中 posts_nav_link(); 这个函数就是用于生成列表翻页的函数。这段代码通常要放在文章列表的最下面

页面翻页导航

保存一下,刷新页面,我们就可以看到了多了一个“下一页”链接,点击之后,还会出现 “上一页”

看到上一页

这种方式非常简单,但是效果有限。在实际的应用中不大,因为现在网站大都用“页码数字”的形式来翻页。但是 WordPress 并没有提供与之相关的函数,有很多插件是用于实现这个功能的,但实际上用代码也能很方便的实现。下面就是我在网上找到的一段比较好的实现代码,作者不详:

function qxzm_pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1”);
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged - 1;
$next = $paged + 1;
$range = 5; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo "&lt;div class='pagination'&gt;";
echo ($paged &gt; 2 &amp;&amp; $paged+$range+1 &gt; $pages &amp;&amp; $showitems &lt; $pages)? "&lt;a  href='".get_pagenum_link(1)."' class='inactive'&gt;|&lt;&lt;/a&gt;":"";
echo ($paged &gt; 1 &amp;&amp; $showitems &lt; $pages)? "&lt;a href='".get_pagenum_link($prev)."' class='inactive'&gt;&lt;&lt;&lt;/a&gt;":"";

for ($i=1; $i &lt;= $pages; $i++){
if (1 != $pages &amp;&amp;( !($i &gt;= $paged+$range+1 || $i &lt;= $paged-$range-1) || $pages &lt;= $showitems )){
echo ($paged == $i)? "&lt;span class='current'&gt;".$i."&lt;/span&gt;":"&lt;a  href='".get_pagenum_link($i)."' class='inactive' &gt;".$i."&lt;/a&gt;";
}
}

echo ($paged &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($next)."' class='inactive'&gt;&gt;&gt;&lt;/a&gt;" :"";
echo ($paged &lt; $pages-1 &amp;&amp; $paged+$range-1 &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($pages)."' class='inactive'&gt;&gt;|&lt;/a&gt;":"";
echo "&lt;/div&gt;";
}

}
把这段代码复制到主题下面的 functions.php 中,然后在需要这个功能的地方,写上定义的这个函数,就可以实现了。

实现翻页的函数

这段代码其实也是比较好理解的,如果你有一定的 php 基础,很容就可以看出代码的实现过程。此外,这段代码还输出 html 结构,这样你就可以方便的用 CSS 定义样式了。在中级篇会详细讲解这个地方,默认的情况下效果如下。

实现翻页的效果

因为之前的 archieve.php 文件是使用 index.php 文件生成的,同时这个文件的用途也是显示文章列表,所以我们也要在这个文件的相应位置,放上这些代码。

在文章页面中显示上一篇、下一篇文章

在一个文章或者页面中,显示相邻的上下篇文章这个功能,也比较常见。我们可以使用下面的代码来实现:

<div id=”prevnext” class=”mt10 ofh”>
<div class=”fl”><?php previous_post_link(‘%link’); ?></div>
<div class=”fr”><?php next_post_link(‘%link’); ?></div>
</div>

首先定义了一个结构,然后里面有两个函数:previous_post_link(‘%link’);next_post_link(‘%link’);,这两个函数从字面意义上就可以指定,分别用来生成 上一篇、下一篇文章 链接用的。添加的位置一般在文章的底部,当然也可以在顶部添加。保存一下,我们就可以看到效果了。如果一篇文章有上一篇和下一篇文章的话,就会出现这个链接,如果没有,就不会出现。

上一篇下一篇文章的效果

由于 page.php 文件是由 single.php 文件生成的,如果我们想在页面中也有这个功能,那么我们需要在 page.php 中也加上这些函数。

当管理员登陆后显示管理工具条(AdminBar)

现有的演示主题中,当我们登陆之后,返回首页,上面什么都没有。在使用其他的主题时,登陆后台之后,应该会在页面上显示一个快捷管理条。这个管理条可以让你快速的发表文章或者修改这篇文章等等。

至于如何为这个主题添加 AdminBar ,之前写过文章:在主题中添加 AdminBar 功能 ,在这里就不再赘述了。

不同页面显示对应的标题(title)

在之前的第五节教程制作主题的头部区域中,我提到使用下面这段代码来显示标题:

<title><?php bloginfo(‘name’);  ?> <?php  bloginfo( ‘description’ ); ?></title>

这的确显示出来了标题,但是在其他页面中,标题也显示这一种形式。因为其他的页面(例如 single.php),引用了 header.php 文件,所以当你访问一篇文章的时候,浏览器标题显示的都是一样的内容,这显然是不行的。那么我们如何进行修改呢?

这里可以选择让 single.php 不引用 header.php 文件,而是把 header.php 的内容复制到 single.php 的头部,然后在 title 标签内,编写上调用当篇文章的标题。这样的做法可以解决问题,但是后期的修改不方便,也违背了 WordPress 分块机制的目的。其实我们可以使用下面这段很简单的代码解决这个问题:

<?php if(is_home()): ?>
<title><?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?></title>
<?php else: ?>
<title><?php wp_title(‘&laquo;’, true, ‘right’); ?><?php bloginfo(‘name’); ?> </title>
<?php endif ?>

这几条语句,使用了一个 if 语句,同时使用了 is_home() 这个判断函数,判断当前页面是否为首页。如果是,则显示现有的标题结构,如果不是,就调用 wp_title(‘&laquo;’, true, ‘right’); 及其参数来显示标题。这样,当访问文章或者页面等页面的时候,显示的标题就是文章标题和网站名称了,而不是原来的网站名称和网站描述了。我们把它替换到 header.php 文件中,之后就完成了

显示对应标题的代码

至此,初级篇教程就结束了,敬请期待更高级的中级篇教程,它将会以一个更加复杂的主题制作过程为主线,深入的介绍更多常用的函数,以及之前基础篇略过的细节。

本节课相关资源下载

myTheme(基础篇-13) 本节课主题下载

本系列文章

  1. 开始执行的wordpress主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress的主题机制
  4. 【基础篇】3、设计制作你的HTML主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer
  11. 【基础篇】10,将现有 index.php 文件分块处理
  12. 【基础篇】11,通过 index.php 文件生成 文章页面(single.php)
  13. 【基础篇】12,通过当前的文件,生成主题其他必要文件

【基础篇】12,通过当前的文件,生成主题其他必要文件

就基础篇来讲,主题的大部分文件已经生成了,现在还剩下几个比较次要的文件:page.php、archive.php。用到的手段和技术和之前都是一样的,借此,我们再来复习一下分割生成文件的过程。

生成 page.php 文件

页面(page)和文章(single)的样式大体是相同的。很显然,我们要用已经生成的 single.php 文件来生成 page.php 文件。我们先打开一个页面看一下现在的效果。

页面的初始效果

因为目前主题中,没有 page.php 这个模板文件,所以根据前面介绍的 WordPress 主题机制 中的缺失文件替换机制,它使用的是 index.php 文件,所以只能显示出摘要。下面我们来生成 page.php 页面:

  1. 复制 single.php 文件,命名为 page.php
  2. 打开文件修改一下
    对于页面来说,通常不需要底部文章版权和作者介绍信息,因为页面使用来展示内容的,一般是一些公告之类的。此外,如果想做一个留言板这类的东西,也可以使用页面来实现,当然这个页面要带有评论模块。那么,我们只需要把原来 single.php 文件中的底部文章版权和作者介绍信息模块删掉就可以了。

修改完成后的 页面 page.php

修改完成之后,我们再打开随便一个页面,就可以看到里面的内容了。需要注意的是,这里没有显示评论模块,因为我在本地没有安装“多说”插件,所以暂时看不到评论框之类的东西。如果你在本地安装了,就会看到的。

page.php 页面效果

生成 archive.php 文件

archive.php 这个文件主要用于按照日期显示文章列表。很多博客通常在边栏增加一个类似“按月归档”的功能。

archieve 页面

当点击这些日期的时候,系统就会优先查找 archive.php 这个模板文件来显示列表。既然是文章摘要列表,那么我们应该使用 index.php 文件来生成这个文件了。过程和之前的完全相同,复制一遍,改一下名字就可以了。如果你想让它变的与众不同一点,还可以加上一些修饰之类的。例如在文章列表的最顶端加上“按月查看文章”之类的说明字样。

在本系列教程的中级篇中,还会详细讲解怎么进一步的设计这个页面,但是在初级篇,就直接复制一遍好了。这样,主题的其他必要文件就完全生成了,我们的初级篇示例主题就做好了。

本节课相关资源下载

myTheme(基础篇-12) 本节课主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer
  11. 【基础篇】10,将现有 index.php 文件分块处理
  12. 【基础篇】11,通过 index.php 文件生成 文章页面(single.php)

【基础篇】11,通过 index.php 文件生成 文章页面(single.php)

在上一节我们讲解了如何对 index.php 文件进行分块,这节课就来讲解,如何通过这个文件,生成一个 文章模板(single.php 文件)。通过这节课,你会体验到文件分块的好处。

生成这个 文章页面模板 的步骤很简单。首先,我们先来仔细想一下,文章页面和博客首页有什么不同?除非是很特殊的设计,它们之间的不同,就在于主体区域。因为博客首页,更多的是要展示文章的信息,包括标题、时间、摘要等,通常以列表的形式出现。而具体的文章页面,就需要显示文章内容。至于其他的元素,例如头部、边栏、底部等这些都是不需要变化的。

那么生成的步骤就出来了。只需要把 index.php 复制一遍,然后命名为 single.php ,之后再修改一下这个文件,把结构改一下、添加上评论功能等,就变成了一个文章页面模板了。

修改文档结构

对于文章内容页面,为了更加方便的使用 CSS 对其进行控制,我们需要对其 结构进行修改。之前的结构

修改后的结构,已经添加了 文章信息描述 和 评论模块

之后,我们还要修改调用数据的函数。之前复制的时候,还是 the_excerpt() 这个显示文章摘要,我们现在要使用下面语句来调用全文内容

<?php the_content(); ?>

不需要任何参数,即可直接输出一篇文章的所有内容。当然,也可以为这个函数加上一些参数,这样可以根据自己的需要进行定义。更加详细的用法,请看 官方文档 或者 中文版 的。在这里,就不再赘述了。

完成上述步骤之后,我们刷新一下博客,然后随便打开一篇文章的时候,发现已经可以显示出来文章全文了。下面我们需要来进行一些样式的修饰。

添加 CSS 样式

之后可以看到文章数据之后,我们就需要对其使用 CSS 排版布局。排版主要的内容包括:文章整体布局、文章内元素的修饰、新增结构的布局等。关于文章内元素的修饰,在高级篇还会更加深入的讲解。在初级篇中,我简单的对其进行修饰一下,不对一些文章内的细节进行修饰。之后,文章页面效果图如下:

添加相应数据调用

修饰完成之后,我们需要在新增的“文章信息”模块中,添加相应的数据调用。只需要把下面一段代码复制到那个位置即可:

原创作者:<a href="<?php echo $authordata->user_url; ?>" title="<?php echo $authordata->display_name;?>"><?php echo $authordata->display_name;?></a><br />
 原文链接:<a href="<?php echo get_permalink($post->ID);?>" title="<?php echo $post->post_title; ?>"><?php echo $post->post_title; ?></a><br />
 版权声明:<a href="<?php bloginfo('siteurl'); ?>">© <?php bloginfo('name'); ?> </a> 版权所有,转载请声明版权!

显示效果如下:

上面的代码,对于有一定 PHP 基础的朋友来说,很容易理解。就是通过 WordPress 内置的几个全局对象,调取当前文章的相应信息,然后以 HTML 的方式呈现出来,于是就有了大家看到的那个效果。

添加评论功能

评论功能,是一篇文章必不可少的模块。增加评论模块,通常在 主题目录下面 新建一个名为 comments.php 的文件,然后在里面添加上相应的评论提交、评论调用显示的函数,之后在相应位置,加上调用函数。但是评论模块比较复杂,在基础篇中,就不讲解如何去手动添加评论模块,而是推荐使用第三方评论插件。

在这里推荐一下 多说 这个评论插件。在 WordPress 中安装这个插件,然后在他们官方网站上注册账号,通过密钥链接起来之后,就可以使用他们的插件了。他们定义的评论框样式美观,而且是拥有完整的评论功能,还可以使用社会化的网络登录并且同步到微博等等功能。所以推荐一下,大家可以去他们官方网站(http://duoshuo.com/)得到详细的使用教程和方法。

新建完 comments.php 之后,保持这个文档内容为空即可。然后找到主题文件中的评论功能的位置,在这里添加下面的代码:

<?php comments_template(); ?>

这个函数就是用来调用评论模块的,我们只需要做这么多即可。因为安装 多说 插件之后,它会自动检测 这个函数 然后将其内容替换成他们的评论模块。安装完多说插件,并且安装官方要求配置好之后,就会看到如下的评论框样式。

好,我们的文章页面就这样完成了。

本节课相关资源下载

myTheme(基础篇-11) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer
  11. 【基础篇】10,将现有 index.php 文件分块处理

【基础篇】10,将现有 index.php 文件分块处理

WordPress 具有一套成熟的模板系统,在前面第二节 WordPress 的主题机制 中介绍过它的缺失文件替换机制和分离文件分块机制。这个文件分块机制,可以极大的提高代码的重用,而且方面之后的升级和修改。本节课就来讲解如何将现有的主题文件进行分割。

到现在,我们的示例主题 myTheme 已经有三个文件了,分别是:style.css、index.php 、functions.php 三个文件,其中 index.php 文件,就是整个主题的核心文件,下面我们就要对它进行分块,将其分成 头部、主体、边栏和底部 几块。

分出头部区域

头部区域通常包含 HTML 中的 head 区域,以及博客顶部很少变化的区域(例如:logo、标题、描述)。就本示例主题中,head 区域的内容以及 div 中 id 为 header 的区域,都可以划分到头部区域中。所以,我们把它剪切出来,再在目录下面,新建一个文本文档,复制进去。保存为 utf-8 编码的文件,命名为 header.php 。保存为统一的 utf-8 编码,有助于减少网页中的乱码现象,详情可以看一下本人的这篇文章:网页编码就是那点事

之后,在 index.php 文件中的头部原来代码位置中,添加一个句代码

<?php get_header(); ?>

这句代码不需要什么参数,就直接复制上去就可以,从名字上看就可以理解,这个函数的功能是引用主题下面的 header.php 文件,包含进来。

分出主体区域

主题就是当前页面的主要区域,所以这一部分,不用像上面那样,剪切出去,然后使用函数引用进来。确定好主主体区域之后,只需要在当前文件(index.php)中,保留这部分。

主体区域,即用于表示当前页面的主要功能。例如:index.php 文件,首页文件通常包含一个文章列表,那么这个文章列表就是这个页面的主体区域;single.php 文件是用于显示具体文章内容的,所以调用文章内容以及相关信息就变成了它的主体区域。

分出边栏区域

在示例主题 myTheme 中,边栏区域就是 div 元素中 id 为 sidebar 的内容区域。和分离头部区域一样,我们只需要剪切下来,然后复制到 sidebar.php 文件中(需要自己新建且保存为 utf-8 编码)。然后使用下面函数引用

<?php get_sidebar(); ?>

边栏是主体的描述,通常包括一些文章分类、友情链接等等内容。它通常也是高度可重用的模块,可以再几乎所有的网页中调用相同的内容。所以这部分要拿出来。

分出底部区域

通过上面的介绍,分离底部区域还需要过多的介绍吗?剪切出来代码之后,只需要在原位置添加下面代码进行调用即可

<?php get_footer(); ?>

如果不分割

我就是不明白为什么要分割这个文件,分割成不同的区域,我可以不分吗?当然可以,但是你会遇到下面问题。

你在 index.php 文件中,修改头部文件的内容,在访问文章内容页面(使用 single.php 文件作为模板),却发现头部的内容没有变化,因为你没有在 single.php 文件中,修改相应的头部信息代码。如果你修改一处,需要把主题中所有模板文件全部修改一遍才会生效。

由于没有统一文件,你可能会根据不同的页面,对 HTML 结构进行修改或者编辑,这样会导致网站整体风格的不一致和一些意外错误。

而分割之后,上面的这些问题都将不存在。分割的优势在于提高维护的效率等,所以需要进行分割处理。

本节课相关资源下载

myTheme(基础篇-10) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer

【基础篇】9,制作底部区域 footer

底部区域的制作非常简单、灵活。通常博客的底部,添加一个作者的版权声明信息等,以及页面列表等内容。

简单是因为没有什么注意事项,直接添加上内容即可。灵活是因为你可以根据你的需要等,随意的添加内容、函数调用等。

至于复杂的相关函数调用等,我会在以后的文章中讲解,但是本系列教程中的实例主题 myTheme 中,底部写的非常精简,就是一句话而已,所以实现起来就很容易了,直接保持现有的状态即可!

本系列文章

  1. 开始执行的wordpress主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress的主题机制
  4. 【基础篇】3、设计制作你的HTML主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
     

【基础篇】8,添加博客边栏功能

通常的博客都有边栏功能,边栏通常放置文章分类、友情链接等等信息。本节课讲解如何添加博客的边栏相关功能。在 WordPress 系统中,不得不提到的一个强大的功能,那就是 “小工具” ,即在后台中,找到 “外观” 选项下面的 “小工具”。当一款主题支持小工具的时候,我们只需要配置一下小工具,把需要的模块拖动进去,就可以在博客中显示出来。

对于初学者来说,本文暂时不讲解复杂的边栏相关的函数使用,而是直接介绍如何为主题添加“小工具”这个功能的支持。这样就可以实现快速定义博客的边栏。

为主题添加小工具功能,需要两个步骤:1,在 functions.php 文件中声明注册这个功能。2,在主题模板的相应位置,添加对边栏的调用

在 functions.php 文件中声明这个功能

需要用到 register_sidebar 这个函数。这个函数用于注册一个边栏小工具,当然还有一个函数 register_sidebars 与之类似,但是可以注册多个边栏小工具。但是如果你想在主题中,加入多个边栏小工具,我更推荐的是 register_sidebar 函数,因为它可以自己定义更多的输出信息,注册多个,只需要复制几遍即可,更加灵活。

下面介绍一下这个函数的相关参数:

'name'          => __( 'Sidebar name', 'theme_text_domain' ),
'id'            => 'unique-sidebar-id',
'description'   => '',
'class'         => '',
'before_widget' => '<li id="%1$s">',
'after_widget'  => '</li>',
'before_title'  => '<h2>',
'after_title'   => '</h2>' );
  • name:设置这个边栏的名称,在之后的主题中的数据调用中,会用到这个名称。
  • id :用于在 WordPress 内部对这个特定的边栏小工具进行标记,必须是唯一的值,同主题不能有两个相同的 id。
  • description:这个边栏小工具的描述,填写之后,在后台小工具选项配置的时候,可以看到当前工具的描述。
  • class:当前边栏小工具在生成的时候,在 HTML 结构中,加入的 class 属性,这样可以自定义接口,方便 CSS 对其样式的控制。
  • before_widget:在小工具生成的内容前面加上什么?默认加上 li 标签。
  • after_widget:同上。
  • before_title:在后台小工具设置中,添加小工具之后,可以设置小工具的标题,这个属性是为设置的标题包裹什么标签?默认 h2.
  • after_title:同上。
    这个函数还是比较简单的,参数也都容易理解。那么在主题中,想声明一个边栏,就可以编写下面代码:
    if ( function_exists(‘register_sidebar’) ){ //先判断当前 WordPress 是否支持边栏小工具功能
    register_sidebar(array( //以数组的方式,传递参数
    'name' =&gt; '小工具',
    'id' =&gt; 'sidebar1',
    'description' =&gt; '拖动小工具会在边栏显示出来',
    
    ));
    }

    你也可以编写更多的参数,例如制定元素包裹的标签等等,但是在这里,为了演示,其他属性均保持默认。

添加到 functions.php 文件之后,我们登录后台会发现小工具已经可以用了,并且显示出来了设置的信息。

这时,我们就可以把左边的内容拖动到右边去,即可显示出相应的功能。例如拖动“搜索”会生成一个搜索框,拖动“链接”会生成一个有情链接列表。但是刷新主题之后,并没有出现,因为这时候我们还没有在主题中调用这个边栏数据。

在主题中调用边栏数据

声明完成之后,我们找到主题,在相应的位置使用 下面一句代码即可调用某边栏数据:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('小工具') ) : ?><?php endif; ?>

这句代码的意思就是:首先检测是否存在边栏小工具功能,如果存在,检测是否有 “name” 为 “小工具” 的小工具。如果有(即在 functions.php 声明过了)就调用它的数据。即后面的单引号中的内容,就是在 functions.php 文件中声明的 sidebar 的 name 参数值。

在本系列教程的演示主题 myTheme 中,我们需要添加到 id 为 sidebar 的元素中,添加在下面。要注意的是,由于采用了默认的参数,所以每个小工具将会以 li 标签标记,为了符合 W3C 的标准,我们需要在外面加上 ul 标签。

在后台拖动小工具到边栏,配置一下,然后刷新首页就可以看到添加好的小工具内容了。这样,我们的边栏功能就实现了。

为主题添加多个小工具功能

再扩展的多说一些。小工具这个功能非常的使用,而且功能很多。我们可以在主题中添加多个小工具功能,这样修改主题的相关内容,直接在后台编辑小工具即可。例如:在底部添加小工具功能,想修改底部版权文字等,直接通过后台小工具进行编辑就可以了。

前面也说过,添加多个小工具可以使用 register_sidebars 但是我更推荐的是复制多遍 register_sidebar 这个函数,因为它可以对每个边栏都进行描述,让别人更容易看懂。

我们只需要把上面的代码,复制一遍:

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
    'name' => '小工具',
    'id' => 'sidebar1',
    'description' => '拖动小工具会在边栏显示出来',
));
   register_sidebar(array(
    'name' => '底部',
    'id' => 'footer',
    'description' => '这里是底部的小工具',
));
}

然后重新配置一下参数,特别要注意的是,name 和 id 一定不能和其他小工具相同,否则会产生数据调用冲突。之后像上面一样,在相应的位置,加上调用代码即可,当然要修改后面单引号里面的内容为要调用数据的 name 参数值。

本节课相关资源下载

myTheme(基础篇-8) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块