「Wordpress」- 自定义 CSS 样式 @20210427

问题描述

在 WordPress 中，我们能够访问 WordPress Themes 站点获取并安装自己喜欢的主题插件。

但是，这些主题终究不是我们自己开发的，因此我们依旧希望按照自身需求修改主题的某些内容。

该笔记将记录：在 WordPress 中，如果添加自定义 CSS 样式来修改主题，以及相关问题处理。

解决方案

在 WordPress 中，虽然能够直接编辑主题，但是当升级主题时，原始的主题文件会被覆盖，而此时我们的修改也会被覆盖。鉴于此，直接修改主题文件这并不是个好主意。

此次之外，我们能够通过 Additional CSS 来添加自定义 CSS 样式。在管理后台中，访问 Appearance / Customize / Additional CSS 来添加自定义样式。（我们还能够使用 Insert Headers and Footers 插件来添加自定义代码，参考 Additional Code 笔记）

下面是我们针对 MyWiki 主题的自定义样式：

/* Header */
#inner-header {
	display: none;
}

.search-main {
	padding-left: 0px;
	padding-right: 0px;
}

/* Content */
#main {
	border-left: 1px solid #E7E7E7;
}

#main #home-main article header a {
	text-indent: -0.6em;
}

#main #home-main article header h4{
	text-indent: -0.6em;
	border-bottom: 2px solid;
	font-size: 28px;
	padding-bottom: 7px;
}

#main #home-main article article h2{
	border-bottom: 2px solid;
	font-size: 25px;
	padding-bottom: 7px;
	padding-top: 10px;
	font-weight: bold;
}

#main #home-main article article h3{
	font-size: 20px;
	padding-bottom: 7px;
	padding-top: 10px;
	font-weight: bold;
}

#content-wrap p + p {
    margin-top: 20px;
}

#content-wrap div + p {
    margin-top: 20px;
}

#main #home-main nav {
	border-top: 2px solid #048eb0;
	font-size: 15px;
	padding-bottom: 7px;
	padding-top: 15px;
	margin-top: 30px;
}

/* Sidebar */
#sidebar1 {
	border-right: 1px solid #E7E7E7;
	margin-top: -5px;
}

#sidebar1 h4 {
	margin-bottom: 5px;
}

#sidebar1 ul {
	margin-left: 2px;
}
#sidebar1 #ezw_tco-3 .ez-toc-list-level-1 {
	padding-bottom: 0
}
#sidebar1 #ezw_tco-3 ul li ul li{
	margin-left: 15px;
}

#sidebar1 #recent-posts-4 li {
	list-style-type: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	text-indent: -0.6em;
}

注意事项：记录我们自定义 CSS 样式是为了备份。因此某次主题的操作，不知何故我们的自定义 CSS 设置丢失。

参考文献

Beginner's Guide: How to Use CSS in WordPress for Easy Style Tweaks