【基础篇】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,通过当前的文件,生成主题其他必要文件

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

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

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

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

本系列文章

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

【基础篇】1、学习制作主题之前的准备

我学习主题制作的过程

最初学习 WordPress 主题制作的时候,需要一整套比较完整,比较全面的教程。经过搜索找到了由水煮鱼博客翻译的国外wordpress主题制作教程。第一遍看的时候,比较枯燥难懂,也是因为当时的 CSS、PHP 水平比较底下,导致没有耐心看下去。过了一段时间,决定彻底攻克下来,于是下定决心花了一天时间看完了。随后根据教程中讲解的,一遍实践下来,就了解的差不多了。过了几天,就按照自己的思路做出了自己第一个主题。

所以总结一下,学习主题制作教程需要两点

  1. 一点点 CSS、PHP、HTML 基础。没有基础比较吃力
  2. 找一套完整的教程,彻底学完,并且动手实践。
    水煮鱼博客的 WordPress 主题制作教程非常不错,很多人都是靠它入门的,但是也有一些缺点

  3. 老外写的,思想的差异,你懂的。

  4. 07年的,已经过时了,有些函数貌似被抛弃了。
  5. 翻译的,部分晦涩难懂,源代码的注释是英文。
    所以我打算根据自己这几个月来的主题制作得到的经验,重新补充升级一下。

搭建本地环境

在这里,我默认你的电脑系统为 Windows 系列,我们需要在本地搭建 PHP 环境。你可以选择一些整合的傻瓜安装包,但是如果你想多研究一下 PHP 的话,我还是建议分别安装 PHP、Apache、Mysql 然后配置一下。傻瓜化的安装步骤请移步本人这篇文章:本地搭建配置apache+php+mysql环境

搭建好本地系统之后,需要安装 WordPress ,这是废话,你懂的。

我有服务器,为什么还要自己本地安装?

  1. 在本地读取文件、加载速度快,不受网络限制。
  2. 直接修改文件刷新即可,不需要一遍遍的上传文件、覆盖、访问。
    当然,你不怕麻烦,也可以上传远程服务器。

文本编辑类工具

  • 记事本:小巧默认,但是编码、代码高亮功能不行,不推荐新手使用。
  • EmEditor:编码比较好,但是对代码段的处理不太好,而且是收费的,不过在中国免费,你懂。
  • NotePad++:推荐,本人目前就在用这个,无论从代码高亮、代码段等的处理,都比较好,免费开源。
  • Dreamweaver:推荐新手使用,可以帮你自动完成很多代码,不过有种受限的感觉。
    其他的开发环境,用也行,不过制作主题来说,有点大材小用。

浏览器类

  • Firefox & FireBug :推荐,做 Web 相关的东西,必不可少。
  • IEtest : 做IE兼容测试,如果你需要的话。
  • Chrome:做兼容测试。
  • Opera:做兼容测试。

制作主题的大体流程

  1. 思考并设计好你的主题样式。
  2. 制作出 HTML 页面,即大体的风格。
  3. 根据 WordPress 的主题机制等,进行改造。
    完成。

学习重点

  1. WordPress 的主题机制,以及相关技巧。

对于新手来说

你只需要准备一下两个东西就可以了

  1. Dreamweaver (推荐使用 8)
  2. xampp (一键搭建环境,搜索一下非常多)
  3. FireFox (浏览器,用来查看效果)

本人用到的工具

  1. NotePad++
  2. FireFox

之前的系列文章

  1. 开始执行的wordpress主题教程计划
     

 

开始执行的wordpress主题教程计划

在几个月前,我制作出属于自己的模板的时候,就开始打算编写一系列的wordpress主题教程。写过几篇教程,结果感觉系列文章的结构比较混乱,而且当时的技术并不是很成熟,最终只写了几篇文章,就决定停下来,等技术比较成熟之后,再写。

目前来说,技术要比几个月之前成熟了很多,看到wordpress论坛对这个教程的需求比较大,准备在这段时间内,完成这个系列的文章的写作。目前已经列出了如下的大纲:

基础篇

基础知识,初步了解wordpress主题的机制,学会使用函数调用数据

