从子主题开始轻松地修改WordPress风格

时间:10-05-02 栏目:网络&技术 作者:wukong 评论:0 点击: 1,351 次

制作或修改一个Wordpress主题需要耗费多少时间?即使你已经写过少量的主题,有时候你仍然对完成一个主题所耗费的时间而感到沮丧?你是否曾经希看能有一个更简单的方法?实际上,所有题目的答案就是使用Wordpess的子主题(Child Theme)。 设想自己能够在几分钟内修改一制作或修改一个Wordpress主题需要耗费多少时间?即使你已经写过少量的主题,有时候你仍然对完成一个主题所耗费的时间而感到沮丧?你是否曾经希看能有一个更简单的方法?实际上,所有题目的答案就是使用Wordpess的子主题(Child Theme)。
设想自己能够在几分钟内修改一个主题,或在几个小时或以内建立一个功能齐全的Wordpress主题。
在这篇文章,我们将学会如何通过Child Theme帮忙我们灵敏开发Wordpress主题。
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的内容。
以下为引用的内容:
/*
ThemeName:Koobreek
ThemeURI:http://wordpress.org/
Description:ThisisachildthemeofKubrick
Version:1
Author:RaymondSelda
AuthorURI:http://www.raymondselda.com/
Template:default
*/
现在你已经以Kubrick为父主题创建你的子主题。之所以让你留意行8,是由于它的父主题文件夹的名称。现在请在主题控制面板激活你的子主题。假如一切正常,你看到的界面应该是不包含设计,单纯的XHTML。
www.2hand.cn
制作或修改一个Wordpress主题需要耗费多少时间?即使你已经写过少量的主题,有时候你仍然对完成一个主题所耗费的时间而感到沮丧?你是否曾经希看能有一个更简单的方法?实际上,所有题目的答案就是使用Wordpess的子主题(Child Theme)。 设想自己能够在几分钟内修改一
从父主题导进样式
现在,除非今天是CSS裸体日,你可能想要用CSS样式装饰你的主题。我想尽可能基础和简单,因此本教程将通过加进一行代码导进父主题CSS样式。
以下为引用的内容:
/*
ThemeName:Koobreek
ThemeURI:http://wordpress.org/
Description:ThisisachildthemeofKubrick
Version:1
Author:RaymondSelda
AuthorURI:http://www.raymondselda.com/
Template:default
*/
/*ImportParentThemeStyle*/
@importurl(../default/style.css);
子主题看起来应该跟父主题完全一致,但在子主题的背景图片消失了。
www.2hand.cn
假如你在Firebug中查看你会发现丢失的背景图片位于子主题的image文件夹下,它本应存在于父主题的images文件夹下。
有一些方法或更多的途径来弥补这一题目,而最简单得要数直接复制父主题images文件夹到子主题目录下。刷新浏览器,现在子主题看起来与父主题完全一样了。
www.2hand.cn

制作或修改一个Wordpress主题需要耗费多少时间?即使你已经写过少量的主题,有时候你仍然对完成一个主题所耗费的时间而感到沮丧?你是否曾经希看能有一个更简单的方法?实际上,所有题目的答案就是使用Wordpess的子主题(Child Theme)。 设想自己能够在几分钟内修改一
取代父主题样式
现在让我们对子主题的样式做一些修改,将这些代码复制到子主题的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文件夹,并用以下的代码覆盖父主题的样式。
以下为引用的内容:
.posth2{
letter-spacing:-1px;
}
.posth3{
font-weight:bold;
}
修改侧边栏样式以及标题
以下为引用的内容:
#sidebarh2{ font-family:Arial,sans-serif; text-transform:uppercase; font-weight:bold; color:#333; border-top:1pxsolid#333; padding-top:3px; font-size:12px; } #sidebarul{ font-family:Arial,sans-serif; font-size:11px; }
经过对子主题样式的一些更改,最后我们的主题是这样的:
www.2hand.cn
取代父主题模板
假如你需要对模板的结构做一定的修改?
答案是很轻易。你只需要把你需要修改的模板文件从父主题文件夹复制到子主题文件夹。在Wordpress2.7以后,这样就会覆盖父主题的模板。
我不喜欢文章中metadate元数据的位置,我希看它在文章标题之下,日期之后。
为了做到这一点,我们从父主题文件夹复制index.php文件到子主题文件夹中。打开复制过来的index.php文件,替换17行的代码。
以下为引用的内容:
<small><?phpthe_time('FjS,Y')?>by<?phpthe_author()?>Postedin<?phpthe_category(',')?>|<?phpedit_post_link('Edit','','|');?><?phpcomments_popup_link('NoComments&#187;','1Comment&#187;','%Comments&#187;');?></small>
然后删除23行的代码,由于它已经显示在17行了。刷新页面,你将看到文章的元数据和日期在标题下面。
www.2hand.cn
总结
我们已经创建和修改一个新的主题,而不必修改父主题的文件,所做的修改只在子主题的文件夹里。

声明: 本文由( wukong )原创编译,转载请保留链接: 从子主题开始轻松地修改WordPress风格

从子主题开始轻松地修改WordPress风格:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!

------====== 本站公告 ======------
大家有任何疑问和建议,请到这里留言:点击留言板

读者排行