这可能是我在建博之后到现在为止,写过的最长的一篇文章,不过也是在这个博客里面,文章最短的。什么意思呢?
这里的这篇文章,我就写这么几个字。但是这篇文章,我写了大约两天,包括构思,查阅资料,排版等等。
denis 的水煮鱼博客,不知道编辑器抽了风,编辑起来好麻烦。
好了,直接给出地址:http://fairyfish.net/article/designing-with-html5/ ,我懒得复制过来排版了。
这可能是我在建博之后到现在为止,写过的最长的一篇文章,不过也是在这个博客里面,文章最短的。什么意思呢?
这里的这篇文章,我就写这么几个字。但是这篇文章,我写了大约两天,包括构思,查阅资料,排版等等。
denis 的水煮鱼博客,不知道编辑器抽了风,编辑起来好麻烦。
好了,直接给出地址:http://fairyfish.net/article/designing-with-html5/ ,我懒得复制过来排版了。
上节课的时候,我们了解接触到了第一个函数。在这节课中,我将会讲解更多的有关头部的 WordPress 函数,并且教你打造一个完整、规范的头部。
这里的头部,主要分为两部分:
众所周知,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 属性中的 # 。
好了,头部的处理就这样完成了,我们可以在浏览器中访问一下。这时候,就可以看到标题、网站标题、网站描述变了。你在后台中修改相应的信息,刷新之后,相应的也会变。
首先,你必须的知道,什么叫做 AdminBar 。这是 WordPress 中的一个非常方便的功能,当管理员或者有管理权限的用户访问页面的时候,就会看到最上面有一个黑色的条条,上面有各种快捷链接。
不知道为什么,竟然还有很多人写如何去掉这个功能。但是很少有人写如何增加这个功能。
这个功能需要增加?对,没错。在早期我制作主题的时候,就出现了没有 AdminBar 的情况。要想在主题中,增加这个功能,必须要用到两个函数:
<?php wp_head(); ?>、<?php wp_footer(); ?>
这两个函数,是实现 WordPress 中某些功能而使用的。例如本文写的 AdminBar 的功能,就是使用这两个函数。新手制作主题的时候,往往会看到或者使用到 wp_head() 这个函数,但是会忽视 wp_footer() 这个函数。所以,AdminBar 不会显示,但是会空出那么高的高度。
这两个函数的位置也需要注意。
注意:
忽略了一个地方,在现在的版本中,用户可以自定义在浏览博客的时候,是否显示最上面这个工具条。在 “用户”-》“我的个人资料” 中可以设置。在以前的版本中,记得好像没有这个选项。感谢 “鬼娃娃” 提醒。
有人说 WordPress 的 SEO 做的比较好,我想这个和 WordPress 可以方便的自定义文章的固定链接有分不开的联系。在众多的 WordPress 博客中,有很多种的固定连接,本文就是把这些固定链接的形式和效果跟大家分析一下,然后根据你自己的需求,选择适合你博客的固定连接。
没有在后台的 “设置-》》固定链接” 中设置链接样式的话,就属于默认的固定连接样式,它的形式如下
http://www.qianxingzhem.com/?p=123
这是官方默认的链接样式,分日期、月份和名称两种,形式如下
http://www.qianxingzhem.com/2012/09/11/sample-post/
http://www.qianxingzhem.com/2012/09/sample-post/
直接加一个文章名称,形式如下
http://www.qianxingzhem.com/sample-post/
将文章中的关键词提取出来,然后自定义固定连接,用“-”链接关键词,很多高手博客使用这种链接,样式如下
http://fairyfish.net/m/limit-login-attempts/
直接把文章的ID写在链接中,样式如下
http://www.qianxingzhem.com/123
不仅仅是文章 ID 还增加一些英文单词,例如:post、archives等,形式如下
http://www.qianxingzhem.com/archives/123
http://www.qianxingzhem.com/post-1268.html
WordPress 设置了一系列的固定链接结构标签,来让你定义固定链接,具体标签及功能如下
http://www.qianxingzhem.com/post-1268.html在后台自定义链接结构时,需要定义成
/post-%post_id%.html
固定链接在 WordPress 博客中非常重要,强烈建议在建博初期就确定下来,而且之后不要再更换。如果你更换了固定链接,之前的固定链接打开之后,就会出现404错误,影响搜索引擎收录。
当然,如果你迫不得已更换博客的固定链接,请安装相应的 301链接重定向 插件,使用插件将之前的固定链接重定向到更新后的固定链接上。这类的插件比较多,这里我推荐几个:Simple 301 Redirects、Redirection等。
关于 WordPress 固定链接更详细的说明,请看官方文档 :zh-cn:使用固定链接
在前面的几个教程中,我们已经设计出了主题的模板、样式,同时也添加了模拟数据,现在我们要做的就是把现有模板文件安装到 WordPress 中,这样有两个好处
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 以及帮我们准备好了大量的函数,来调用这些数据。我们只需要插入主题文件中即可。
我们只需要在原来模板的 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 主题下载地址 : >>点击这里
这已经好多天没有写文章了,最近我的 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 模板文件下载地址 : >>点击这里
在制作 WordPress 主题之前,先要大体了解一下 WordPress 的主题机制,这样才能将自己设计的 HTML 模板等,转换成 WordPress 所能识别的主题文件。在这篇文章中,有一些概念会比较抽象,在随后的教程中,你会亲身感受到这些概念,就明白了。所以,你只需要记住下面三个大标题即可,如果不懂不用怕,在后面的基础教程中,你会理解的。
经过潜行者 m思考总结,WordPress 主要有以下三个显而易见的主题机制:函数调用数据机制、缺失文件替换机制、分离文件分块调用机制。
这是来自官方的说明,一个主题中需要包含以下文件。当然对于新手和比较简单的模板,我们并不需要设计生成这么多的文件,如果做比较专业的主题,则需要设计生成更多的文件,这个将会在【中级篇】的文章中深入介绍。
首先你要明白,一个主题,要展示输入的文章等数据,它会需要一种代码来从数据库中提取数据,然后结合你自己编写的 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 的文件内容来显示。所以,在【基础篇】,我们要做的主题文件列表如下:
最初学习 WordPress 主题制作的时候,需要一整套比较完整,比较全面的教程。经过搜索找到了由水煮鱼博客翻译的国外wordpress主题制作教程。第一遍看的时候,比较枯燥难懂,也是因为当时的 CSS、PHP 水平比较底下,导致没有耐心看下去。过了一段时间,决定彻底攻克下来,于是下定决心花了一天时间看完了。随后根据教程中讲解的,一遍实践下来,就了解的差不多了。过了几天,就按照自己的思路做出了自己第一个主题。
所以总结一下,学习主题制作教程需要两点
找一套完整的教程,彻底学完,并且动手实践。
水煮鱼博客的 WordPress 主题制作教程非常不错,很多人都是靠它入门的,但是也有一些缺点
老外写的,思想的差异,你懂的。
在这里,我默认你的电脑系统为 Windows 系列,我们需要在本地搭建 PHP 环境。你可以选择一些整合的傻瓜安装包,但是如果你想多研究一下 PHP 的话,我还是建议分别安装 PHP、Apache、Mysql 然后配置一下。傻瓜化的安装步骤请移步本人这篇文章:本地搭建配置apache+php+mysql环境
搭建好本地系统之后,需要安装 WordPress ,这是废话,你懂的。
我有服务器,为什么还要自己本地安装?
你只需要准备一下两个东西就可以了
最近的台风也过去了很久了,这篇文章当然不是介绍台风这个事件,而是我昨天返校中,见到的台风过后的场景,然后得到的感悟,与大家分享一下。
本人家在县城,周围的树比较小,楼房比较多。当时台风过后,也没有出去看,听妈说路上很乱很多被吹到的树,正在清理。几天之后,我出去,发现跟以前没有什么变化,所以对于台风的破坏了解的并不是那么的充分,只是知道有一些树被吹倒压倒房子砸死了人。直到昨天坐车返校看到了郊区的尚未清理的情况,我这才亲身感受到了台风的破坏力。
具体的体现就是树的形态。
大部分的树,都被吹弯了,很平滑的吹弯了,而且直不起来了。郊区有种树的,一整片树林,都成平的了,倒下的树木东倒西倒成为一片。也有不少压在房子上。
当然还有很多树并没有被风吹到,这时候,我就开始观看这些树的特点,这些树为什么仍然屹立不倒?!经过观察,有以下三个特点的树没有被吹到。
1,高大强壮的树。
这类树强壮,能够抵御狂风的侵袭,这点不用多说了。
2,柔弱的小树。
这种小树比较柔软,而且树叶比较小,风吹起来,受力较少,韧性也不错,所以虽然被风吹弯了,但是还可以直起来。
3,被高大强壮的树包围的中等高度的树林
有的树林周围被种上了高大强壮的树,而这片树林整体就免遭狂风侵害了。
而被吹弯的树,特点就是正在成长中的中等树,比较细、比较高、树叶比较多,生长比较旺盛。
那我们可以收获什么感悟呢?
放在技术的角度上,在技术的狂风中
不太好的就是那种无法看清楚自己的实力,却在装大师,这种只会被耻笑。
放在职场上,在职场的狂风中
强势到极端,强大到无法被别人摧毁,别人就只好俯首称臣。
在几个月前,我制作出属于自己的模板的时候,就开始打算编写一系列的wordpress主题教程。写过几篇教程,结果感觉系列文章的结构比较混乱,而且当时的技术并不是很成熟,最终只写了几篇文章,就决定停下来,等技术比较成熟之后,再写。
目前来说,技术要比几个月之前成熟了很多,看到wordpress论坛对这个教程的需求比较大,准备在这段时间内,完成这个系列的文章的写作。目前已经列出了如下的大纲:
基础知识,初步了解wordpress主题的机制,学会使用函数调用数据
学习制作主题之前的准备(各种工具 开发环境 编写工具) wordpress的主题机制 > (函数机制 文件替换机制 头边栏底部分离调用机制 ) 制作主题的大体流程 > (先index.php 做出整体效果,然后分解成其他页面添加函数) 制作头部header > (如果添加js css链接,以及相关函数,wordpress常用的文件头等) 使用主循环制作日志列表和日志信息 > (主循环的原理,以及使用相关调用数据的函数) 编写搜索模块的代码 > (标准的引入搜索框等) 制作边栏sidebar > (添加weight 具体模块留到中级篇) 制作底部footer > (添加版权信息等等) 制作文章显示页面 >(在文章显示页面调用文章信息的函数 文章版权显示) 制作文章底部评论模块 >(如何去制作文章底部评论模块) 由现有文件生成其他文件 >(生成其他文件page.php等)
在基础篇的基础之上,讲解wordpress正规主题的制作方法,已经需要注意的地方,常见的博客元素 可以借鉴官方文档
回顾制作主题的大体流程 思考并确认你的设计方案(主色调 结构 功能 版面) 制作一个符合标准的头部header (设计 等 设计你的导航链接nav (添加自定义菜单等 展示文章摘要及其信息 (调用特色图片 显示文章列表页面页码信息(那个分页函数 自己定义边栏的输出文章(各种边栏调用函数 在主循环中输出文章相关信息 对各种文章中用到的标签进行合理的排版 添加自定义字段功能 添加管理员菜单功能 添加边栏工具条方便浏览者操作 制作更加复杂高级的评论模块 再由现有文件生成其他文件
收集各个有关wordpress主题制作的高级技术文章,高级技巧等
各种wordpress使用技巧
各种wordpress功能添加技巧
各种可以使用的资源
各种小功能