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

题记

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

开始之旅

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

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

基本要求

  1. 会通过chrome的元素审查修改css, 明白常见的css容器和属性
  2. 明白简单的php编程, 语法
  3. 了解WP 钩子(hook), 函数(function)
  4. 最后, 喜欢折腾

主题制作步骤详解

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

  1. 搭建本地测试环境
    很简单, 就是下载XAMP, 建议下载U版, 方便移植. 安装到U盘后, 通过xampp_start.exe 与xampp_stop来开始与结束本地apache, php与mysql环境. 然后下载WP安装包并解压到xampp\htdocs\wordpress目录下(其中wordpress是新建的, 里面是各种wp文件). 最后就是通过xamp建立wp的sql数据库, 并通过http://localhost/wordpress来安装WP. 具体设置可以参考我爱水煮鱼的《如何在 Windows 系统上安装 WordPress 本地测试 》.
  2. 安装父(模板)主题
    最快速的方法就是基于别人的框架来写主题, 这样基本的框架都已经搭建好了. 你唯一需要的就是作适当的修改, 以适应自己的要求. 而且这种方法可以说是修改最少的主题制作方法.那么, 就让我们以 Thematic Theme Framework 为例来谈谈主题创作吧. 这个框架是用得比较火的框架之一.
    先给出几个有用的链接:

    1. 基于父主题来创建主题的教程
    2. Thematic 下载
    3. Thematic 使用指南
    4. 一些基于Thematic已经制作好的子主题(child theme): 可以用作参考哦
  3. 子主题的创建
    大概浏览完上面的链接你就基本能够开始了. 首先在WP的\wp-content\themes\下新建一个childtheme文件夹, 里面新建两个文件, 一个是style.css, 一个是functions.php. 关于他们各自的作用, 及具体的内容, 请看上面给出的使用指南. 其实主要是style.css的书写, 一定要有Theme Name: 一项. 其他的可以选填. 然后就是导入几个基本的css:

    接下来你就可以写自己的style了, 可以把default.css复制一份到这里, 然后作适当修改就ok啦.

    最后, 我们可以通过 functions.php 来修改父主题的行为, 主要的参考有

    1. Thematic 滤子 (filters), 修改主题功能必用
    2. Thematic 钩子 (Hooks), 修改主题功能必用
    3. Thematic 支持论坛
      利用这些滤子和钩子, 你很容易的修改主题的行为. 我都是看着例子改的.
  4. 主题语言包的制作:汉化
    其实很简单, 想法就是提取主题里面的国际化字符串, 即_e() 以及__(). 这里给出两个工具:

    1. PoEdit: 将.pot, .po翻译成mo, 似乎说可以提取php的国际化字符串. 但是本人未实验成功.
    2. icanlocalize.com: 在线提取php文件中的国际化字符串.
      在这里, 我想稍微谈下自己的体会. 其实一个简单的po文件如下:

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

      但是关键在最后, 我们要在php中加入一句来使用翻译后的语言包:

      关键就是后一句, yourthemetag就是翻译的标签, 而后一个就是zh_CN.mo所在的目录, 这里用的是子主题的style.css所在目录下的languages目录中.

至此, 大功告成, 你的主题已经制作完成, 看看能否通过HTML, CSS 验证吧.

最后, 如果不是用的thematic框架, 可以参考《创建一个可翻译的WordPress模板》调用语言包.

发表评论