建站step3之调整wordpress主题

通过wordpress主题下载，可以找到自己喜欢的主题。

也可以通过一些wp主题网站去找你喜欢的，如2zzt

我是在2zzt上看到了vito主题，通过wordpress下载，然后自己做微调。

对wordpress主题进行调整有四种途径：

• wordpress自带主题自定义功能
• 使用他人开发的特定主题调整插件，如twentyseventeen
• 编辑主题css
• 深度源码级修改

第一、二种方法自己研究。第四种方法我也不会，但估计通常不是专项开发的人也用不着。这里说下我自己琢磨的第三种方法，该方法我先称之为css法。

css法适合你对主题框架大体满意，但对其他中的若干元素有调整需求的。以vito为题，它原来是如下图的。

我有以下改动需求

• 添加2233背景图
• 修改链接颜色（红蓝经典色）
• 总体透明，但文字不能透明

搞开发的都知道，总结需求可没那么简单，我也是边弄才渐渐总结出上述需求的。原始需求就是添加背景图，但随后逐渐衍生出第二三条需求。

可是不会CSS，怎么办？。方法如下

• 学习CSS最最最基础的选择器、元素属性、属性值设置，CSS最基本最基本的语法。
• F12找对应的选择器，在浏览器的动态样式表中先试着调效果。
• 调好的效果在wp的主题编辑器中，在主题样式表最后写上你的改动部分。

因为学过半天JS，所以好歹多少懂点选择器的概念，从简单的链接颜色入手，逐渐上手。例如先找到logo文字，找到它对应的选择器序列，然后试好颜色，再写到css文件里，挺OK的。 以下是我最终的调整内容。

.logo_container .ql_logo {
    color:#7cc3f1!important;
}
.logo_container a:hover {
    color:#ff8d81!important;
}

#jqueryslidemenu ul.nav li a {
    color:#7cc3f1!important;
}

#jqueryslidemenu ul.nav > li > a:hover {
    background-color: rgba(255,255,255, 0.6)!important;
    color:#ff8d81 !important;
}

.post-inside {
    background-color: rgba(255,255,255, 0.6)!important;
}
.sidebar-inside {
    background-color: rgba(255,255,255, 0.6)!important;
}

#sidebar .widget {
    color:#7cc3f1;
}

#sidebar .widget ul li a:hover {
    color:#ff8d81;
}

#footer {
    background-color: rgba(255,255,255, 0)!important;
    border:none;
}

#sidebar .widget_recent_entries ul li {
    border:none;
}

.post-image a img {
    opacity:0.8
}

.post-image img {
    opacity:0.8
}

#respond {
    background-color: rgba(255,255,255, 0.5)!important;
    border:none;
}

.post-navigation .nav-next a, .post-navigation .nav-previous a {
    background-color: rgba(255,255,255, 0)!important;
}