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

2019-03-11 09:55:54来源： yeeyan 阅读 ()

制作或修改一个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的内容。

以下为引用的内容：

/*
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。

从父主题导入样式

现在，除非今天是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);

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

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

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

取代父主题样式

现在让我们对子主题的样式做一些修改，将这些代码复制到子主题的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; }

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

取代父主题模板

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

答案是很容易。你只需要把你需要修改的模板文件从父主题文件夹复制到子主题文件夹。在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 »', '1 Comment »', '% Comments »'); ?></small>

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

总结

我们已经创建和修改一个新的主题，而不必修改父主题的文件，所做的修改只在子主题的文件夹里。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有