WordPress H标题美化

之前有发过修改WordPress标题的文章,不过上次那个感觉过于花里胡哨。现在还是喜欢这种简单的。

用好H标签一方面可以有效地帮助网站访问者快速理解文章结构,获取文章主要内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。

H标签页可以更鲜明的掌控文章权重,有利于SEO优化。

  • 效果如下图

%title插图%num

CSS样式代码

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 
.post-content h1 {
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	border-bottom: 0px solid red;
	padding: 5px 12px;
	border-left: 5px solid red;
	margin: 12px 0px;
	border-radius: 0rem;
}

.post-content h2 {
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	border-bottom: 0px solid #FF1493;
	padding: 5px 12px;
	border-left: 5px solid #FF1493;
	border-radius: 0rem;
	margin: 12px 0px;
}

.post-content h3 {
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	border-bottom: 0px solid #4169E1;
	padding: 5px 12px;
	border-left: 5px solid #4169E1;
	margin: 12px 0px;
	border-radius: 0rem;
}

.post-content h4 {
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	border-bottom: 0px solid #3CB371;
	padding: 5px 12px;
	border-left: 5px solid #3CB371;
	margin: 12px 0px;
	border-radius: 0rem;
}

.post-content h5 {
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	border-bottom: 0px solid #FFC0CB;
	padding: 5px 12px;
	border-left: 5px solid #FFC0CB;
	margin: 12px 0px;
	border-radius: 0rem;
}

相应的H标签对应相应颜色,使用方法只在在你主题里的Style.css替换相应样式即可。

哦对了,border-radius: 0rem;

这行是因为我主题全局圆角。重新定义一下样式不要圆角。标题方方愣愣的挺好看。你们可以删去这行。

%title插图%num

文章最后更新于 2020-02-14

给TA买糖
共{{data.count}}人
人已赞赏
WordpressWordPress优化WordPress插件wordpress美化前端

wordpress接入QQ等社交登录插件[QQWorld通行证]钻芒二开美化版

2019-6-16 20:37:38

wordpress美化网站源码

html+css 多彩滚动展示AD框前端显示代码

2019-11-15 22:12:46

5 条回复 A文章作者 M管理员
  1. 为啥我没效果

    • 样式已经提供了。照搬需要你和我的主题一样。没效果请找相对应的css类并修改

  2. ✎Mr_ye

    这个美化不错

  3. 😈 😕 😕 😕 😕 直接收藏博客

    • 嘿嘿