如何定制二十万十五以使其成为自己的

我最近称之为新的二十五件默认Wordpress主题，以获得清洁的外观，专注于共享美丽的内容.

我喜欢它的垂直节奏，侧边栏的布局和响应行为.它真的是一个美丽的主题.

但是在我喜欢它看起来的看起来，总是有空间来实现自己的空间.二十五岁提供了一些自定义选项，但您可能需要更多地对待您的喜好.

在这篇文章中，我会看看一些方法，你可以将已经令人敬畏的主题转变为适合您的网站设计.我们查看内置的自定义选项，一些插件添加进一步的风格改进，以及对某些问题的自编码解决方案，虽然是次要的问题.

在本文的过程中，我们将探索:

• 默认自定义
  

  • 网站标识
  • 颜色
  • 标题和背景图像
  • 导航
  • 自定义菜单和社会链接
  • 小部件
  • 主页设置
  • 额外的css

  
  
• 有用的插件
  

  • 使用任何字体
  • 自定义Twitter Feeds
  
  
  • Jetpack
  
  
  
  
• 使用代码自定义二十万十五
  

  • 将侧边栏移动到右侧
  • 在下面的帖子中添加图像贷记
  • 删除作者部分
  • 更改内容框颜色
  • 创建无边框框

  
  
• 结论

默认主题自定义

要成为外观>自定义部分，从WordPress仪表板.这应该带有以下选项:

有可用的自定义选项，22fifteen.

网站标识

本周的自定义程序允许您配置您网站的标题和标语，以及自定义徽标.这是几乎任何主题的标准功能.

此外，您可以选择(通过复选框)完全禁用.如果您想通过子主题添加带有徽标的标题图形，这非常有用.

我发现这个标题和标语和标语也可以很好地用于快速生物.我更喜欢使用小部件.

标题和字幕之间的差异和小部件.

上面的屏幕截图显示左侧的标题和标记，以及右侧的常规文本窗口小部件.

颜色

颜色部分可以访问最可见的自定义选项-更改颜色.有四个设置:

• 基色方案:允许您为内容和侧栏选择颜色预设.
• 背景颜色:设置主内容区域的背景颜色.内容框将保留原始颜色.
• 标题和侧栏文本颜色:设置标题和侧边栏的文本颜色.侧边栏成为较小屏幕上的标题.
• 标题和侧边栏背景颜色:设置侧栏/标题区域的背景颜色.

标题和背景图像

这两个部分包含一个设置，每个设置分别为侧栏和内容区域的背景图像管理.即使您在此处使用图像，请务必设置井显示的背景颜色.如果出现问题并且您的图像不加载，读者仍将看到视觉上令人愉悦的东西.

为侧边栏和内容设置的背景图像.

如果您想知道，没有办法在跨越单个背景图像跨度，并具有侧栏黑色，具有一些不透明度.上面的屏幕截图看起来像是这样，但它实际上是两个图像.

导航

导航部分允许您将菜单分配给主题中可用的两个菜单位置.有一个名为"主菜单"的常规页面菜单和名为"社交链接菜单"的社交菜单.我们稍后会更详细地查看这些细节，从菜单部分中分配它们.

如果您尚未尝试在自定义程序中管理的窗口小部件，但这是一个完美的机会.它在WordPress 3.9中大修，比以前更具可用性.您可以从自定义程序创建和预览小部件-一个优秀的功能.

使用静态前页部分，您可以选择以前创建的页面用作前页.如果您想在首页上显示其他帖子，请使用此功能.

自定义菜单和社交链接

从外观>菜单，您可以为自己组装菜单.这里没有什么新鲜事.如果您想了解这项工作如何看看WordPress菜单用户指南.

二十五十五确实提供了一个添加的功能，创建社交图标菜单的选项，其中包含与您喜爱的服务的链接.

常规菜单和社交链接菜单的示例.

创建社交菜单时，您应该创建常规菜单并链接到支持的站点.您不需要担心您命名的菜单项，正确的图标将根据提供的链接使用.

以下是您可以链接到的可用社交网站的完整列表:

• Codepen
• Digg
• dribbble
• Dropbox
• 电子邮件(mailto:links)
• Facebook
• flickr
• foursquare
• github
• Google +
• Instagram
• linkedin
• 路径
• pinterest
• 口袋
• Poldaddy
• reddit
• RSS Feed(带/饲料的URL/)

spotify

• skype
• Stumbleupon
• tumblr
• 抽搐
• Twitter
• vimeo
• wordpress
• YouTube

窗口小部件

您可以通过窗口小部件部分添加各种窗口小部件.导航到自定义>小部件，然后单击蓝色 plus + 按钮，然后从可用块中进行选择.

主页设置

您可以选择是否希望您的主页成为最新的帖子或静态页面，然后选择这些页面来自下拉菜单.

附加CSS