学习制作主题之前的准备(各种工具 开发环境 编写工具)
 wordpress的主题机制 > (函数机制 文件替换机制 头边栏底部分离调用机制 )
 制作主题的大体流程 > (先index.php 做出整体效果,然后分解成其他页面添加函数)
 制作头部header > (如果添加js css链接,以及相关函数,wordpress常用的文件头等)
 使用主循环制作日志列表和日志信息 > (主循环的原理,以及使用相关调用数据的函数)
 编写搜索模块的代码 > (标准的引入搜索框等)
 制作边栏sidebar > (添加weight 具体模块留到中级篇)
 制作底部footer  > (添加版权信息等等)
 制作文章显示页面  >(在文章显示页面调用文章信息的函数 文章版权显示)
 制作文章底部评论模块  >(如何去制作文章底部评论模块)
 由现有文件生成其他文件  >(生成其他文件page.php等)

中级篇

在基础篇的基础之上,讲解wordpress正规主题的制作方法,已经需要注意的地方,常见的博客元素 可以借鉴官方文档

回顾制作主题的大体流程
 思考并确认你的设计方案(主色调 结构 功能 版面)
 制作一个符合标准的头部header (设计 等
 设计你的导航链接nav (添加自定义菜单等
 展示文章摘要及其信息 (调用特色图片
 显示文章列表页面页码信息(那个分页函数
 自己定义边栏的输出文章(各种边栏调用函数
 在主循环中输出文章相关信息
 对各种文章中用到的标签进行合理的排版
 添加自定义字段功能
 添加管理员菜单功能
 添加边栏工具条方便浏览者操作
 制作更加复杂高级的评论模块
 再由现有文件生成其他文件

高级篇

收集各个有关wordpress主题制作的高级技术文章,高级技巧等

各种wordpress使用技巧
各种wordpress功能添加技巧
各种可以使用的资源
各种小功能

平均每天一篇,大约写作1-2个月,到时候会制作成chm格式的电子书。希望大家关注和支持,让我坚持努力写出来。

wordpress模板开发0——前言

这几天自己设计编写了属于自己的wordpress模板 qxzm ,觉得wordpress模板开发确实不难,在这里总结一下,写出本系列文章。希望能帮助像我一样,想要设计制作wordpress模板,但是却无从下手的同学。

wordpress模板开发对于其他的网站程序来说,是比较简单的,只要从大的方面理解了如何进行模板开发,剩下的就非常简单了。通过wordpress的模板开发,你充分认识到模板的开发流程,开发设计其他网站源码的模板也变得很容易了。

第一步,设计你的模板

设计和制作模板,需要你有一定的html + css基础,如果想加入更多的功能等,还需要一定的javascript基础。第一步呢,就是先设计出你的模板是什么样子,然后使用html+css等布局设计出来你想要的网页。这样第一步就算是完成了。

第二步,添加数据调用

模板只是html页面而已,我们想要让它显示相应的博客文章等内容,必须添加数据调用。而wordpress的使用特定的函数进行数据调用,例如:bloginfo();函数就是用于调用显示博客相关信息的,我们只要在相应的地方,使用wordpress的函数来替换我们的html页面信息,就可以达到显示博客信息的效果。这个地方是学习的重点,也是模板制作的难点。同时,它也是非常简单的,因为函数的功能和用法都是固定的,在网上可以搜索到很多关于某个wordpress函数的功能介绍,我们只需要按照上面的介绍使用即可。例如本人就总结了一下qxzm这个模板所用到的所有的函数,我们只需要把相应的函数插入页面对应的地方即可。

第三步,分割页面文件

每个网站系统的模板系统都是不同的,所以它们也有不同的模板要求。比如discuz!论坛模板要求模板文件后缀都是.htm等等。而wordpress模板,要求分割文件以便重复利用。而且对于不同的页面,调用不同的模板,例如:日志页面使用single.php的内容、页面使用page.php的模板内容。这是一种非常高效的模板机制,也体现出了wordpress的功能强大。分割完成之后,你自己打造的wordpress模板就这样完成了。

在前言中,我只是简单介绍一下wordpress的模板制作大体流程,以让你有一个初步大体的了解。在今后的文章中,我还会一步一步仔细讲解的。