UI设计师如何运用HTML CSS设计改造WordPress Theme

Slide
Powered by YANGPENG
前言
很多设计师都会通过不同的建站平台打造自己的个人网站，在一些个性化宽容度比较足的平台上面，例如Wrodpress平台，有琳琅满目的插件及主题提供给建站者使用，但也因为该平台是境外的web搭建平台，所以主题及插件的本地化做的都不够优秀；在我们使用wordpress搭建网站的时候，难免出现选择的主题不符合自己的设计需求，这个时候我们就可以运用wordpress高自由度的自定义功能来对网站主题进行代码层面的编辑和修改以达到自己想要的目的和网页视觉风格。

1.主题认知

wordpress主题是wordpress官方及自由开发者封装好的可直接进行安装使用的网页模板，目前截止发文前，wordpress官方可查询到的主题有8137种之多，并且有很多自由开发者及商业性质的开发者也提供了不计其数的免费及收费主题，同时安装主题也是使用wordpress搭建网页必要环节，我们需要在主题商店里找到符合自己领域符合自己业务需求的网页主题安装使用，本文演示以wordpress主题商店里的“Eisai”为例来进行演示（Eisai主题是免费主题，可在wordpress主题商店进行安装）

Eisai主题展示

主题链接：https://webminimalism.com/wordpress-themes/eisai/

改造后的Eisai主题展示

页面链接：uppp.cc

2.主题改造区域

  • 头部区域
  • 侧方导航菜单区域
  •  页尾区域
  • 特定的CSS样式

1.头部区域

“Eisai”主题的初始头部样式的宽度为1400px，这里因为我添加了一个全页宽的幻灯片，所以我将头部样式改为了跟随浏览器宽度自适应，这样头部的宽度就可以匹配幻灯片的宽度。
首先我们使用火狐或chrome浏览器调出代码检查器，找到网页header所调用的样式；
  • tag1 为Eisai主题的头部区域；
  • tag2 为头部区域的源码；
  • tag3 为头部所调用的样式代码（实际上下方的属性都是头部所调用的class代码，我仅标出头部的宽度控制代码；
宽度控制源码展示如下： 
.uk-container-large {
    max-width: 1400px;
}
这里我们可以看到 头部区域的最大宽度（max-width：1400px）是指定的一个固定的宽度，而我们需要做的就是改变这个值；
修改样式代码如下： 
.uk-container-large {
    max-width: inherit;
}
inherit值指继承父级元素的宽度；可以浅显的理解为修改为此属性后便可以网页的宽度自动匹配头部的宽度；
修改主题源码的方式有多种，这里列举两种常用的方法（第一种方法有一定风险性，推荐第二种方法）
  1. 在wordpress菜单栏 外观>主题编辑器>主题文件 中找到样式表找到对应的样式进行修改
  2. 在wordpress菜单栏 外观>自定义 进入到自定义中找到主题额外的CSS输入框输入修改后的样式段落代码即可

2.侧方导航菜单区域

考虑到原主题页面主题部分的样式能够满足我的需求，所以对这个主题的主体部分的自定义不是很大，主要改动了一些间距及字体大小，方法和修改头部区域是一致的，只需要先找到页面对应的html代码，以下我主要以修改展示修改侧方导航样式的方法来作为展示。

改造前的侧方导航

我个人觉得侧方菜单覆盖面积过于宽泛，菜单字号过大，基于此前提下对侧方导航进行样式优化。

首先找到侧方导航的代码区域

  • tag1 为导航在页面上的呈现；
  • tag2 为导航对应的html代码区域；
  • tag3 为我们需要修改导航覆盖宽度的值；
代码如下： 
@media (min-width: 960px)
<style>
.uk-offcanvas-bar {
    left: -700px;
    width: 700px;
    padding: 40px 40px;
}
修改后的代码如下： 
@media (min-width: 960px)
<style>
.uk-offcanvas-bar {
    left: -700px;
    width: 400px;
    padding: 40px 40px;
}

修改导航宽度后，接着进行导航文本大小的修改，按照之前的方法找到导航按钮的文本代码；

我们找到Eisai对应的a标签，然后将样式中的文本字号大小的5rem修改为3rem，就可以得到一个合适的字号大小，当然此处可以根据自己的喜好进行调试
修改后的字号如下： 
.primary-navigation > li > a {
    font-size: 3rem;
}
以上便是调整页面上的样式细节的方法，可以按照此方法修改页面各处你认为可以优化的样式属性。

3.页尾部位

接下来是稍微有点难度的页尾版权文本替换及样式修改，众所周知每个wordpress的页尾都有该主题开发者预写的版权信息，很多人在搭建自己的个人博客或者个人作品页的时候是不希望展示这些信息的；同时还有部分服务器在大陆的网站搭建者，会被服务商要求网站备案，那么就会涉及到在网站页尾需要强制预留备案号等信息，这个时候你若不想使用主题自带的页尾小组件功能来预留备案号需不需导致影响页面整体布局及美观，我们就可以使用替换原主题作者版权的方式来将我们自己的备案信息鸠占鹊巢。 因为页尾部位涉及的内容较为宽泛，且这篇文章已经过长，我将页尾的版权文本去除或替换以及页尾的样式布局修改放到另一篇专题文章中展示

欢迎访问：uppp.cc