此处您可以通过在此处添加您自己的CSS代码来进一步自定义您网站的布局和外观.点击此处了解有关CSS的更多信息.

有用插件

如果默认的自定义是不足以量身定制二十五到您的喜好，这里有几个插件，可提供额外的样式选项.

使用任何字体

使用任何字体插件.

二十五万使用Noto Serif和Noto Sans，Google字体可获得两种伟大的字体.

遗憾的是，没有内置的方式来自定义字体系列，但是一个名为使用任何字体的插件可以实现.

使用任何字体为您提供自由，以在Wordpress网站上安装自定义字体.事实上，它允许您使用多个字体.

插件支持字体格式，包括TTF，OTF，WOFF，但只需要以单格式上传字体-浏览器所需的任何其他版本由插件字体转换器自动转换.这不仅是这种更方便的，而且还改善了你的负载时间.

使用任何字体支持所有主要浏览器，包括IE，EDGE，Firefox，Chrome，Safari，iOS，Android，Opera等.您可以直接使用上传的自定义字体从WordPress Classic Editor，Gutenberg编辑器以及其他流行的网站建设者的长短列表.

这是一种极其强大的方式，可以在不修改主题代码的情况下向主题添加字体.

自定义Twitter Feeds

向您的网站添加一个Twitter Feed可能是让人们与您互动的最佳事情之一.自定义Twitter Feeds插件是我遇到的这种类型中最好的.

您可以在网站上的任何页面，侧栏或小部件中显示完全可定制的，响应和搜索引擎爬行的Twitter.

自定义Twitter Feeds插件将显示完全符合您网站的外观和感觉的推文，包括大量的自定义选项.Easy Setup包括配置，自定义，样式和显示，并内置支持.点击此处查看设置它的分步说明.

Jetpack

下载数量超过1400万，Jetpack是最受欢迎的插件之一.它是由大脑信任在 Automattic，的中制造的，并且包括可以选择性地打开或关闭的大量功能.

瓷砖画廊是我喜欢的一个这样的功能，自动从您的画廊短路创建砌体风格库.这个美的美是在插入你的画廊时不需要做任何特别的事情，只需打开该功能.

Jetpack具有许多额外的有用功能，包括站点安全性，速度和性能和站点统计数据.与顶级WordPress插件/技术产品的设计工具和集成也是包装的一部分.

使用代码

自定义二十五十个

在我们陷入自定义主题之前，我们应该创建一个儿童主题.

这非常简单，但如果您不确定如何执行此操作，请查看我们的方便指南给儿童主题.子主题允许您在不触摸其代码的情况下修改现有主题.这使您可以在不丢失更改的情况下更新父主题.

一旦您创建了孩子主题，您就可以开始实现一些自定义更改.

将侧栏移动到右侧

问题是什么?

如果您更喜欢它，请不要选择将侧边栏切换到页面右侧.

如何修复它?

要将侧边栏移动到右侧，您需要只将几种样式添加到子主题中的style.css文件中.

解决方案

这是完整的代码，解释会随之而来:

加载GIST C55AA0554308FED8E7B764DF96580BAC.
所以我怎么知道这样做?我只是使用Chrome Developer工具来弄清楚样式是什么.点击 shift + command + c 以在侧栏上显示菜单并在OS X中悬停).侧边栏(.sidebar)有一些规则默认将其推向左侧.主要内容区域(.site-content)具有将其推向左侧的规则.

我扭转了这些规则，注意正确覆盖它们.这样做时要小心，因为某些规则需要设置为默认值.例如:更改浮动时，您可以简单地说float:right.由于这被定义为left，原本是覆盖规则.但是，如果规则被设置为margin-left:20px;，则使用margin-right:20px在子主题中定义margin-right:20px来重写它.

你说该元素应该具有20px右边缘除有左边距.在这些情况下，您应该写入:margin-left:auto; margin-right:20px;.当你写完所有规则时，这很明显，但我有时会在覆革规则时犯下这个错误，我花了一点时间弄清楚了什么错了！

拼图的最后一块是要确保背景分隔符与我们的新布局一起使用.使用::before伪选择器添加分离器.通过确保此元素的位置固定在右侧而不是左侧，我们已完成侧边栏更改.

务必在媒体查询中包装代码.我们只想将这些样式应用于大型屏幕.在较小的屏幕上，侧边栏仍然应该成为标题.默认情况下，在小型桌面屏幕上发生，在955px或59.6875EM.

在帖子

下面添加图像信用

问题是什么?

我想说谁是负责人，如果我使用来自网上的图像，但没有选项可以在二十五十五中添加图像信用.

如何修复它?

使用高级自定义字段，并通过子主题将信息放在模板中.我会给你一个如何在我的网站上做到这一点的破败，但对于更多的非正式信息，看看用WordPress创建一个锻炼日记，看看它是如何工作的.

解决方案

在高级自定义字段中，我创建了一个wysiwyg文本字段，每个帖子编辑页面显示.我可以使它成为一个URL字段，但这会限制我在前端.

