使用 HTML5 正确合理的重构你的网页

这可能是我在建博之后到现在为止,写过的最长的一篇文章,不过也是在这个博客里面,文章最短的。什么意思呢?

这里的这篇文章,我就写这么几个字。但是这篇文章,我写了大约两天,包括构思,查阅资料,排版等等。

denis 的水煮鱼博客,不知道编辑器抽了风,编辑起来好麻烦。

好了,直接给出地址:http://fairyfish.net/article/designing-with-html5/ ,我懒得复制过来排版了。

【基础篇】5、制作主题的头部区域

上节课的时候,我们了解接触到了第一个函数。在这节课中,我将会讲解更多的有关头部的 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 功能

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

adminbar

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

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

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

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

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

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

注意:

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

WordPress的6种固定连接优缺点对比

有人说 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:使用固定链接

【基础篇】4、安装主题文件

在前面的几个教程中,我们已经设计出了主题的模板、样式,同时也添加了模拟数据,现在我们要做的就是把现有模板文件安装到 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 主题文件

【基础篇】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 的大体制作步骤,我们现在只需要使用相应的函数调用相应的数据就可以了。

其他问题



我是新手,不会做这种模板怎么办?

1. 制作主题等,需要一定的 Html 和 CSS 基础,如果你没有基础,请寻找相应资料,先学习一下 Html 和 CSS ,否则后面的学习会比较吃力。
2. 你也可以在网上下载 Html 模板或者下载我做好的教程模板,先不管如何去设计制作模板,先使用现有资源进一步学习。

本节课相关资源下载

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

之前的系列文章

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

【基础篇】2、WordPress 的主题机制

在制作 WordPress 主题之前,先要大体了解一下 WordPress 的主题机制,这样才能将自己设计的 HTML 模板等,转换成 WordPress 所能识别的主题文件。在这篇文章中,有一些概念会比较抽象,在随后的教程中,你会亲身感受到这些概念,就明白了。所以,你只需要记住下面三个大标题即可,如果不懂不用怕,在后面的基础教程中,你会理解的。

经过潜行者 m思考总结,WordPress 主要有以下三个显而易见的主题机制:函数调用数据机制缺失文件替换机制分离文件分块调用机制

一个 WordPress 主题默认的文件目录

这是来自官方的说明,一个主题中需要包含以下文件。当然对于新手和比较简单的模板,我们并不需要设计生成这么多的文件,如果做比较专业的主题,则需要设计生成更多的文件,这个将会在【中级篇】的文章中深入介绍。

  • 404 错误页 = 404.php
  • 存档页 = archive.php
  • 存档索引页 = archives.php
  • 评论页 = comments.php
  • 底部 = footer.php
  • 头部 = header.php
  • 链接 = links.php
  • 首页 = index.php
  • 静态页 = page.php
  • 弹出式评论页 = comments-popup.php
  • 单篇博文页 = single.php
  • 搜索表单 = searchform.php
  • 搜索 = search.php
  • 侧栏 = sidebar.php
  • 样式表 = style.css

函数调用数据机制

首先你要明白,一个主题,要展示输入的文章等数据,它会需要一种代码来从数据库中提取数据,然后结合你自己编写的 HTML 文件,生成供浏览者观看的页面。

在 WordPress 中,官方团队为你写好了一系列的数据调用函数,使用这些函数以及相应的参数,就可以调用相应的博客数据并且显示出来。这样,当我们设计好了我们的 HTML 模板之后,只需要在相应的地方,加上调用相应数据的函数,就可以显示出来了。

在随后的教程中,我们就会遇到那些常用的函数,以及函数的参数和使用方法、效果。

缺失文件替换机制

从上面的标准主题的文件列表里面,我们可以清晰的看到每个文件都有每个文件的功能,例如 sidebar.php 是边栏文件; single.php 是用来显示文章的文件。同时,潜行者 m还说了,如果是比较简单的主题,并不需要这么多的文件。这里,你会不会产生一种疑问:如果缺少了某个功能文件,WordPress 会怎样处理?

这就是 WordPress 的缺失文件替换机制要处理的。WordPress 主题里面,最重要的只有两个文件:index.php、style.css 这两个文件。一个是模板文件,另一个是 CSS 定义样式用的。而其他的 single.php 等文件,则是 index.php 的下级文件。WordPress 发现没有相对应的功能文件(例如显示文章的 single.php),它就会使用上级文件来代替显示缺失文件的内容(缺失 single.php,就使用 index.php 来显示文章内容)。

具体关系如下图:

分离文件分块调用机制

