WordPress儿童主题入门

文章撰写者:
  • WordPress
  • 更新:Jul 27,2013

所以,你想象在WordPress世界中开始你的调整,你已经找到了很多很棒的主题。 你甚至可以找到很多高级主题,其中大部分都非常值得(一些专业外观和代码的书)。 你找到的大部分主题都是 很近,但没有一个是你想要的。 能够稍微移动菜单栏,替换字体,添加新的文本块会很好。

好吧,如果这听起来很熟悉,本指南适合您。 在这里,我们将深入探讨儿童主题世界,您可以在这里完成任何您想要的任何事情,而不会破坏您购买的令人敬畏的主题,或丢失未来的更新,因为您所做的任何事情都将被取消。

编辑外观而不修改主题文件

简而言之,这就是Child主题:无需修改原始文件即可自定义。 除非您明确说明,否则子主题基本上具有相同的功能和主题(父母)的外观。

它至少包含2文件,style.css和functions.php文件,所有其他文件将从父主题中获取,因此除非您在子主题目录中创建新文件,否则您将使用父文件。

我们在这里有很多可能性,但主要优点是您可以轻松地回到原始主题,因此您也可以更新主要主题而不会丢失任何编辑,因为它们是在完全不同的文件夹中完成的。

让我们亲自动手吧

因此,第一步是在/ wp-content / themes /文件夹下创建一个新的子主题目录。 我们称之为“Twenty-Child”,让我们创建基本的styles.css文件:

/ *主题名称:Twenty Child主题URI:http://www.webrevenue.co描述:立即学习儿童主题作者:Rochester Oliveira作者URI:http://www.webrevenue.co/author/rochester/模板:twentytwelve * / / *调用主题CSS文件* / @import(“../ twentytwelve / style.css”); / *在下面添加你想要的任何东西* /

参数是(除了其他可选参数):

  • 主题名称:您将在主题选择屏幕下看到的名称
  • 主题URI:将在那里显示的链接
  • 描述:一个简短的描述,所以你会记住这是什么
  • 作者:谁创造了儿童主题
  • 作者URI:如果您想链接到作者的网站
  • 模板:主要主题文件夹(因此,如果您想使用不同的主题作为主要,只需替换此参数)

添加此代码后,您将在WP管理>外观>主题下看到子主题。 您现在可以选择它,所有更改都将在您的站点中显示。

子主题编辑101

如果你没有CSS知识,这可能没用,对吧? 错误! CSS实际上非常简单,你可以找到很多片段来帮助你。 以下是一些可帮助您进行自定义的简单提示。

#1安装Firebug

很多人都喜欢Chrome和Safari(我也是如此!),但对我来说,FireFox更适合开发。 所以,如果你想使用它,我建议你也安装firebug,这是一个很棒的工具,可以理解当前元素中活跃的所有选择器。

安装后,您可以按F12或右键单击页面中的某个位置并选择“检查元素”。 您将看到一个包含当前页面HTML和CSS的新窗口(以及许多其他有用的选项卡,也许我们稍后可以讨论它们)。

在CSS框中,您将从上到下看到应用于当前元素的所有CSS规则,以及顶部中更“特定”的规则。 这很酷,但让我们看看你能用这些信息做些什么

#2考虑CSS特异性(或选择器权重)

每个CSS规则都有其选择器,属性和值。 但是当浏览器找到影响相同元素的2或更多规则时,它必须选择哪一个更合适。 我们通常有这个“规则”来理解将要考虑的内容:

  • ! 重要声明将覆盖其他任何内容
  • 内联CSS将覆盖任何东西,但! 重要规则
  • ID(#header,#footer,#container ...)值得100点
  • 类(.main,.nav,.box)值得10点
  • 标签(body,div,p,a)值得1点
  • 通用选择器和伪类(*,:hover,:after)值得0但是如果有“领带”它们将适用

好的,让我们看一个例子,以便更好地理解这一点。 使用二十二十二点右键单击您的站点标题,您将看到出现的第一个CSS是:

.site-header {padding:1.71429em 0; 文章,一边,细节,figcaption,图,页脚,标题,hgroup,nav,section {display:block; }

第一个选择器有10点(因为它是一个类),第二个选择器每个都有1点(因为逗号只是将不同的选择器分开),这就是它出现在顶部的原因。 如果你有类似#header div的东西那个选择器肯定会是第一个出现的选择器。

为什么这么重要?

因为为了编辑主题而不编辑其CSS文件,您需要始终使用具有比主题中定义的规则更多的点的规则。 你可以聪明地使用简单的代码。 例如,要覆盖此属性:

.site-header {padding:1.71429em 0; }

您可以在子主题CSS中添加它,但不应该:

.site-header {padding 15px 0! 重要; }

因为这是错误的代码,例如,如果你需要在单个页面中更改它,那么再次覆盖会更加困难。 所以你可以简单地使用它:

body .site-header {padding:15px 0; }

此选择器具有11点,该点大于原始10,因此将应用此代码。

#3充分利用这些功能

子function.php文件是唯一将加载到原始文件的文件。 这是WP团队完成的一个聪明的解决方法,因此您可以保留原始功能并添加自己的功能。 问题是,首先加载子主题函数,主题开发人员必须做这样的事情以避免在声明函数时发生冲突:

if(!function_exists('top_menu')){function top_menu(){// cool code here} add_action('wp_head','top_menu'); }

那是因为如果你在子主题文件中定义一个函数,它可以覆盖原始函数。 如果主题开发人员没有这样做,你最终会得到一个丑陋的PHP错误(因为同一个函数被创建两次)。

#4了解一些CSS属性

您是否知道可以使用CSS隐藏和添加内容? 您需要安装firebug才能找到正确的选择器,但您可以通过添加以下代码来隐藏项目:

body a {display:none}

要添加它更复杂,因为你只能添加小文本,如果你想在价格标签后面的“On Sale!”文本,例如你可以使用这个代码:

.price del:在{color:red;之后 内容:“正在销售!”; }

你觉得呢?

您对本指南有何看法? 你会考虑使用儿童主题吗? 你已经在使用它吗? 请使用下面的评论部分告诉我们!

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。