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

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

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

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

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

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

  • 默认自定义

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

  • 有用的插件

    • 使用任何字体
    • 自定义Twitter Feeds

    • Jetpack


  • 使用代码自定义二十万十五

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

  • 结论

默认主题自定义

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

Twenty Fifteen theme options 有可用的自定义选项,22fifteen.

网站标识

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

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

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

Two types of Intro 标题和字幕之间的差异和小部件.

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

颜色

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

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

Color variations 某些颜色变化.

标题和背景图像

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

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

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

导航

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

如果您尚未尝试在自定义程序中管理的窗口小部件,但这是一个完美的机会.它在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的更多信息.

有用插件

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

使用任何字体

Use Any Font plugin 使用任何字体插件.

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

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

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

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

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

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

自定义Twitter Feeds


Custom Twitter Feeds plugin 自定义Twitter Feeds 插件.

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

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

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

Jetpack


Jetpack plugin banner 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 image credit. 我在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选择器的所有部分的字体大小.如果您想要文本有点更大,您可能希望删除此功能.

Image credit. 图像信用和Jetpack Shareer.

删除作者部分

问题是什么?

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

如何修复它?

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

解决方案

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

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

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

加载GIST BD0C716AB1A6139CA96E8D730CBFAE7.

更改内容框颜色

问题是什么?

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

如何修复它?

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

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

解决方案

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

加载GIST A80B6FF32A477F8654757DC41EC230B9

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

创建无边框框

问题是什么?

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

Slider Slider 边界和正则帖子.

如何修复它?

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

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

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

解决方案

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

中来完成
加载GIST 575E64278E39ADD43569D6B35861B711

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

加载GIST DD200421329E1B74568F95C030F7D35D

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

结论

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

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

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

6
订阅评论
提醒
0 评论
内联反馈
查看所有评论