掌握WordPress自带主题 2017
又一年， WordPress 发布了另一个官方 主题 ，当然这次是二十七。 去年的主题二十六，我们 做了一个全面的指导 向您展示了如何掌握它或任何主题。
随着WordPress在去年发生的变化，在2010年的主题上再次创造新的时机似乎是最佳时机。
如果您想使用本指南在您的实时网站上设置Twenty Seventeen主题的精美版本，我建议您首先使用WordPress的（本地）开发版本，或者您的网站的分期版本。
因此，请转到WordPress的相应安装，搜索主题并进行安装。
在本 教程 中，我们将介绍改变网站外观的三种不同方式，并将它们分为三个不同的难度类别：
- 充分利用WP定制程序和主题的一些选项。 – 初学者
- 用基本的CSS – 中级/精明的初学者改变 设计 的几个部分
- 制作一个儿童主题并添加一些有用的功能。 也对设计做出更大的改变。 – 中级
初学者
在进入我们自己的代码和主题本身的页面模板的高级步骤之前，让我们来看看现成的功能。
现在，我的演示网站看起来像这样。 我所做的只是安装主题，不错，对不对？
熟悉新的定制器
首先，我们点击我们管理栏左上方的自定义链接，转到定制工具。
自定义程序的最新更新有一些改变。 我最喜欢的更新（在撰写本文时为4.7）是预览中所有可编辑元素旁边的可点击链接，这将带您到需要去编辑该元素的位置。
例如，如果我点击标题旁边的铅笔按钮，它会立即将我带到“网站标识”的相应部分的定制菜单。
另一个方便的更新是现在有一个实时预览您所做的任何更改。 而不是不断地进行小的修改，然后点击每个之后的预览，现在就可以现场编辑了。
更改或删除标题图像或使用标题视频
开箱即用，“二十七岁”比往年的主题看起来要好得多。 但是有一个大问题。 您无法拥有与其他数千个网站相同的标题图片。
谢天谢地，改变就像馅饼一样简单。 只需点击左上角的编辑此元素铅笔按钮，或者在悬停标题图像时移动单击。
这将我们带到标题媒体部分。
如果你想删除标题图片，只需点击隐藏图片。
这使得主题看起来像是一个枯燥的骨头博客主题。
如果您想使用自己的标题图片，请确保使用具有相似尺寸的高清图片。 主题建议您为标题使用2000 x 1200尺寸的图片。
有许多网站在那里你可以找到 免费的照片 。 适合于标题图像的HD图像的最佳之一是 http:// Unsplash.com 。
我现在滚动浏览顶部图像，下载我最喜欢的，并裁剪到建议的尺寸。
然后，我只需点击“添加图像”并上传。 我的网站看起来像这样：
与原来的外观一样，只是不同的形象。
但是，如果您上传不同尺寸的标题图片，您的网站不会看起来很好。
因为这是一个英雄形象风格的标题，调整图像的大小以使其在电脑上全屏显示，因此它会拉伸尺寸不正确的图像，并使其看起来有颗粒感。
视频标题
随着4.7更新，WordPress现在支持视频标题。 添加一个就像复制和粘贴YouTube网站或上传视频一样简单（不建议由于托管自己的视频的服务器负载）。
如果您想要显示标题视频而不是图像，请执行以下操作：单击以隐藏标题图像，然后输入视频的Youtube网址，然后按Enter键。
瞧，你现在有一个视频标题：
自定义颜色
不幸的是，Twenty Seventeen主题的自定义颜色选项非常有限。 所有你可以做的是选择标准灯主题，或黑暗的主题和编辑文字的颜色。
如果选择自定义，则可以为网站上的文字选择不同的配色方案，但不会让您选择背景。
当然，对于那些愿意用一些CSS弄脏你的人来说，这不是一个真正的问题。
中间
在这一点上，如果你已经非常熟悉WordPress，并且知道关于HTML和CSS的一两件事情，那么它会有所帮助。 如果你不这样做，不用担心，你真正需要的只是学习的意愿和一些耐心。
仅CSS更改
4.7版补丁中另一个值得欢迎的功能就是能够在定制器中直接添加自定义CSS。
这意味着您不再需要为此功能使用插件。 这也意味着您可以实时查看变更的影响，从而更容易发现错误。
如果您对HTML和CSS完全不熟悉，您可能需要研究一下。 我推荐你 阅读一些文章 ，或者开始搞乱Code Academy的 免费的HTML和CSS课程 。
如果你确实知道非常基本的东西，你可以按照原样进行。
如何找到正确的CSS选择器和其他基础
在对CSS进行任何更改之前，您必须了解如何正确地使用CSS定位html元素。
如果您使用的是Google Chrome浏览器，则已经附带了Google开发者工具，您无需安装任何插件。 如果您使用的是FireFox，则需要安装Firebug或类似的插件。
所有你需要做的是打开你的网站。 然后，突出显示或悬停在您网站的相关部分。 最后，右键单击并选择检查。
这在网站下面打开一个标签，显示相关的源代码行。 例如，如果我检查其中一个小部件的标题，就会弹出。
我可以很容易地看到CSS类是：widget-title。
它旁边还有一个框，显示了已经应用到它的CSS。这很重要，因为当您使用自定义CSS或子主题时，必须覆盖很多样式才能获得所需的样式。
这意味着两件事情; 首先，你必须至少像原来的CSS一样具体。
在这个例子中，CSS使用h2.widget-title来定位元素，所以如果我只使用h2或者widget-title，那么原来的CSS将会更加具体化，CSS将不会像我想要的那样应用到元素I 想。
你也必须覆盖你不想要的CSS行。 例如，如果存在左边距，但您想要右边距，则不能简单地添加右边距。 您需要通过添加以下内容来覆盖左边距：
margin-left：0;
第一。媒体查询
另一个重要的事情是寻找媒体查询。 它们是在CSS中使主题“响应”或“移动友好”的代码行。 WordPress主题中的媒体查询通常用于设置不同的宽度断点，以将独特的样式应用于不同的设备。
因此，当浏览器窗口具有一定的宽度时，我正在检查元素，这些是我在浏览器中看到的样式。
在这种情况下，宽度超过48em。
@media screen和（min-width：48em）
h2.widget-title {
font-size：11px;
font-size：0.6875rem;
margin-bottom：2em;
}
也有其他媒体查询不同的风格“隐藏”，让你找到如果你向下滚动标签。
正确处理媒体问题非常重要，否则您的网站在所有设备上都不会很好看。
现在我们已经介绍了使用CSS和WordPress的一些基本知识，现在是时候进行一些实验性的改变了。
添加背景图像
在添加背景图像之前，您应该将颜色方案调整为图片的颜色。 我选择的图片颜色比较暗，所以我选择了明暗的深色配色方案。
然后，只需将这几行代码添加到要用于定制程序的附加CSS部分的图片的URL中即可。
.site-content {
background-image：url（“用你的图片的URL替换”）;
背景重复：不重复;
background-attachment：fixed;
}
这种添加背景图像的方式会阻止图像重复。 它也适合于用来查看网站的浏览器的屏幕。
突然之间，网站应该是这样的：
如果您愿意，也可以在背景图片的顶部添加一个不透明的图层，以提高可读性。 您可以通过定位包装图层并添加不透明的rgba背景颜色来实现此目的。 （前3个数字决定颜色，最后一个数字是颜色固定的，0是不可见的，1是100％固体。）
.wrap {
background-color：rgba（0，0，0，0.4）
}
完成之后，应该看起来像这样：
设计侧边栏
我们也可以例如稍微调整边栏。
如果我想将更改应用到整个侧边栏，我使用.widget区域选择器。
我可以例如添加一个背景颜色到侧栏区域。
.widget-area {
background-color：＃4859f1;
}
看起来像这样
不是最惊人的变化，但你明白了。
我也可以特别针对小部件的标题，并给他们另一种背景颜色。
h2.widget-title {
background-color：#fff;
}
看起来像这样：
我们也可以做一些简单的事情，只需增加填充或在小部件之间添加一个边距，通过定位.widget元素。
.widget {
衬垫底部：6em;
}
或者我可以完全删除填充，移动背景颜色只影响个别小部件，并使其成为一个余量。
.widget-area {}
h2.widget-title {
background-color：#fff;