小小泪的博客: 浅谈WP主题制作---快速创建SEO过的主题

题记

使用WP也有一段时间了, 一开始是别人问我怎么把LaTeX写的漂亮的公式搬到网上? 我也很好奇, 结果发现MathJaX就是很好的一个脚本. 再后来尝试用Google App 搭建博客平台, 由于大陆被强了, 非常郁闷. 再后来发现SAE有云平台, 呵呵还有WP兴奋之余就开始了探索之旅.

开始之旅

一开始, 我们都是反复修改别人的模板, 换啊换. 都不是很满意: 通不过HTML验证, CSS验证, 下拉菜单弹不出来, 格式不好看, 添加新功能, 等等折腾...

稍微高端的, 还要seo. 至今我还没明白代码和seo的具体关系. 不过, 嘿嘿. 我已经确信找到了方法, 这一切都终止于我自己写了个WP主题.

基本要求

会通过chrome的元素审查修改css, 明白常见的css容器和属性

明白简单的php编程, 语法

了解WP 钩子(hook), 函数(function)

最后, 喜欢折腾

主题制作步骤详解

下面我就如何快速创建一个适合自己的WP主题来写点体会. 那些我认为关键的地方会解释, 而基本的东西请google.

搭建本地测试环境
很简单, 就是下载XAMP, 建议下载U版, 方便移植. 安装到U盘后, 通过xampp_start.exe 与xampp_stop来开始与结束本地apache, php与mysql环境. 然后下载WP安装包并解压到xampphtdocswordpress目录下(其中wordpress是新建的, 里面是各种wp文件). 最后就是通过xamp建立wp的sql数据库, 并通过http://localhost/wordpress来安装WP. 具体设置可以参考我爱水煮鱼的《如何在 Windows 系统上安装 WordPress 本地测试》.

安装父(模板)主题
最快速的方法就是基于别人的框架来写主题, 这样基本的框架都已经搭建好了. 你唯一需要的就是作适当的修改, 以适应自己的要求. 而且这种方法可以说是修改最少的主题制作方法.

那么, 就让我们以 Thematic Theme Framework 为例来谈谈主题创作吧. 这个框架是用得比较火的框架之一.
先给出几个有用的链接:

基于父主题来创建主题的教程

Thematic 下载

Thematic 使用指南

一些基于Thematic已经制作好的子主题(child theme): 可以用作参考哦

子主题的创建
大概浏览完上面的链接你就基本能够开始了. 首先在WP的wp-content hemes下新建一个childtheme文件夹, 里面新建两个文件, 一个是style.css, 一个是functions.php. 关于他们各自的作用, 及具体的内容, 请看上面给出的使用指南. 其实主要是style.css的书写, 一定要有Theme Name: 一项. 其他的可以选填. 然后就是导入几个基本的css:
```
/*
title=""
Theme Name: Chiron
Description: A Child Theme of Thematic.
Template: thematic
*/

/* Using @import, we can borrow style sheets from the Parent Theme */

/* Reset the browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply default typography */
@import url('../thematic/library/styles/typography.css');

/* Add WordPress image styles */
@import url('../thematic/library/styles/images.css');

/* Add a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css');

/* Start with some default styles */
@import url('../thematic/library/styles/18px.css');
```
接下来你就可以写自己的style了, 可以把default.css复制一份到这里, 然后作适当修改就ok啦.

最后, 我们可以通过 functions.php 来修改父主题的行为, 主要的参考有
1. Thematic 滤子 (filters), 修改主题功能必用
2. Thematic 钩子 (Hooks), 修改主题功能必用
3. Thematic 支持论坛
  利用这些滤子和钩子, 你很容易的修改主题的行为. 我都是看着例子改的.

主题语言包的制作:汉化其实很简单, 想法就是提取主题里面的国际化字符串, 即_e() 以及__(). 这里给出两个工具:

PoEdit: 将.pot, .po翻译成mo, 似乎说可以提取php的国际化字符串. 但是本人未实验成功.

icanlocalize.com: 在线提取php文件中的国际化字符串.
在这里, 我想稍微谈下自己的体会. 其实一个简单的po文件如下:
```
msgid ""
msgstr ""
"Content-Type: text/plain; charset=utf-8
"
"Content-Transfer-Encoding: 8bit
"

#. Text in echo
#: search.php:53
msgid "Find"
msgstr ""

#. Text in echo
#: search.php:46
msgid "Nothing Found"
msgstr ""
```
你发现什么, 其实每个国际化字符串就是用四行来表示的, 例如"Find", msgid 表示的是原字符串即php中_e('Find', 'youthemetag')或者__('Find', 'yourthemetag')中的第一个字符串, 而msgstr 就是我们要翻译后的字符串了. 所以很简单, 就是手动也可以翻译.

但是关键在最后, 我们要在php中加入一句来使用翻译后的语言包:
```
add_action( 'after_setup_theme', 'graphene_child_setup' );
function graphene_child_setup() {
    /* Load the child theme's gettext file */
    load_child_theme_textdomain( 'yourthemetag', get_stylesheet_directory() . '/languages' );
}
```
关键就是后一句, yourthemetag就是翻译的标签, 而后一个就是zh_CN.mo所在的目录, 这里用的是子主题的style.css所在目录下的languages目录中.

创建一个可翻译的WordPress模板

小小泪的博客

2012年5月25日星期五

浅谈WP主题制作---快速创建SEO过的主题

题记

开始之旅

基本要求

主题制作步骤详解

没有评论:

发表评论

我的简介