制作主题的时候,通常先制作 index.php 文件,来做出整体的效果。做完 index.php 文件之后,我们通常会把顶部的信息、边栏、底部的信息,分离出来,分别生成 header.php、sidebar.php、footer.php 这三个文件。之后,在 index.php 以及其他的主题文件中,使用相应的函数来调用这三个文件。

为什么?因为头部、边栏和底部的内容,通常是不变化的,变化最多的就是博客的主体。所以将这几块分离出来,提高代码的重用,同时也提高修改和二次开发的效率,这点是非常科学的,你将会慢慢体会到。

本节课的总结

通过本节课,我们了解到了 WordPress 主体的标准文件列表,同时我们了解了三种 WordPress 的主题机制。其中,缺失文件替换机制,让我们了解到,比较简单的模板,并不需要设计生成标准文件列表里面的文件,我们只需要设计主要的文件即可,因为缺失的其他功能文件,WordPress 系统会使用 index.php 的文件内容来显示。所以,在【基础篇】,我们要做的主题文件列表如下:

  • index.php = 主体文件
  • header.php = 头部文件
  • sidebar.php = 边栏文件
  • footer.php = 底部文件
  • single.php = 文章显示文件
  • page.php = 页面显示文件
    同时,我们还确定了我们制作主题的大体流程:
  1. 制作 index.html 和 style.css 文件,确定主题的整体风格。
  2. 放入 WordPress 主题目录中,修改成 index.php。
  3. 对 index.php 进行文件分割,分离出内容不变的 header.php、footer.php、sidebar.php 文件。
  4. 由 index.php 文件,生成 single.php 文章页面,并进行简单改造。
  5. 由 single.php 文件生成 page.php 文件,因为文章和页面的布局比较像。
  6. 在各种主题文件中,插入 WordPress 数据调用函数,然后显示博客数据。
    随后的【基础篇】教程,潜行者 m将围绕这几个大体流程来依次讲解,直到最后做出一个比较简单的主题。

之前的系列文章

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

【基础篇】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主题教程计划
     

 

台风过后的人生思考

最近的台风也过去了很久了,这篇文章当然不是介绍台风这个事件,而是我昨天返校中,见到的台风过后的场景,然后得到的感悟,与大家分享一下。

本人家在县城,周围的树比较小,楼房比较多。当时台风过后,也没有出去看,听妈说路上很乱很多被吹到的树,正在清理。几天之后,我出去,发现跟以前没有什么变化,所以对于台风的破坏了解的并不是那么的充分,只是知道有一些树被吹倒压倒房子砸死了人。直到昨天坐车返校看到了郊区的尚未清理的情况,我这才亲身感受到了台风的破坏力。

具体的体现就是树的形态。

大部分的树,都被吹弯了,很平滑的吹弯了,而且直不起来了。郊区有种树的,一整片树林,都成平的了,倒下的树木东倒西倒成为一片。也有不少压在房子上。

当然还有很多树并没有被风吹到,这时候,我就开始观看这些树的特点,这些树为什么仍然屹立不倒?!经过观察,有以下三个特点的树没有被吹到。

树木的外观

1,高大强壮的树。

这类树强壮,能够抵御狂风的侵袭,这点不用多说了。

2,柔弱的小树。

这种小树比较柔软,而且树叶比较小,风吹起来,受力较少,韧性也不错,所以虽然被风吹弯了,但是还可以直起来。

3,被高大强壮的树包围的中等高度的树林

有的树林周围被种上了高大强壮的树,而这片树林整体就免遭狂风侵害了。

而被吹弯的树,特点就是正在成长中的中等树,比较细、比较高、树叶比较多,生长比较旺盛。

那我们可以收获什么感悟呢?

收获的感悟

放在技术的角度上,在技术的狂风中

  1. 你可以努力学习,变成一位强壮的大树,成为某一个领域的专家,技术大牛。
  2. 如果你无法做到第一条,也可以放下姿态,虚心求教,不懂就问,表现出你的柔弱,也是可以不断成长。
  3. 当然,你也可以接受技术大牛的庇护,跟着他们混、跟着他们学习,让他们带着你打怪升级,也是不错的。
  4. 不太好的就是那种无法看清楚自己的实力,却在装大师,这种只会被耻笑。
    放在职场上,在职场的狂风中

  5. 强势到极端,强大到无法被别人摧毁,别人就只好俯首称臣。

  6. 无法十分强势,就表现出你的柔弱,告诉强势的人,你是一个柔弱的人,你对他没有威胁性。
  7. 不太好的就是那种不软不硬,强硬却无法很强硬,又不是很柔软,结果就被狂风吹倒。
    你觉得呢?

开始执行的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格式的电子书。希望大家关注和支持,让我坚持努力写出来。