• 搬瓦工 最新优惠码及购买使用教程 传送门     VIRMACH 7折优惠码及购买使用教程 传送门     Vultr 最新优惠及购买使用教程 传送门

WordPress如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

WordPress 有木有同情心 1年前 (2017-11-02) 835次浏览 0个评论 扫描二维码

WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

我们如果使用 WordPress 建站,那么就肯定需要选择合适的主题。而市面上主题虽多,但是想找到一款 100%满意的,难度却很大。再好的主题,可能也会有一些小细节,与我们的审美观有差别。当然,全方位付费定制的主题例外。

  • 修改主题简单吗

一款主题,除了自带的调整选项外,其它的外观设置,我们是不能直接进行的,需要修改主题文件里的一些参数。一提到参数,部分朋友可能就退缩了:难度太大了吧!

其实未必,今天我们就介绍一下,如何简单直观地修改主题中的字体大小、字体颜色、字间距、以及主题中的一些颜色等常用参数。当然,还有其它很多参数也是可以修改的,本文算是抛砖引玉吧。

  • 准备工作

为了方便操作,最好选用火狐或 Chrome 浏览器进行相关操作。

  • 修改方法

1.用火狐浏览器打开网站想要修改的界面,在要修改的地方点击右键,选择查看元素:

WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

2.接下来在浏览器下方位置,会出现查看器窗口,窗口里是相关代码。默认选中的那一行,就是我们想要修改的地方。右边的规则窗口就是对应的相关参数,其中红色字体的为参数名称,后面的蓝色字体为参数,为可修改项。

WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

3.点击规则窗口中的参数,就可以进行相关修改了,网站会实时显示修改后的效果。需要说明的是,这里的修改只是方便我们预览,只在我们自己的浏览器生效,网站本身的参数并没有实际修改。下图红框中为参数所在的文件,及对应代码的行数,方便我们后期准确定位。

WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

几个常用参数:

color:颜色,使用 16 进制颜色,比如#000000 为黑色。

font-size:字体大小。

letter-spacing:字间距,以 pt 为单位。

Line-height:行高。

background:背景颜色。

padding:内边距。

margin:外边距。

4.需要注意的是,规则窗口中,可能有部分参数名下有多个规则,其中划删除线的是没有生效的规则,我们可以忽略它。找到不带删除线的相关规则,即生效的规则进行修改,如下图:

WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程

5.在浏览器中调试完毕,确认想要的效果后,就可以对相关文件进行真正的修改了。配置参数一般都在主题中的 Style.css 文件中, 可以根据个人情况选择以下两种方法进行修改:(善用 Ctrl+F 搜索相关参数)

  1. 打开 WordPress 后台管理界面,点击左侧菜单中的外观-编辑,打开之后默认就是 Style.css 文件,如果不是的话手动选择。然后就可以直接进行编辑了。
  2. 也可以用 Winscp 连接 VPS 服务器,直接打开 style.css 文件进行修改

6.编辑好之后记得保存,保存完毕后,回到网站界面,Ctrl+F5 强制刷新,查看修改后的效果。

 


直呼过瘾 , 版权所有丨如未注明 , 均为原创丨
原文链接:WordPress 如何自定义修改主题的颜色 字间距 字体大小 字体颜色等简单教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
error: