【基础篇】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 文件,包含进来。 [![](http://qxzm-img.b0.upaiyun.com/blog/2012/11/1566/header.png "分出头部区域")](http://qxzm-img.b0.upaiyun.com/blog/2012/11/1566/header.png) ## 分出主体区域 主题就是当前页面的主要区域,所以这一部分,不用像上面那样,剪切出去,然后使用函数引用进来。确定好主主体区域之后,只需要在当前文件(index.php)中,保留这部分。 主体区域,即用于表示当前页面的主要功能。例如:index.php 文件,首页文件通常包含一个文章列表,那么这个文章列表就是这个页面的主体区域;single.php 文件是用于显示具体文章内容的,所以调用文章内容以及相关信息就变成了它的主体区域。 ## 分出边栏区域 在示例主题 myTheme 中,边栏区域就是 div 元素中 id 为 sidebar 的内容区域。和分离头部区域一样,我们只需要剪切下来,然后复制到 sidebar.php 文件中(需要自己新建且保存为 utf-8 编码)。然后使用下面函数引用
<?php get_sidebar(); ?>
边栏是主体的描述,通常包括一些文章分类、友情链接等等内容。它通常也是高度可重用的模块,可以再几乎所有的网页中调用相同的内容。所以这部分要拿出来。 [![](http://qxzm-img.b0.upaiyun.com/blog/2012/11/1566/sidebar.png "分出边栏区域")](http://qxzm-img.b0.upaiyun.com/blog/2012/11/1566/sidebar.png) ## 分出底部区域 通过上面的介绍,分离底部区域还需要过多的介绍吗?剪切出来代码之后,只需要在原位置添加下面代码进行调用即可
<?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,添加博客边栏功能
     

学会在互联网的海量信息中学习

首先,不可否认的是互联网是个资料大宝库,这里面包含各种各样的资料。全面性、实时性是它的有点,零散性、不系统是它的缺点。本文就是介绍一下 潜行者m 在互联网上的学习方法和经验。

发现这些优良资料

资料超级多,正是因为如此多,所以查找起来优秀的资料,就比较麻烦了。最简单方便效果最差的,就是通过搜索引擎搜索了。它确实方便,因为只需要输入想了解的关键词,就会出来很多相关的资源。为什么说效果最差呢?有很多原因:首先限于搜索引擎的技术水平,偶然无法根据算法判断出资料的优劣(百度,你懂)。搜索结果会被”半人为控制”(通过SEO),而这些控制之后,显示的文章等,通常是一些伪原创的垃圾信息等等。此外找不到原创作者,很多知名的文章,或是被转载不署名或是直接改了版权,搜索引擎都无法判断出原创作者,这样就无法联系,进一步的交流。

使用搜索引擎检索资料,固然是一种必不可少的方式,但是我更推荐使用下面的方式来寻找学习资料。就是很多人常用的“订阅”功能。一个功能完全合理的信息类型的网站,通常都会提供一个 “订阅源”(rss),我们可以通过他们提供的这个订阅源,获取他们网站上的最新更新的文章,或者是之前的内容。现在的问题,就是如何发现这些优秀的内容提供者?首先,你要先确定一下,你关注的领域是什么?你想看到哪一方面的内容和资料?确定下来之后,就可以通过下面几种途径找到优秀的资源:

  • 使用名站导航或者搜索引擎等,找到这一领域比较权威比较热门的网站。
  • 通过名站的友情链接等,发掘其他同类型的网站。这一点很实用,对于一些比较著名的网站来说,他们的友情链接的质量非常的高,绝对是同领域的知名网站。
  • 找到他们网站的订阅源。通常功能完全的网站,会被软件、浏览器等自动检测到订阅源,站长通常也会提供自己网站的订阅源,这一点在独立博客中,尤为体现。
    下面是我推荐的订阅方式和阅读方式。使用的工具很简单,就是 火狐 浏览器 和 Feed Sidebar 插件 火狐浏览器本身就提供了订阅功能,当你打开一个可以用的订阅源的时候,会自动弹出添加订阅菜单。

但是火狐浏览器的这个订阅功能做的不是特别好,如果你想查看订阅的最新信息,你需要打开订阅文件夹,然后打开相应的订阅源才能看到。所以,我推荐使用 Feed Sidebar 这个插件,因为它监控订阅的订阅源,可以设置提醒,当有新消息的时候会立刻提醒。而且还会列出一个更新列表,方便你打开相应的资料。更多的使用方法等,需要你安装一下自己探索,这里不再赘述。

使用本地客户端,其实是一种比较古老的订阅方法,很久以前就出现了一些在线订阅服务。例如:google reader、鲜果订阅等。使用这些在线订阅服务,可以不需要安装软件等,也便于同网友交流等,此外它们通常对订阅源的内容,进行重新排版布局便于阅读。但是我选择使用这种比较古老的方法,是因为:不需要登录等,也比较方便的保护了自己的订阅隐私,不受网速的影响不必登录第三方网站,此外还有一个最重要的原因,我主要关注的是前端、设计方面的内容,通常需要打开他们的页面查看他们的布局设计等。所以我选择很原始的,直接打开网页的方式阅读。

收藏有价值的资料

仅仅发现资料、阅读完资料是不够的。对于优秀的资料,我们还需要收藏整理起来,方便日后的阅读和观看。那么什么资料算是有价值的,可收藏的资料呢?

  • 看完之后,会有一定的感触,认为以后还会想看的资料。
  • 很有收藏价值的资料(例如一些手册之类的)。
  • 现在看不懂,但以后可能会用到的。
    其他资料,如果自己已经知道的东西或者写的不太好,总结不完全的资料,就没有必要收藏了。此外,收藏之后,还需要合理的规划、分类,便于日后的查找。

这里,我推荐使用 有道笔记 来记录收藏资料,各种收藏文档的功能都具备,空间大的一般用不完,还具有日志分享功能、多设备平台同步功能等。通过建立不同的笔记本,进行归类,通过搜索可以迅速查找到需要的文档。还有一个比较方便的功能,可以再浏览器的收藏夹栏里面,加上一个连接“收藏到有道笔记”,点击一下会获取当前页面的信息,然后自动保存到你的笔记本中。

【基础篇】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’ => ‘小工具’,
    ‘id’ => ‘sidebar1’,
    ‘description’ => ‘拖动小工具会在边栏显示出来’,
    ));
    }

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

添加到 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,制作博客的搜索模块

【基础篇】7,制作博客的搜索模块

搜索模块几乎成为了信息性网站的标配组件,对于博客来说,更是必不可少的东西。有了搜索就可以快速的定位你的文章。本节就来讲解如何制作博客的搜索模块。

制作搜索表单

搜索模块的实质就是一个表单而已,将搜索的内容,提交给 WordPress ,然后由系统查询返回结果。别告诉我你连一个 HTML 的表单都写不出来,如果真的,请先回去学习一下 HTML 吧,因为这是制作主题必备的基本能力。下面我直接给出一个搜索表单。

<form method="get" action="">
      <input type="text" name="s"  />
      <input type="submit" value="GO" />
</form>
上面就是一个非常简单的搜索表单,有一个 文本框 和一个 提交按钮。WordPress 系统的搜索模块,接受 get 方式发送的数据,同时要注意它的 action 地址,为博客的首页。同时要注意,对于搜索框,必须要对它设置 name 属性值为 s ,这样 WordPress 才能接收搜索字符串。所以,一个可用的 WordPress 搜索表单应该这样写:
<form method="get" action="<?php bloginfo('home'); ?>/">
        <input type="text" name="s"  />
        <input type="submit" value="GO" />
</form>

进一步的优化

单纯的一个表单是不太好的,我们可以加一些修饰,这种修饰包括交互性的修饰、外观的修饰。为了尽量简单照顾初学者,这里不讲外观的修饰,尽量不涉及 CSS 设计相关的内容。下面说一下搜索框的简单的交互性修饰。

通常,我们需要在打开页面的时候,自动将光标聚焦到 搜索框 中,这样可以让用户在敲击键盘的时候,可以自动的在输入框中输入,而不需要让用户手动找到搜索框。实现这个效果,需要为表单加上 autofocus 属性。

此外,我们通常希望能告诉用户,这是一个搜索框,最好的方法就是在搜索框中填写说明文字,当用户点击聚焦的时候,文字自动消失。实现这个效果,可以通过两种方法:1,HTML5 的 placeholder 属性。2,通过一段 JavaScript 代码。第一种方法很简单,直接把说明文本当做这个属性的属性值,即可显示出来。但是这是 HTML5 中新增的属性,所以在早期的浏览器中,不会被支持。那样的话就不会显示说明文字了。所以我更推荐的是下面的这段 JavaScript 代码:

onblur=”if (this.value ==’’) this.value=’搜索一下’” onfocus=”this.value=’’” onclick=”if (this.value==’搜索一下’) this.value=’’”

稍懂 JavaScript 的朋友就能看出来这段代码的意思,即:当光标激活或者点击文本框的时候,判断值是否为空,如果为空,就让值变成“搜索一下”。当焦点移出文本框的时候,会检测文本框的内容,如果为空,就自动变成“搜索一下”。如果你实在是看不懂,就不用管了,直接复制上去就可以了。

最终的版本

我们在 myTheme 主题中,找到边栏模块(id=“sidebar”),在下面新建一个用于搜索的 div 块,然后把代码复制上去:

<form method=”get” action=”<?php bloginfo(‘home’); ?>/“>
<input type=”text” name=”s” onblur=”if (this.value ==’’) this.value=’搜一下又不会怀孕…’” onfocus=”this.value=’’” onclick=”if (this.value==’搜一下又不会怀孕…’) this.value=’’” autofocus />
<input type=”submit” value=”GO” />
</form>

这样就完成了一个简单的、没有样式的博客搜索模块了。

完成之后,现在就可以搜索一下看一下效果了哦!

本节课相关资源下载

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

本系列文章

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

网页中代码的顺序是不可忽略的细节

仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候,经常遇到一些很特别的问题。例如:刚刚添加的样式不起作用、jQuery的代码老是不起作用等等。这往往是不关注细节导致的。而今天我要谈的这个细节,就是关于网页中代码的顺序。没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况。

HTML 相关的代码顺序

下面先来介绍 HTML 中的代码顺序。

HTML 代码的排序原理

排序原理很简单,因为当浏览器访问一个网页的时候,要下载这个网页。现在的网速,对于一个几百K的网页来说,很快就能下载完。但是如果网页比较大或者网速比较卡,网页下载就会需要一定的时间。这样的话,浏览器显示网页的过程就很明显了。从 HTML 代码的上到下,依次下载。重要的内容要优先加载,所以就产生了 HTML 代码排序的问题。

head 里面的元素排序

HTML 中的 head 元素里面,通常放置着文档的描述信息。一般有:网页编码、title标题、meta 描述网页关键字、link 引入 CSS 文件、script 引入 Javascript 文件等等。下面就这几个内容进行一个讨论(以 HTML5 为例):

首先,先是标准的 DOCTYPE 声明、HTML 结构那一套。

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
其次,编写网页编码,我个人认为编码是网页中最重要的,因为它决定浏览器采用什么编码来解析你的网页,如果编码没有设置好的话,网页显示出来就是一整个乱码。关于网页编码的更详细的文章,可以看一下 [潜行者m](http://www.qianxingzhem.com) 写的 [网页编码就是那点事](http://www.qianxingzhem.com/post-1499.html) 。编码写完之后,应该让浏览器立刻显示出网页的标题,这时候就应该写出 title 标题了。
<meta charset="utf-8" />
<title>标题</title>
接下来,就应该是声明文档的各种信息,例如 关键词、描述、作者等等信息。之后就要加载 CSS 样式表。让浏览器先下载好 CSS 样式表,之后下载的网页内容,就会立刻加上 CSS 的样式效果,谁也不希望打开网页的时候,是没有样式的,然后加载完内容之后才出现正常的页面。这也就是为什么 CSS 引用要写在 head 里面。
<meta name="keywords" content="潜行者m,网站建设,前端设计,Web开发" />
<meta name="description" content="潜行者m 博客,是由 潜行者m 个人设计制作,完全原创写作,关注网站建设/前端设计/Web开发相关的独立博客。欢迎各位观看学习,并且与本人交流!!" />

<link rel="stylesheet" type="text/css" media="screen" href="http://www.qianxingzhem.com/wp-content/themes/qetro/style.css"/>
关于 JavaScript 的位置一直比较有争议。因为 JavaScript 比较灵活,可以添加在页面的任何位置。通常推荐的是加在页面的最底部。因为JavaScript 文件通常比较大,浏览器下载比较费时间,由于 JavaScript 可能会影响到当前页面的结构内容,所以浏览器通常会先下载完JavaScript 代码,“运行” 之后,再下载网页的正文内容。这就导致了加载速度比较慢,因为要先加载 JavaScript 代码才会显示网页内容。所以要放在页面底部。这样浏览器会先下载网页的内容显示出来,然后再下载 JavaScript 对当前的网页进行处理。 ### body 主体内容的排序 前面说过浏览器先依次下载网页然后显示,那么网页主体内容的排版布局就很明显了:**重要的内容排在前面**。 例如一个博客类型的网页,最重要的内容肯定是 文章 。所以文章的内容要尽量放在网页的顶部。虽然它可能要显示在下面,但是也要放在代码的上面,然后通过 CSS 布局等放在下面。当网速很卡的时候,排版合理的博客很明显就可以看到,先显示出来头部、文章主体内容,之后再显示 边栏、底部 内容。这就是为了让用户最快的看到他们想要看的内容,即使网速很卡下载很慢,内容出来了边栏等都下载不下来,用户也会得到他需要的内容。这就是 body 元素里面的代码排序原则。 ## CSS 代码的排序 CSS中有很多排序的小细节需要注意,不注意的话很有可能就出现一些意外情况。 ### 顺序解决样式冲突问题 当你对一个元素赋予了 background-color 属性,你在其他地方,忘了之前的设置,又对这个元素赋予了一个属性值与之前不同的 background-color 属性。那么浏览器究竟会对这个元素渲染哪一个背景颜色呢?答案是代码排在后面的属性值。冲突的内容,后面的属性值就会覆盖前面的属性值。因此要注意,一些 [CSS reset](http://www.qianxingzhem.com/post-610.html) 等要先加载,然后在后面加载自己写的属性值。例如:CSS reset 通常会取消 strong 的加粗,但有时我们的网页作品中,要 strong 显示成加粗效果,所以我们要设置 strong{font-weight:bold;} 这样的样式。但如果 CSS reset 代码放在后面,它之前对 strong 的取消加粗属性就会覆盖掉你的 加粗效果。所以无论刷新网页多少遍,你的 strong 标签里面的内容,还没有加粗。 如果有时候,你真的无法修改加载文件的顺序,那么面对这种情况,你可以使用 CSS 中的 !important 语法,告诉浏览器要使用这个属性解决冲突。 ### 链接的交互排序 一个超链接,默认是蓝色的,当我们把鼠标移动上去,会变色,点击的过程也会变色,访问过后回来一看,通常也不会是原来的蓝色了。控制这些颜色的,分别是 CSS 中的 :link 、:visited 、:hover、:active 这四个伪类选择器,从名称就可以看出,控制的状态分别是:默认显示、访问过后、鼠标移动上去、点击激活。有时候会出现一些意外情况,例如:同时设置了 :visited 和 :hover 的样式,但一旦超链接访问后,hover 的样式就不出现了等。这是因为,这四个伪类选择器对 a 元素定义的时候,是有一个顺序的。如果不按照这个顺序,就会出现一些意外情况。 这个顺序有一个很好记的方法,那就是:love hate,即 l(link)ov(visited)e h(hover )a(active)te。
a:link{color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#666666; text-decoration:underline;}
a:active{color:#666666; text-decoration:none;}

属性值的顺序

CSS 中,有的属性既可以分开写,也可以合并起来写。例如 margin 属性,你可以分别制定 margin-left 、margin-right、margin-top、margin-bottom 的值,也可以直接写成 margin:top right bottom left; 也可以写两个参数,分别代表上下和左右的外边距。这样的写法简练而且灵活,但是对不熟练的新手来说,比较容易搞混。当类似 margin 、 padding 这样的属性,写四个参数的时候,以 top 开始,顺时针旋转。

除此之外,还有类似 font、background 这样的属性,它的属性值也要有顺序(虽然对顺序要求不严格),它们的参数有缺省值,所以不需要全部定义,只需要定义自己需要的样式即可。但是 border 这样的属性,就必须严格的按照语法编写属性值的顺序。例如:border :1px solid #ccc;如果 1px solid #ccc 这三个值的顺序出问题了,那么浏览器就可能无法解读这段 CSS 的样式。

JavaScript 代码的顺序

JavaScript 文件加载顺序

jQuery 是一个比较常用的 JavaScript 库,通常我们还要配合它强大的插件使用。对于新手来说,经常会遇到没有产生相应效果的问题。就是说,代码没有检查出问题,但就是没有执行显示应有的效果。原因就出在加载顺序上面。你编写的 JavaScript 代码以及调用的 jQuery 插件,都需要基于 jQuery 库,所以应该在所有 JavaScript 代码之前,先引入 jQuery 库。浏览器先把库下载完了,才会识别后面的依赖这个库的代码实现相应的功能。同样的,激活使用某个插件的代码,也需要放在插件的后面才会有效。

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery/插件.js"></script>
<script type="text/javascript" src="自己编写的js/js.js"></script>

WordPress 自定义菜单功能介绍和使用详解

一个常规的网站,一般都会有一个网站导航。这里的导航,通常包含网站的栏目、特殊的页面等等。对于一个博客来说,有的时候也需要一个这样的导航。如果仅仅是调用 文章分类 或者 页面链接 作为导航的话,会比较难控制,无法自由的添加链接等。当然,成熟的 WordPress 系统已经为我们考虑到了这一点,添加了一个 “自定义菜单” 功能。使用这个功能,可以在 后台 -》 外观 -》 菜单 中编辑,当然最好前提是你使用的主题支持这一个功能。

自定义菜单功能介绍

当我们在后台打开 “菜单” 的时候,通常会看到类似这样的界面:

没有配置之前,是无法使用的。我们需要先输入一个 菜单名称 才能继续使用。这里的菜单名称,仅仅作为一个关联数据用的标记,所以可以随便起名。完成之后,左边的区域就可以配置使用了。

如果你的主题不支持 自定义菜单 功能,那么左边的 主题位置 面板会提示你,这个自定义菜单的选项将会在 边栏 中显示。如果主题支持 自定义菜单 功能,那么这个面板则会提示有支持几个自定义菜单、自定义菜单的名称(需要定义)是什么。

上面提示,有一个自定义菜单,并且名称为 topnav 。现在,我要制作这个 自定义菜单 的内容。在左边有三个面板:分类目录、自定义链接、页面。里面包含着你当前博客里面的相关数据。

我们只需要勾选相应的内容或者直接拖动到右边的刚刚设置的菜单面板中即可。

注意的是,可以通过拖动改变显示顺序,而且还可以修改显示的名称。所以说,这个功能非常的强大而且灵活。这样,一个导航链接就做好了。

下面来详细讲解如何在主题中,添加这个功能。也很简单,只需要在两个地方,添加两小段代码即可!

在主题中添加函数调用

首先,你需要在主题的 functions.php 文件中,声明一下存在这个功能。只需要添加下面一段代码即可:

if(functionexists(‘registernav_menus’)){
register_nav_menus( array(
‘header-menu’ =>
( ‘topnav’ )
) );
}

这段代码首先判断是否支持这个功能,然后注册一个 自定义菜单,并且我指定了一个参数,即这个自定义菜单的名称为 topnav。也就是上面在 主题位置 面板中看到的自定义菜单名称。下面引用官方的资料详细的介绍一下 register_nav_menus 这个函数。

实现这个功能有两个函数 register_nav_menuregister_nav_menus 顾名思义,第一个函数用于创建一个自定义菜单,第二个函数用于创建多个自定义菜单。所以通常使用第二个就好了。下面也是根据第二个函数进行讲解。

介绍就不多说了,使用方法也很简单,只需要传递一个 数组 即可。

&lt;?php register_nav_menus( $locations ); ?&gt;

这个数组是必选参数,记录着 位置标记(键名) 和 位置描述(键值)。例如:

registernavmenus( array(
‘header-menu’ => ( ‘topnav’ ),
‘footer_menu’ => ‘My Custom Footer Menu’
) );

上面的语句,定义了两个自定义菜单,它们的标记(可以随便起)分别为:header-menu、footer_menu。它们后面对应的描述,将会显示在后台的 主题位置 面板上,供你选择。在 ‘header-menu’ => ( ‘topnav’ ) 这句代码中,我加了() 这个函数,它是用于跨语言翻译用的,与这个功能无关。

之后,在主题中添加自定义菜单。在主题中合适的位置,添加下面的函数:

<?php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ )); ?>

这句代码使用了 wp_nav_menu 函数。这个函数也是传递一个数组作为参数,但是这个数字里面的键名比较多。下面根据官方文档的说明选择几个重要的做了一个简单的翻译:

<?php $defaults = array(
‘theme_location’ => ‘’,
‘menu’ => ‘’,
‘container’ => ‘div’,
‘container_class’ => ‘menu-{menu slug}-container’,
‘container_id’ => ‘’,
‘menu_class’ => ‘menu’,
‘menu_id’ => ‘’,
‘echo’ => true,
‘fallback_cb’ => ‘wp_page_menu’,
‘before’ => ‘’,
‘after’ => ‘’,
‘link_before’ => ‘’,
‘link_after’ => ‘’,
‘items_wrap’ => ‘<ul id=”%1$s”>%3$s</ul>’,
‘depth’ => 0,
‘walker’ => ‘’
); ?>

<?php wp_nav_menu( $defaults ); ?>

‘theme_location’ => 可选,值为之前在functions.php中 register_nav_menus 传递的数组参数中的键名,进行绑定。默认:无
‘container’ => 可选,决定是否要对生成的 自定义菜单(ul) 进行包裹,以及使用什么包裹。如果不需要,传递参数 false。默认:div
‘container_class’ => 可选,为上面包裹的容器添加 class 属性。下面的 container_id 功能类似。
‘before’ => 可选,在输出的列表中的 a 标签之前添加文本信息。after 功能类似。
‘link_before’ => 可选,在输出的列表中的链接文字前面加上文字(注意与上面的区别)。link_after 功能类似。
‘items_wrap’ => 可选,设置包裹自定义菜单的标签形式。默认:<ul id=”%1$s”>%3$s</ul>,通常不要修改 。
这样,刚刚我添加的那一句代码的意思很明确了,就是在这里调用名为 header-menu 的自定义菜单位置。而这个自定义菜单位置的名称为 topnav,在 WordPress 后台中,我新建了一个名为 “顶部导航” 的菜单,然后与这个 topnav 进行了关联。那么这句代码就调用了我设置的 “顶部导航” 菜单的内容。

我们不仅仅可以用它来做导航,还可以像上面那样,在多个位置添加多个自定义菜单。例如可以在底部加一个自定义菜单,这样在后台就可以设置底部的链接等等。功能非常强大,不过需要注意一点,WordPress 目前的较新版本 3.4.2 被爆出一个 BUG ,不支持 自定义菜单。当然很快就出了补丁。如果你使用 3.4.2 版本的时候,自定义菜单无法使用,可以自行搜索一下解决方法