实际上,刚开始学着制作wordpress主题的人都会先下载一个合适的主题来进行相应修改,包括布局或者更改CSS样式,而那些很多时候都要去动那些PHP文件,而现在如果你知道了wordpress子主题功能,你的工作效率将会大大提高。本文翻译:Epile 原文地址:http://www.raymondselda.com/harness-the-power-of-wordpress-child-themes/

WordPress 子主题

  一个Wordpress的子主题就像任何其他Wordpress主题一样,你可以把它们放在你的博客的主题目录(/wp-content/themes)下,然后在主题控制面板激活它们。它们同样拥有存在图片、脚本、截图(screenshot)、CSS的文件夹。
  唯一不同的地方是子主题基本上不需要任何主题文件(header.php, index.php, footer.php, single.php等)。这是我们为什么不需要使用PHP的另一个原因。
  现在,就让我们开始创建自己的子主题。

选择你的父主题

  在我们建立我们的子主题之前,我们必须先建立我们的父主题(Parent Theme)。为此,我们选择了Kubrick作为我们的父主题。你并不需要下载它因为它已经是Wordpress安装时自带的默认主题,位置在/wp-content/themes/default/。

建立你的子主题

  就像我所说的,一个子主题,就像是任何其它Wordpress主题一样,所以我们必须为它在主题目录中创建一个新文件夹,并把它命名为“koobreek”。在此之后,koobreek文件夹里新建一个style.css的空白文件。

子主题样式

  这是魔幻所在的一部分。打开koobreek主题目录下的style.css,并粘贴下面的内容。请特别注意行8的内容。

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/

  现在你已经以Kubrick为父主题创建你的子主题。之所以让你注意行8,是因为它的父主题文件夹的名称。现在请在主题控制面板激活你的子主题。如果一切正常,你看到的界面应该是不包含设计,单纯的XHTML。
XHTML Structure

从父主题导入样式

  现在,除非今天是CSS裸体日,你可能想要用CSS样式装饰你的主题。我想尽可能基础和简单,因此本教程将通过加入一行代码导入父主题CSS样式。

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/
/* Import Parent Theme Style */
@import url(../default/style.css);

  子主题看起来应该跟父主题完全一致,但在子主题的背景图片消失了。

graphic-missing

  如果你在Firebug中查看你会发现丢失的背景图片位于子主题的image文件夹下,它本应存在于父主题的images文件夹下。

  有一些方法或更多的途径来弥补这一问题,而最简单得要数直接复制父主题images文件夹到子主题目录下。刷新浏览器,现在子主题看起来与父主题完全一样了。
Koobreek Stage 1

取代父主题样式

现在让我们对子主题的样式做一些修改,将这些代码复制到子主题的style.css文件里。
修改字体为Arial

body {
font-family:Arial, sans-serif;
}

修改标题字体为Arial,font-weight属性为normal修改文章标题

h1, h2, h3 { font-family:Arial, sans-serif; font-weight:normal; }

修改头部背景

我把蓝色的头部背景换成了黑色,并保存在子主题的images文件夹,并用以下的代码覆盖父主题的样式。

.post h2 {
letter-spacing:-1px;
}

.post h3 {
font-weight:bold;
}

修改侧边栏样式以及标题

#sidebar h2 { font-family:Arial, sans-serif; text-transform:uppercase; font-weight:bold; color:#333; border-top:1px solid #333; padding-top:3px; font-size:12px; } #sidebar ul { font-family:Arial, sans-serif; font-size:11px; }

经过对子主题样式的一些更改,最后我们的主题是这样的:

Koobreek Stage 2

取代父主题模板

如果你需要对模板的结构做一定的修改?

答案是很容易。你只需要把你需要修改的模板文件从父主题文件夹复制到子主题文件夹。在Wordpress2.7以后,这样就会覆盖父主题的模板。

我不喜欢文章中metadate元数据的位置,我希望它在文章标题之下,日期之后。

为了做到这一点,我们从父主题文件夹复制index.php文件到子主题文件夹中。打开复制过来的index.php文件,替换17行的代码。

<small><?php the_time(‘F jS, Y’) ?> by <?php the_author() ?> Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘No Comments &#187;’, ’1 Comment &#187;’, ‘% Comments &#187;’); ?></small>

然后删除23行的代码,因为它已经显示在17行了。刷新页面,你将看到文章的元数据和日期在标题下面。
Koobreek Stage 3

总结

我们已经创建和修改一个新的主题,而不必修改父主题的文件,所做的修改只在子主题的文件夹里。欢迎随意下载koobreek.zip
大量关于子主题的信息可以在ThemeShaperThemeHybrid获得。我希望子主题能帮助你加快你的工作流程,使主题开发更愉快。

分享到: