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

制作搜索表单

搜索模块的实质就是一个表单而已，将搜索的内容，提交给 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，使用主循环调用显示日志摘要等数据

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

自定义菜单功能介绍

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

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

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

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

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

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

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

在主题中添加函数调用

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

if(function_exists('register_nav_menus')){
    register_nav_menus( array(
        'header-menu' => __( 'topnav' )
    ) );
}

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

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

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

<?php register_nav_menus( $locations ); ?>

这个数组是必选参数，记录着 位置标记（键名） 和 位置描述（键值）。例如：

register_nav_menus( 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 版本的时候，自定义菜单无法使用，可以自行搜索一下解决方法。

在前面的教程中，我们已经做出来了一个简单的头部，包括 CSS 文件的引入、文档的声明、添加网站标题副标题等。今天的教程，将要讲解如何以列表的方式显示博客中的文章。

认识 WordPress 的 主循环

我们想要达到的目的和效果，就是在博客的首页中，显示出来博客中现有的文章的标题、摘要、文章相关信息。通过前面的学习，我们了解到了 Wordpress 的函数机制，即使用函数调用数据库中的各种信息。可想而知，对于文章的标题、摘要、相关信息等，肯定也是通过函数来调用的。

但是现在就出来了一个问题。这类的函数不同于其他的函数，例如调用网站标题的函数，它只会返回一个确定的值，那就是数据库中的博客标题。但是这些调用文章标题等信息的函数不同。因为每个博客的文章数据都有很多，如果我添加了一个调用文章主题的函数，那么系统会显示众多文章中的哪一篇文章的相关数据呢？

所以 WordPress 系统有一个主循环机制。主循环机制就是为了解决这个问题，我们把显示文章的 HTML 结构、调用相关内容的函数等，写进主循环中，执行后查看源文件会发现，写进主循环的内容，会被重复很多遍（具体显示多少，在后台进行配置），但是在原先调用函数的位置会把文章数据调用插入进去。

于是可以这样认识主循环：循环调用数据库中的每一篇文章，把定义在主循环的内容，复制一下，把当前循环到的文章的相应数据插入到调用函数中，完成这第一篇文章之后，就继续按照这个步骤循环下一篇文章。这样就形成了一个文章列表。

主循环的结构和用法

主循环的结构实际上就是一段简单的 PHP 判断和循环代码：

<?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
        主循环里面的循环内容以及各种数据调用函数
    <?php endwhile; ?>
<?php else: ?>
    文章调用出错的处理
<?php endif; ?>

上面的代码比较乱，因为保留了 PHP 的标签，现在我将它整理一下，仅仅保留 PHP 的语句：

if(have_posts()):
    while(have_posts()) : the_post();
        主循环里面的循环内容以及各种数据调用函数
    endwhile;
else:
    文章调用出错的处理
endif;

懂一点点编程基础的人，一看就可以看出来，这就是一个简单的 if 判断语句，里面有一个 while 循环语句，然后不断的循环调用文章数据。这里面有两个重要的函数：have_posts()、the_post()。

其实从名字中，就可以看出来，第一个函数是判断这个博客是否有符合调用条件的文章，使用 if 语句来判断，如果有符合条件的文章的时候，才会调用主循环来进行下一步的操作。如果没有的话，直接跳到后面进行错误处理。

在下面的 while 语句中，再次进行了测试，当有文章的时候，才进行循环。之后的 the_post() 函数，就是调用了当前循环到的文章数据，表示下面的代码，都会对这个当前循环到的文章数据，进行数据调用显示。

应用主循环输出文章的信息

上面介绍了主循环的原理和结构，下面就要应用到我们的主题 myTheme 中。在这个演示的主题中，要循环的结构有一个 class 属性 article，所以要在这里和它的父结构之间，插入这段主循环的起始代码。

在这个 class 为 article 的 div 元素的结尾，加上主循环的结束代码。

这样，就会把包裹在主循环中的数据重复显示。在之前设计主题的阶段，我添加了两个文章摘要，现在我已经把第一个使用主循环包裹起来了，所以第二个可以直接删掉了。下面我们要使用对应的数据调用函数，替换掉里面的演示数据。这里，我直接给出相应的函数，关于函数功能的解释，在后面说。

具体代码如下：

            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
                <div>
                    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                    <div><?php the_excerpt(); ?></div>
                    <div>作者 : <?php  the_author(); ?> 时间 : 20<?php the_time('y年m月d日') ?> 文章分类 : <?php the_category(', '); ?>
                     </div>
                </div>
                <?php endwhile; ?>
            <?php else: ?>
                <?php echo '系统没有找到相应的文章!!'; ?>
            <?php endif; ?>

将代码修改成这样之后，再打开我们的本地的 WordPress 就可以看到效果了：

如果在浏览器中随便输入几个参数，这样 WordPress 就无法查询到相应的文章。于是就出现错误信息。

上例中涉及的函数解析

the_permalink()

这个函数用来输出当前文章的 “固定链接”，输出的是链接地址。将其加入 a 中的 href 属性，即可创建跳转到本文内容的超链接。

the_title()

这个函数用来输出当前文章的 文章名称。可以配合上一个函数，做成超链接，点击打开相应文章。

the_excerpt()

这个函数用来输出当前文章的摘要信息。在 WordPress 后台编写文章的时候，是可以设置摘要内容的（你需要打开右上方的“显示选项”，启用摘要功能），它会显示当前文章的摘要。如果当前文章没有设置摘要，那么将会截取 前 55 个字符 作为摘要内容，并且在后面加上省略号。更加具体的用法，可以查看官方的文档。此外，这个函数可能会在某些版本中失效或者显示出全文，如果你遇到我说的这种情况，可以查看我之前写过的文章：解决 wp 首页无法显示摘要而显示全文的方法

the_author()

这个函数用来输出当前文章的作者名称。

the_category()

这个函数用来输出当前文章所在的分类目录。通常配合多个参数使用。在上面的代码中，添加了参数 ‘，’。功能是，当本文存在多个 分类目录 的时候，将使用 ‘，’ 来分割当前目录。如果想了解更多的参数，可以百度搜索，或者查看官方文档。

the_time()

这个函数用来输出当前文章的发布时间。在上例中，使用了参数 ‘y 年 m 月 d 日’ 表示输出的信息格式为：XX 年 XX 月 XX 日。

本节课相关资源下载

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

本系列文章

1. 开始执行的 wordpress 主题教程计划
2. 【基础篇】1、学习制作主题之前的准备
3. 【基础篇】2、WordPress 的主题机制
4. 【基础篇】3、设计制作你的 HTML 主题文件
5. 【基础篇】4、安装主题文件
6. 【基础篇】5、制作主题的头部区域

编码一直是让新手头疼的问题，特别是 GBK、GB2312、UTF-8 这三个比较常见的网页编码的区别，更是让许多新手晕头转向，怎么解释也解释不清楚。但是编码又是那么重要，特别在网页这一块。如果你打出来的不是乱码，而网页中出现了乱码，绝大部分原因就出在了编码上了。此外除了乱码之外，还会出现一些其他问题（例如：IE6 的 CSS 加载问题）等等。潜行者 m 写出本文的目的，就是要彻底解释清楚这个编码问题！如果你遇到了类似的问题，那就要仔细的看看这篇文章。

ANSI、GBK、GB2312、UTF-8、GB18030 和 UNICODE

这几个编码关键词是比较常见的，虽然我把我们放在了一起说，但并不意味这这几个东西是平级的关系。本部分的内容，引用自网络略有修改，不知原文出处，故无法署名。

很久很久以前，有一群人，他们决定用 8 个可以开合的晶体管来组合成不同的状态，以表示世界上的万物，他们把这称为”字节”。再后来，他们又做了一些可以处理这些字节的机器，机器开动了，可以用字节来组合出很多状态，状态开始变来变去，他们就把这机器称为”计算机”。

开始计算机只在美国用。八位的字节一共可以组合出 256(2 的 8 次方)种不同的状态。他们把其中的编号从 0 开始的 32 种状态分别规定了特殊的用途，一但终端、打印机遇上约定好的这些字节被传过来时，就要做一些约定的动作。遇上 00×10, 终端就换行，遇上 0×07, 终端就向人们嘟嘟叫，例好遇上 0x1b, 打印机就打印反白的字，或者终端就用彩色显示字母。他们看到这样很好，于是就把这些 0×20 以下的字节状态称为”控制码”。

他们又把所有的空格、标点符号、数字、大小写字母分别用连续的字节状态表示，一直编到了第 127 号，这样计算机就可以用不同字节来存储英语的文字 了。大家看到这样，都感觉很好，于是大家都把这个方案叫做 ANSI 的”Ascii”编码（American Standard Code for Information Interchange，美国信息互换标准代码）。当时世界上所有的计算机都用同样的ASCII方案来保存英文文字。

后来计算机发展越来越广泛，世界各国为了可以在计算机保存他们的文字，他们决定采用 127 号之后的空位来表示这些新的字母、符号，还加入了很多画表格时需要用下到的横线、竖线、交叉等形状，一直把序号编到了 最后一个状态 255。从 128 到 255 这一页的字符集被称”扩展字符集”。但是原有的编号方法，已经再也放不下更多的编码。

等中国人们得到计算机时，已经没有可以利用的字节状态来表示汉字，况且有 6000 多个常用汉字需要保存呢。于是国人就自主研发，把那些 127 号之后的奇异符号们直接取消掉。规定：一个小于 127 的字符的意义与原来相同，但两个大于 127 的字符连在一起时，就表示一个汉字，前面的一个字节（他称之为高字节）从 0xA1 用到 0xF7，后面一个字节（低字节）从 0xA1 到 0xFE，这样我们就可以组合出大约 7000 多个简体汉字了。在这些编码里，我们还把数学符号、罗马希腊的字母、日文的假名们都编进去了，连在 ASCII 里本来就有的数字、标点、字母都统统重新编了两个字节长的编码，这就是常说的”全角”字符，而原来在 127 号以下的那些就叫”半角”字符了。

中国人民看到这样很不错，于是就把这种汉字方案叫做 “GB2312″。GB2312 是对 ASCII 的中文扩展。

但是中国的汉字太多了，后来还是不够用，于是干脆不再要求低字节一定是 127 号之后的内码，只要第一个字节是大于 127 就固定表示这是一个汉字的开始，不管后面跟的是不是 扩展字符集里的内容。结果扩展之后的编码方案被称为 GBK 标准，GBK 包括了 GB2312 的所有内容，同时又增加了近 20000 个新的汉字（包括繁体字）和符号。后来少数民族也要用电脑了，于是我们再扩展，又加了几千个新的少数民族的字，GBK 扩成了 GB18030。从此之后，中华民族的文化就可以在计算机时代中传承了。

因为当时各个国家都像中国这样搞出一套自己的编码标准，结果互相之间谁也不懂谁的编码，谁也不支持别人的编码。当时的中国人想让电脑显示汉字，就必须装上一个”汉字系统”，专门用来处理汉字的显示、输入的问题，装错了字符系统，显示就会乱了套。这怎么办？就在这时，一个叫 ISO （国际标谁化组织）的国际组织决定着手解决这个问题。他们采用的方法很简单：废了所有的地区性编码方案，重新搞一个包括了地球上所有文化、所有字母和符号的编码！他们打算叫它”Universal Multiple-Octet Coded Character Set”，简称 UCS, 俗称 “UNICODE”。

UNICODE 开始制订时，计算机的存储器容量极大地发展了，空间再也不成为问题了。于是 ISO 就直接规定必须用两个字节，也就是 16 位来统一表示所有的字符，对于 ascii 里的那些”半角”字符，UNICODE 包持其原编码不变，只是将其长度由原来的 8 位扩展为 16 位，而其他文化和语言的字符则全部重新统一编码。由于”半角”英文符号只需要用到低 8 位，所以其高 8 位永远是 0，因此这种大气的方案在保存英文文本时会多浪费一倍的空间。

但是，UNICODE 在制订时没有考虑与任何一种现有的编码方案保持兼容，这使得 GBK 与 UNICODE 在汉字的内码编排上完全是不一样的，没有一种简单的算术方法可以把文本内容从 UNICODE 编码和另一种编码进行转换，这种转换必须通过查表来进行。UNICODE 是用两个字节来表示为一个字符，他总共可以组合出 65535 不同的字符，这大概已经可以覆盖世界上所有文化的符号。

UNICODE 来到时，一起到来的还有计算机网络的兴起，UNICODE 如何在网络上传输也是一个必须考虑的问题，于是面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF8 就是每次 8 个位传输数据，而 UTF16 就是每次 16 个位，只不过为了传输时的可靠性，从 UNICODE 到 UTF 时并不是直接的对应，而是要过一些算法和规则来转换。

看完这些，相信你对于这几个编码关系等，了解的比较清楚了吧。我再来简单的总结一下：

• 中国人民通过对 ASCII 编码的中文扩充改造，产生了 GB2312 编码，可以表示 6000 多个常用汉字。
• 汉字实在是太多了，包括繁体和各种字符，于是产生了 GBK 编码，它包括了 GB2312 中的编码，同时扩充了很多。
• 中国是个多民族国家，各个民族几乎都有自己独立的语言系统，为了表示那些字符，继续把 GBK 编码扩充为 GB18030 编码。
• 每个国家都像中国一样，把自己的语言编码，于是出现了各种各样的编码，如果你不安装相应的编码，就无法解释相应编码想表达的内容。
• 终于，有个叫 ISO 的组织看不下去了。他们一起创造了一种编码 UNICODE ，这种编码非常大，大到可以容纳世界上任何一个文字和标志。所以只要电脑上有 UNICODE 这种编码系统，无论是全球哪种文字，只需要保存文件的时候，保存成 UNICODE 编码就可以被其他电脑正常解释。
• UNICODE 在网络传输中，出现了两个标准 UTF-8 和 UTF-16，分别每次传输 8 个位和 16 个位。
  于是就会有人产生疑问，UTF-8 既然能保存那么多文字、符号，为什么国内还有这么多使用 GBK 等编码的人？因为 UTF-8 等编码体积比较大，占电脑空间比较多，如果面向的使用人群绝大部分都是中国人，用 GBK 等编码也可以。但是目前的电脑来看，硬盘都是白菜价，电脑性能也已经足够无视这点性能的消耗了。所以推荐所有的网页使用统一编码：UTF-8。

关于记事本无法单独保存“联通”的问题

当你新建一个 文本文档 之后，在里面输入 “联通” 两个字，然后保存。当你再次打开的时候，原来输入的 “联通” 会变成两个乱码。

这个问题就是因为 GB2312 编码与 UTF8 编码产生了编码冲撞造成的。从网上引来一段从 UNICODE 到 UTF8 的转换规则：

UTF-8

0000 – 007F

0xxxxxxx

0080 – 07FF

110xxxxx 10xxxxxx

0800 – FFFF

1110xxxx 10xxxxxx 10xxxxxx
例如”汉”字的 Unicode 编码是 6C49。6C49 在 0800-FFFF 之间，所以要用 3 字节模板：1110xxxx 10xxxxxx 10xxxxxx。将 6C49 写成二进制是：0110 1100 0100 1001，将这个比特流按三字节模板的分段方法分为 0110 110001 001001，依次代替模板中的 x，得到：1110-0110 10-110001 10-001001，即 E6 B1 89，这就是其 UTF8 的编码。

而当你新建一个文本文件时，记事本的编码默认是 ANSI, 如果你在 ANSI 的编码输入汉字，那么他实际就是 GB 系列的编码方式，在这种编码下，”联通”的内码是：

c1 1100 0001

aa 1010 1010

cd 1100 1101

a8 1010 1000

注意到了吗？第一二个字节、第三四个字节的起始部分的都是”110″和”10″，正好与 UTF8 规则里的两字节模板是一致的，于是再次打开记事本 时，记事本就误认为这是一个 UTF8 编码的文件，让我们把第一个字节的 110 和第二个字节的 10 去掉，我们就得到了”00001 101010″，再把各位对齐，补上前导的 0，就得到了”0000 0000 0110 1010″，不好意思，这是 UNICODE 的 006A，也就是小写的字母”j”，而之后的两字节用 UTF8 解码之后是 0368，这个字符什么也不是。这就 是只有”联通”两个字的文件没有办法在记事本里正常显示的原因。

由这个问题，可以发散出很多问题。比较常见的一个问题就是：我已经把文件保存成了 XX 编码，为什么每次打开，还是原来的 YY 编码？！原因就在于此，你虽然保存成了 XX 编码，但是系统识别的时候，却误识别为了 YY 编码，所以还是显示为 YY 编码。为了避免这个问题，微软公司弄出了一个叫 BOM 头的东西。

关于文件 BOM 头的问题

当使用类似 WINDOWS 自带的记事本等软件，在保存一个以 UTF-8 编码的文件时，会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即 BOM）。它是一串隐藏的字符，用于让记事本等编辑器识别这个文件是否以 UTF-8 编码。这样就可以避免这个问题了。对于一般的文件，这样并不会产生什么麻烦。

这样做，也https://qxzm-cdn.sapi.work、包含或者引用这些文件时，会把BOM作为该文件开头正文 的一部分。根据嵌入式语言的特点，这https://qxzm-cdn.sapi.workpadding 设置为 0，也无法让整个网页紧贴浏览器顶部，因为在 html 一开头有这 3 个字符。如果你在网页中，发现了由未知的空白等，很有可能就是由于文件有 BOM 头造成的。遇到这种问题，把文件保存的时候，不要带有 BOM 头！

如何查看和修改某文档的编码

1，直接使用记事本查看和修改。我们可以用记事本打开文件，然后点击左上角的 “文件” =》“另存为”，这时候就会弹出一个保存的窗口。在下面选择好编码之后，点击保存就可以了。

但是这种方https://qxzm-cdn.sapi.work使用下面的方法。https://qxzm-cdn.sapi.work

2，使用其他文本编辑器（例如：notepad ++）来查看修改。几乎所有的成熟的文本编辑器（例如：Dreamweaver、Emeditor 等），都可以快速查看或修改文件编码。这一点尤其体现在 notepad++ 上面。

打开一个文https://qxzm-cdn.sapi.workhttps://qxzm-cdn.sapi.work

点击上面菜单栏中的 “encoding” 即可把当前文档转换成其他编码

IE6 的加载 CSS 文件 BUG

当 HTML 文件的编码 与想要加载 CSS 的文件不一致的时候，IE6 将无法读取 CSS 文件，即 HTML 文件没有样式。就本人的观察，这个问题从未在其他浏览器中出现过，只在 IE6 中出现过。只需要把 CSS 文件，保存成 HTML 文件的编码即可。

最近终于算是忙完了大部分工作了，同时也有更多的时间来写写文章，或者做点其他的事情了。现在吃喝不愁，没有多少繁忙的事情，可以学学东西，做点东西，写点文章等等。同时，博客要提高文章质量，更新速度大约在两到三天左右。

SAE 是什么

在迁移 SAE 之前，有必要先简单的了解一下 SAE 是什么。SAE 的全称是 Sina App Engine，翻译过来就是 新浪应用平台。这个平台提供了一些方便开发的组件、优质高速的硬件等，方便开发者进行应用的开发。狭义的讲，就是一个网站空间，可以把网站放上去，但是和普通的虚拟主机、VPS 等又有很多不同的地方。在后面你会了解到。它的地址：http://sae.sina.com.cn

为什么要迁移 SAE

之所以迁移到 SAE 上，是因为 SAE 有以下几个优点。

1. 硬件质量高，网站访问速度快。
2. 专业，不用怕数据丢失或者服务商跑路。
3. 按照你使用的资源进行收费，收费合理，性价比高。
   最看重的是 SAE 平台的稳定、高速和性价比，与原来的美国空间、香港空间相比，低价高质量。

开通 SAE

开通 SAE 只需要打开 SAE ，然后点击右上方的注册即可，它使用新浪微博作为账号。其中还要区分几个概念，包括安全邮箱、安全密码等等。此外，SAE 平台使用 SVN 的方式上传文件，它的使用要比传统的 FTP 上传方便简单，但是需要学习和适应，这点官方文档写的非常详细。你需要花费一点时间，查看一下他们的帮助文档，这些很简单，也不是本文要说的重点。帮助文档：http://sae.sina.com.cn/?m=devcenter

迁移 WordPress

本文的重点不是 SAE 的注册和开通，而是在于如何合理正确高效的把 WordPress 博客，从之前的主机中迁移到 SAE 中。

安装 WordPress 应用

SAE 之所以高速、稳定，是因为它限制了部分功能。例如：出于完全考虑，SAE 禁止了 I/O 读写操作，这样，就无法使用传统的函数，进行生成或者读取操作等。

所以，官方原版的 WordPress 是不能直接安装上去的，因为里面的一些功能（例如：在线安装主题）是 SAE 平台所不支持的。但是 WordPress 这么流行的系统，当然有团队修改里面的代码，把不支持的功能，进行改写做成了 WordPress for SAE 版本，同时还上架到 应用仓库 中，这样只需要点几下鼠标，就可以在你的应用空间中，安装上 WordPress 。

1，创建一个应用。登陆之后，在 我的应用 页面中，找到右上方的 “安装应用” 。会出现如下的配置窗口。SAE 的应用安装，基于安装包（zip 格式）安装，可以直接填写网上的安装包，也可以本地上传。

2，在 应用仓库 中，找到 WordPress for SAE 的安装包地址，可以把地址填写到上面的 安装应用 表单中。其实，也可以点击右上方的 “安装应用”，直接进行安装。

3，输入一个 二级域名 和 验证码 之后，点击创建，就会告诉你已经创建成功了。现在你就可以管理这个应用了。根据提示，进行应用的初始化，就是安装 WordPress 时配置安装信息。

配置完成之后，系统会提示你安装完成。WordPress 系统就算安装完成了。你可以进入后台看一下相关配置，这个版本的 WordPress 是比较老的 ，截止到本文写作时，版本为 3.2.1。所以在安装插件的时候，需要注意插件是否支持这个版本。其中内置了几个比较常用的插件以及三个主题。下面就要进行博客数据的迁移。

转移文章等数据

文章等数据的迁移是整个迁移工作中，最简单的一个步骤。很多文章写道需要把数据库里的数据导入等等，其实不用这么麻烦，使用 WordPress 内置的工具（导入、导出）即可完成。

1. 首先在原先的博客中，点击 “工具” -》 “导出” ，选择 “全部内容” ，点击导出。会弹出一个 xml 文件的下载。这个文件就记录了你博客上面的文章、评论、页面等等数据。
2. 在 SAE 的博客上面，点击 “工具” -》 “导入” ，选择列表中的 “WordPress”。然后上传这个 xml 文件，将作者名等修改一下即可。注意，不要勾选 “下载远程附件” 这个项目，因为 SAE 不支持 读写操作，所以选择这个会报错。
   这个时候，文章等数据迁移完毕，打开应用首页，你已经可以看到你的文章数据了。

配置后台网站信息与之前网站完全一致

采用上面这种方法，只能迁移文章、页面、评论等数据，而无法迁移原有 WordPress 的后台设置。所以我们要打开 SAE 上的 WordPress 后台中的 “设置” 标签，把下面的内容依次重新设置一下，把它们设置的和原先博客中设置的一样。

对于图片/网站附件的处理

数据迁移通常分为两种：内容迁移和资源迁移。内容迁移很简单，上面已经完成。令人头痛的是资源迁移，即 图片资源、附件资源等。潜行者 m 搜寻了很多资料来解决这个资源迁移的问题。

1，直接使用 SVN 的方式，上传到原有博客的 upload 目录中。

这是最简单的一种方式，但是有很多问题。首先，SAE 的应用代码空间，只有 100M 大小。上面通常存放代码、基础的图片等资源，不适合存储附件等。潜行者 m 博客光图片资源以及超过 100M 大小，肯定无法使用 SVN 的方式上传到 代码空间。但是对于图片附件比较少的博客来说，可以直接使用这种方法。

2，使用 SAE 的 Storage 服务

Storage 服务，是 SAE 为应用提供的专门用于存储文件的空间。容量大，下载速度快。当你使用 WordPress for SAE 写文章上传附件的时候，会自动上传到这个空间中，然后进行调用。这就相当于外链的空间了。

所以我们首先要把 资源文件 上传到这个应用的 Storage 空间中，然后修改文章中对于资源的引用，把外链修改上。上传有两种方法：

第一种手动创建目录，然后依次上传。打开应用页面，在左下方找到 “Storage”，打开之后，点击 “管理” ，然后就可以创建目录、上传文件等操作。然后，将原来文章中的资源外链修改一下，Storage 空间的外链通常为 XXX-wordpress.stor.sinaapp.com 加上目录。其中 XXX 为你的应用名称。

第二种是使用工具上传。如果附件很多，上传的工作量可想而知。所以有人就写出了上传的程序。经过搜索，找到了一个工具 SAE Mutiple Uploads 0.2 。具体的介绍和使用说明，打开他们的官方教程好了，上面说的很详细了。但是我在操作的时候，不知道为什么，没有成功。工具显示上传成功，但是我在 Storage 空间中，并没有发现我上传的资源。提供一个思路，你可以尝试一下，说不定是我的人品问题。

补充(2012.10.22)：信仰飘扬 提醒，可以使用 Cyberduck 这个软件方便进行 storage 空间的管理。**
**

3，使用第三方外链服务(又拍云/华为网盘等)

只有在迁移的时候，才感觉出来外链的重要性，因为无论怎么迁移，外链是不会变的。因此，我考虑将所有资源放在外链上，然后以后就用外链链接资源。据了解，免费的网盘有部分支持图片外链，例如华为等。收费的比较好的有又拍云。最后我选择了又拍云，购买了又拍云的服务。

又拍云具体的操作流程我就不多说了，速度非常快。上传资源之后，在网上偶然发现了 荒野无灯 写的又拍云上传插件：Hacklog Remote Attachment Upyun(又拍云版)。果断激动了一下，因为这个插件，可以让你上传文件的时候，自动上传到远程的又拍云服务器上，同时还有一个非常重要的功能，可以修改数据库，将数据库里面的原有的失效资源连接，自动修正成又拍云的外链。

但是安装用了一下，还是出错，问了一下灯哥，原来是这个版本太低了，出现了这个错误。所以这个方法就留给以后的人看了，等 SAE 上的 WordPress for SAE 升级之后，就能用了。

如果想要批量修改原有失效的资源连接，可能只有像荒野无灯写的插件那样，对数据库进行修改。否则只能一篇文章一篇文章的进行修改。如果你有更好的办法，希望能回复交流！

补充（2012.10.21）：Denis 提供了一个解决这类问题的好方法，即使用插件 Search & Replace 批量对数据库里面的图片链接进行修改。

在 WordPress for SAE 中安装主题和插件

由于 SAE 禁止了读写操作，所以安装主题和插件，无法向以前那样，直接在后台进行上传或者远程安装。必须要通过 SVN 的方式上传。默认的安装了 WordPress for SAE 之后，并没有开启 SVN 服务，因为开启 SVN 服务，需要花费一些资源，所以要消耗一些云豆。我们在后台左侧找到 “代码管理” 然后点击 “创建 SVN 库” 就开启了 SVN 服务，之后根据 SAE 的说明文档使用即可。安装主题和插件，只需要把主题和插件复制到相应的目录，然后 SVN 上传一下即可，和使用 FTP 一样。但是要注意，主题和插件中的功能不能有 读写操作 等 SAE 不支持的功能，否则可能出现意外情况。

将域名解析到 SAE

现在文章等内容、图片等资源都已经迁移过来了。现在要检查一下迁移之后的网站和原先的网站还有什么地方不同。所有的地方都必须丝毫不差才可以。特别是 “固定链接” 等等，如果有不同，会导致收录等问题。

当你觉得完全相同，在迁移之后，就要把域名解析到 SAE 中。在管理后台找到左侧的 “应用管理” 打开之后，在下面会有独立域名设置。由于 SAE 比较特殊，所以它暂时不支持备案，如果你的域名是备案过的，那么需要填写备案表格，向 SAE 提交申请。如果你的域名没有备案，SAE 支持绑定到国外的合作伙伴那里，然后做一个跳转。比较简单，所以不再多说。

这两种方案区别很大，备案域名直接接入服务器，ping 值只有 50MS 左右，响应速度和 百度 差不多，下载速度也非常快。绑定到国外的未备案域名，通过香港节点访问，ping 值有 160 MS 左右，下载速度略慢，相当于高质量的香港空间，但是要消耗两倍的流量，也就是交两倍的钱。

转移之后的 SAE 优化

鉴于大部分的同学的网站都是没有备案的，但是要花两倍的钱，所以我们就要进行优化。优化的重点就是减少 SAE 流量的损耗。一般通过三个方法进行优化：

1. 开启 gzip。开启 SAE 的 gzip 教程，请看这里：开启 SAE 的 Gzip 压缩为 WordPress 提速
2. 压缩图片、CSS、JavaScript 等文件，尽量使用外链。
   完成这些步骤之后，可以尽量的避免系统资源的消耗，这样就可以节省云豆。同时，你还可以开发应用，进行开发者认证，这样每月都会送你一些云豆。如果你流量不大的话，这样几乎都成了免费的了。

上节课的时候，我们了解接触到了第一个函数。在这节课中，我将会讲解更多的有关头部的 WordPress 函数，并且教你打造一个完整、规范的头部。

这里的头部，主要分为两部分：

1. HTML 文档中的 <head> 区域
2. 主题中的顶部（通常包含博客名称、描述、导航等内容）

HTML 文档的 <head> 区域

众所周知，HTML 文档中，<head> 区域用来描述这个文档的各种信息，大部分的内容，都是看不见的，只有一个<title>元素，在标题栏上可以看见。但是并不是它不重要，这里 面包含文档声明，也是很重要的地方。与这块有关的，有很多函数等，在【基础篇】，我直说几个简单的，可以满足基本功能即可。在后面的【中级篇】教程中，我会更详细的讲解更多的函数和相关用法。

将以下代码复制进 head 标签内

<title><?php bloginfo('name');  ?> <?php  bloginfo( 'description' ); ?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

简单的介绍一下相关功能。

<title>标签：

作为网页的标题，我们通常使用博客标题和博客描述作为博客首页的标题。所以我们使用了<?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?>这两个函数。但是在实际应用中，你会发现一个问题，如果就这样做了，所有的博客页面，全部都是相同的“博客标题 博客描述”。关于这个问题，我会单独拿出来在后面进行讨论。

<meta>标签：

声明文档的编码，WordPress 默认的编码就是 utf-8 ，所以我们尽可以大胆写上 utf-8。但是在官方主题中，还是用了<?php bloginfo( ‘charset’ ); ?>这个函数，来获取博客编码。所以我们需要这样写。

<link>标签：

加载必须的 style.css 文件。<?php bloginfo( ‘stylesheet_url’ ); ?>这个函数在之前的文章中，提到过，在这里不再赘述。

主题中的顶部

在本系列的 demo 主题，顶部只有一个网站标题和网站的副标题描述。所以我们就需要使用<?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?>这两个函数，替换掉之前我们的文本，即

这里还有个细节需要注意，在博客名称的地方，我使用了一个超链接，指向的是一个“#”，现在要把它修改成博客首页，则需要使用这个

<?php bloginfo('siteurl'); ?>

用它替换 href 属性中的 # 。

好了，头部的处理就这样完成了，我们可以在浏览器中访问一下。这时候，就可以看到标题、网站标题、网站描述变了。你在后台中修改相应的信息，刷新之后，相应的也会变。

本节课相关资源下载

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

本系列文章

1. 开始执行的 wordpress 主题教程计划
2. 【基础篇】1、学习制作主题之前的准备
3. 【基础篇】2、WordPress 的主题机制
4. 【基础篇】3、设计制作你的 HTML 主题文件
5. 【基础篇】4、安装主题文件

首先，你必须的知道，什么叫做 AdminBar 。这是 WordPress 中的一个非常方便的功能，当管理员或者有管理权限的用户访问页面的时候，就会看到最上面有一个黑色的条条，上面有各种快捷链接。

不知道为什么，竟然还有很多人写如何去掉这个功能。但是很少有人写如何增加这个功能。

这个功能需要增加？对，没错。在早期我制作主题的时候，就出现了没有 AdminBar 的情况。要想在主题中，增加这个功能，必须要用到两个函数：

<?php wp_head(); ?>、<?php wp_footer(); ?>

这两个函数，是实现 WordPress 中某些功能而使用的。例如本文写的 AdminBar 的功能，就是使用这两个函数。新手制作主题的时候，往往会看到或者使用到 wp_head() 这个函数，但是会忽视 wp_footer() 这个函数。所以，AdminBar 不会显示，但是会空出那么高的高度。

这两个函数的位置也需要注意。

• wp_head() —— 通常放在</head>上面的一行
• wp_footer() —— 通常放在最下面的</body>的上面一行
  只有准确放置了这两个函数，AdminBar 才会出现。

注意：

忽略了一个地方，在现在的版本中，用户可以自定义在浏览博客的时候，是否显示最上面这个工具条。在 “用户”-》“我的个人资料” 中可以设置。在以前的版本中，记得好像没有这个选项。感谢 “鬼娃娃” 提醒。

有人说 WordPress 的 SEO 做的比较好，我想这个和 WordPress 可以方便的自定义文章的固定链接有分不开的联系。在众多的 WordPress 博客中，有很多种的固定连接，本文就是把这些固定链接的形式和效果跟大家分析一下，然后根据你自己的需求，选择适合你博客的固定连接。

默认固定链接样式

没有在后台的 “设置-》》固定链接” 中设置链接样式的话，就属于默认的固定连接样式，它的形式如下

http://www.qianxingzhem.com/?p=123

优点

1. 链接短小
2. 移植性好，当 WordPress 搬家时，新主机万一不支持 Rewrite 模块，你不需要进行301定向

缺点

1. 缺乏语义性，对搜索引擎收录稍稍有影响，但是不大

日期、月份和名称链接样式

这是官方默认的链接样式，分日期、月份和名称两种，形式如下

http://www.qianxingzhem.com/2012/09/11/sample-post/

http://www.qianxingzhem.com/2012/09/sample-post/

优点

1. 语义性增强，增加了文章发布时间和文章名称
2. 文章发布时间和文章名称在链接中，有利于搜索引擎理解

缺点

1. 生成的链接长度太长，不利于发送等
2. 文章标题直接显示在连接中，有的时候并不希望这样

名称型样式

直接加一个文章名称，形式如下

http://www.qianxingzhem.com/sample-post/

优点

1. 语义性强，文章名称在链接中，便于搜索引擎理解

缺点

1. 生成链接长度过长，中文链接会被编码，链接乱且长

关键词类型链接样式

将文章中的关键词提取出来，然后自定义固定连接，用“-”链接关键词，很多高手博客使用这种链接，样式如下

http://fairyfish.net/m/limit-login-attempts/

优点

1. 语义性强，便于搜索引擎理解
2. 生成链接长度合适

缺点

1. 需要博主有一定的英语水平和耐心
2. 对中文博客的效果不大，几乎没有中国人会搜索一个英文单词来看你的中文文章

数字型链接样式

直接把文章的ID写在链接中，样式如下

http://www.qianxingzhem.com/123

优点

1. 链接极短

缺点

1. 没有任何语义性

数字型语义增强版链接样式

不仅仅是文章 ID 还增加一些英文单词，例如：post、archives等，形式如下

http://www.qianxingzhem.com/archives/123

http://www.qianxingzhem.com/post-1268.html

优点

1. 链接较短
2. 增加了关键词，便于搜索引擎理解这个页面是一篇文章

缺点

1. 语义性不是非常明确
   目前，潜行者m博客用的就是这种 数字型语义增强版 固定链接样式。

如何自定义博客固定链接

了解结构标签

WordPress 设置了一系列的固定链接结构标签，来让你定义固定链接，具体标签及功能如下

• %year% 文章发表的年份，四位数，如 2004
• %monthnum% 月份，如 05
• %day% 天，如 28
• %hour% 小时，如 15
• %minute% 分钟，如 43
• %second% 秒，如 33
• %postname% 文章标题的别名 (编辑文章/页面时的别名栏)
• %post_id% 文章的唯一ID，如 423
• %category% 分类的别名 (新建/编辑分类时的别名栏)
• %tag% 标签的别名(新建/编辑标签时的别名栏)
• %author% 作者的别名
  之后，我们需要打开后台 “固定链接设置” 页面，找到 “自定义链接结构” 根据自己的需求，写上链接结构，加上结构标签。例如潜行者m博客用的链接样式

  http://www.qianxingzhem.com/post-1268.html

  在后台自定义链接结构时，需要定义成

  /post-%post_id%.html

其他注意事项

固定链接在 WordPress 博客中非常重要，强烈建议在建博初期就确定下来，而且之后不要再更换。如果你更换了固定链接，之前的固定链接打开之后，就会出现404错误，影响搜索引擎收录。

当然，如果你迫不得已更换博客的固定链接，请安装相应的 301链接重定向 插件，使用插件将之前的固定链接重定向到更新后的固定链接上。这类的插件比较多，这里我推荐几个：Simple 301 Redirects、Redirection等。

关于 WordPress 固定链接更详细的说明，请看官方文档 ：zh-cn:使用固定链接

在前面的几个教程中，我们已经设计出了主题的模板、样式，同时也添加了模拟数据，现在我们要做的就是把现有模板文件安装到 WordPress 中，这样有两个好处

1. 添加函数调用之后，刷新即可显示相应数据，方便对数据的规划。
2. 还有其他各种好处。
   到了这个步骤，你就会发现 远程调试 和 本地调试 的区别了。远程调试，需要不断的在远程服务器上修改文件，然后刷新速度还要看网速等；本地调试直接复制，然后使用文本编辑器直接打开编辑即可，刷新加载速度也非常快。所以推荐在本地进行调试。

安装主题

WordPress 主题安装相信大家都不陌生，我们只需要把上节课只做好的 “myTheme” 文件夹复制到 “wp-contentthemes” 文件目录下面，然后把 Html 文件后缀修改成 PHP 即 index.php，一个文件夹有了 index.php 和 style.css 这两个文件，才能被系统识别。之后我们登录后台，找到 “外观-》主题” 就可以看到我们的 “myTheme” 主题了。

你会发现你制作的这个主题显示和其他下载的主题显示的不同，标准主题中，需要在 style.css 文件中添加一些信息，同时还要生成缩略图。关于这一部分，将会在 【中级篇】 中进行讲解。

启用主题

点击启用之后，我们再访问我们博客的首页，就可以发现，已经显示出来我们之前的模拟数据了。但是完全没有 CSS 的样式效果。

原因很简单，我们之前的模板中，引用 style.css 文件的时候，直接用的相对目录

<link rel="stylesheet" type="text/css" href="style.css" />

href 属性直接指向了 style.css 文件，指向的是 主题 文件下面的 style.css 文件，当我们访问博客首页的时候，就无法加载到这个 style.css 文件了。

正确的做法是，使用 绝对链接 到你的 style.css 。这里，我们需要将原来模板中的 <link>标签的 href 属性改成 http://localhost/cms/wp/wp-content/themes/myTheme/style.css 。这里包含你的网址和 CSS 文件的绝对地址。这样就正常了，但是这样做有很多问题：

• 使用你的模板的时候，需要修改这个属性的值，把前面的网址改成你的博客网址。
• 修改模板名称的时候，我们同样需要修改这个属性的值。
• 以及其他麻烦。
  你懂这种代码，修改起来还比较容易，但是面对不懂的用户呢？你让他们如何修改？所以我们就需要想出解决方法。

如果说，我可以使用某种东西，然后它就自动得到当前网站的地址，加上当前主题的目录名，自动的生成这个地址，那么这些问题都会迎刃而解。

WordPress 的主题机制以及为我们准备好了这样的东西，那就是 WordPress 主题函数。WordPress 以及帮我们准备好了大量的函数，来调用这些数据。我们只需要插入主题文件中即可。

style.css 文件调用函数

我们只需要在原来模板的 href 属性中，将原来的 “style.css” 换成 “<?php bloginfo( ‘stylesheet_url’ ); ?>” 就可以了。

下面，潜行者 m 带着你简单分析一下这个函数

<?php bloginfo( 'stylesheet_url' ); ?>

首先，WordPress 是 PHP 开发的，所以执行函数的时候，都需要用 PHP 标签括起来，例如：

<?php ........ ?>

其次，这里面的函数名是 bloginfo(); 这是 WordPress 内置的函数，其功能就是调用各种博客相关数据的，这些数据通常在 “WordPress 后台 》 设置 》 常规” 里面进行设置。这个函数有很多参数，例如上面的那个参数 “stylesheet_url” ，就是调用了 style.css 的绝对地址。所以我们插入这个函数之后，WordPress 的主题机制会运行这些函数，将博客数据替换出来。

这是我们学习的第一个函数，我这里只是简单的讲解一下，在后面的教程中，我将会更加详细的对参数以及用法进行解析。如果你想超前学习，可以看一下本人之前的关于 bloginfo(); 函数的常用参数文章：wordpress 中 bloginfo()函数详解

添加修改之后，我们可以看到，页面已经恢复正常了

学习重点

经过这一个小事情之后，我们可以明确一下学习重点。那就是各种常用 WordPress 函数的参数以及使用方法，之后插入模板文件中，就可以显示 WordPress 的数据了，也就达到了制作主题的目的了。

本节课相关资源下载

myTheme 主题下载地址 : >>点击这里

之前的系列文章

1. 开始执行的 wordpress 主题教程计划
2. 【基础篇】1、学习制作主题之前的准备
3. 【基础篇】2、WordPress 的主题机制
4. 【基础篇】3、设计制作你的 HTML 主题文件

这已经好多天没有写文章了，最近我的 wlan 账号出了一点问题，所以这些天我没怎么上网。今天宿舍网线终于扯上了，又有网可以上了。

新学期的食堂饭菜又贵了，一般贵个五毛或者一块，没有涨价的，质量下降了。今天中午吃的面，4 块的，量只有去年 3 块 5 的，加的料子根本没有多少，去年直接加 1/4 多。坑爹啊，再也不在那吃了。没钱吃饭了，吃饭就吃穷了。无语。好了，牢骚发完了，看文章

================================================

制作主题之前，你必须使用 HTML 和 CSS 来制作出一个模板，确定博客主题的整体风格。这样，需要你有一定的 HTML 和 CSS 基础。

在这里，为了教程演示，潜行者 m 制作了一个比较简单的小模板，结构简单、CSS 样式也不多，方便新手学习，下面简单说一下模板的结构以及重要的 CSS 样式，仅供新手学习。如果你有一定的 HTML 和 CSS 基础，可以略过这一部分。如何制作模板网页，如果新手的话，可以稍微看一下我的这篇文章 网页设计的一般步骤

模板文件结构

新建一个文件夹，命名为 “myTheme” 。在里面要添加至少两个文件，一个是 index.html 另一个是 style.css 。此外，为了之后的制作，我们还应当添加两个文件夹，分别是 /images 和 /js ，分别用来存放主题需要的图片和 Javascript 文件。

模板文件内容

我做了一个比较简单的模板，具体演示效果如下图

现在还没有添加任何的数据，只是一个大体的框架，在下面我将会添加数据，然后整体效果就会出来了。

这个文件在文章后面可以下载到。

为模板添加模拟数据

从上图大家就可以看到各个部分的功能等。下面，我要在模板中添加模拟数据，之后使用 CSS 对其进行外观定义。之后，我们就可以对照数据，添加 WordPress 相应的调用数据的函数，完成主体制作。

添加模拟数据，并且定义了外观 CSS 之后的模板文件如下图

在下图中，我对添加的数据作了一个说明

这样，我们的模板文件就算是做好了，对应数据以及相应的 CSS 都已经编写好了。你现在已经看到了一个简单的博客页面。根据前面说的 WordPress 的大体制作步骤，我们现在只需要使用相应的函数调用相应的数据就可以了。

其他问题

本节课相关资源下载

myTheme 模板文件下载地址 : >>点击这里

之前的系列文章

1. 开始执行的 wordpress 主题教程计划
2. 【基础篇】1、学习制作主题之前的准备
3. 【基础篇】2、WordPress 的主题机制