通过使用文本字段，如果我喜欢，我可以自由地写一个关于图像的句子或两个.

我在ACF中创建的图像信用字段.

此时您可以向所有帖子添加图像信用，但它们不会在前端显示.打开您的functions.php文件，让我们使用钩子在帖子内容后挂钩Tack on this Info:

加载GIST BB050C01433D86D98C09D149FFBA4E3E.

此代码占据后的原始内容，并在向其添加我们的图像信用字符串后返回它.请注意，我使用了特定的HTML格式:

加载GIST 7F01B1787815C3BAD94687EB524B0368

我这样做的原因是Jetpack使用相同的结构来输出其一些内容，如Sharer部分.我希望它模仿这样，所以我用相同的HTML.在测试之前，进入你的style.css以调整一下.使用以下内容使其看起来就像它是一个Jetpack模块:

加载GIST 5FA6C0F61D6D2DD5289A904B8268B5B0

请注意，在最终的情况下，我修改了使用.after-post-section.section-content选择器的所有部分的字体大小.如果您想要文本有点更大，您可能希望删除此功能.

图像信用和Jetpack Shareer.

删除作者部分

问题是什么?

一个作者生物显示在每个帖子的底部，看起来很棒，但如果您有一个作者网站，因此它完全不必要，因为您的信息可能会在侧栏中显示.

如何修复它?

您可以使用这两种方式:您可以使用样式表来简单地从视图中删除它，或者您可以完全删除功能.

解决方案

从视图删除它转到style.css文件并添加以下内容:.author-info { display:none; }.如果选择此方法，则文本仍将存在，但它将隐藏在视图中.

如果您想在不需要时阻止内容加载，您可以完全删除它，HTML和所有.为此，您需要将content.php文件从父主题复制并粘贴到您的子主题中.

打开文件并查找以//Author Bio开头的部分.将所有内容从起始PHP标记中删除到结束PHP标记.以下是需要删除的完整代码:

加载GIST BD0C716AB1A6139CA96E8D730CBFAE7.

更改内容框颜色

问题是什么?

主题自定义程序不允许您更改内容框的颜色.

如何修复它?

您可以更改内容框的颜色(以及它们内部的文本)以进行更有趣的模式.您只需修改样式，因此可以在您的孩子主题样式表中编写一切.

在二十十五中的自定义彩色框.

解决方案

为了达到上面的屏幕截图中看到的效果，我必须改变几种样式.更改框的背景和文本颜色是不够的，因为链接和其他元素可能会覆盖它们.

加载GIST A80B6FF32A477F8654757DC41EC230B9

如果您想获得与上述设计的完全相同的设计，对于内容背景和主题自定义程序中的侧栏背景的#303030.照顾后内容中的某些项目可能会覆盖这些样式.您可以在屏幕截图- pre标记中看到一个示例.这在设计中看起来不错，但其他元素可能会覆盖，结果较少.如果是这种情况，只需将新规则添加到样式表中以使用自己的颜色.

创建无边框框

问题是什么?

在某些情况下，您可能想要为滑块创建无边框框.看看下面的屏幕截图以了解问题更好.

边界和正则帖子.

如何修复它?

我们可以将帖子格式设置为无边框，但我更愿意离开它们，设计很棒.此外，我可能想在带有边界和无边界盒的框内显示图像.

我提到的解决方案又涉及高级自定义字段.我创建了一个真/假类型控制，为每个帖子的编辑屏幕输出.这允许我设置我是否希望特定帖子是无边框的.

无边界控件仅在先前讨论的图像信用区域下.

解决方案

我们将在加载POST并输出特殊类时检测此框的状态，如果它是票证.这可以通过将功能挂钩到post_class钩子:

中来完成
加载GIST 575E64278E39ADD43569D6B35861B711

我们使用get_field函数来看看是否勾选无边界框.如果是，我们将它添加到将添加到帖子的类别数组中.从这里出来，它在很大程度上是你想做的主观.您可以删除边框但保持元框，删除元框，完全删除元框等.我选择删除所有内容:

加载GIST DD200421329E1B74568F95C030F7D35D

顺便说一句，如果您想将永久滑块添加到您的主页顶部，这是这样做的完美方式.您需要做的就是添加一个滑块作为帖子内容，并将帖子标记为粘性.在我的演示中，我使用了元滑块来创建滑块.

结论

可以看出，有许多方法可以自定义二十万十五以使其适合您.内置自定义可让您控制某些基本设置，而插件可以执行很多才能扩展已有令人敬畏的主题.

如果您需要更多的根本性变化，几乎可以通过子主题实现任何东西.您可以删除元素，添加自己的元素，并以模块化方式定制所有内容的样式-真正使其成为您自己的.

编辑器注意: 此帖子已更新以获得准确性和相关性.
[最初已发布:2015年1月/修订:3月2022]