002. OceanWP – 万能WP主题安装和设置

002. OceanWP - 万能WP主题安装和设置 1

OceanWP主题介绍

OceanWP主题是一个轻量化, 可高度定制的免费主题,和Elementor结合可以快速实现对WordPress网站进行个性化定制。

  • 轻量化:即它的主题代码非常少,加载速度非常快,具有很好的用户体验
  • 高度定制化:即该主题可以对网页页面可以进行几乎任意需要的设置。

从Wordpress主题市场popular流行度可以看到,这个主题仅次于Wordpress程序自带的主题。可以说他是第三方主题中安装量最大的主题了,Wordpress自带的主题实在不敢恭维。

一、OceanWP安装

和所有其他主题安装一样,点击theme – Add new – 直接查看popular排名,即可看到该主题(排名可能会有变化),或者搜索OceanWP找到它,点击install安装,完成后Active激活。

安装完OceanWP主题后,建议删除其他主题,加快网站加载速度,减少安全漏洞。

002. OceanWP - 万能WP主题安装和设置 2
002. OceanWP - 万能WP主题安装和设置 3

安装完成后,访问网站前台,如果你感觉和自带的theme主题一样丑陋,正常反应,整个网站的美观度设计我们交给专业的Elementor去做。

二、Theme主题的作用区域

在对WordPress进行主题设置前,我们有必要先搞清楚theme主题在WordPress网站中的作用。

wordpress程序的作用:

不管多么复杂的网站,最终呈现出来给到用户看到的都是一个个网页,网页实际上就是一堆html语句和其他代码组成,浏览器接收到网页代码后,将其还原成对应的样式,也就是我们看到的网页的最终效果。

通过Chrome浏览器在任意网页上点击右键-查看网页源代码,我们就可以看到这个网页对应的源代码。如果需要对网页进行深度定制,就需要了解这些这些网页编程语言,这里我们可以不用这么深入。

以下是百度首页的网站源代码示例。

002. OceanWP - 万能WP主题安装和设置 4

我们大部分人是没法直接编写这些一堆的html语句来生成一个网页的。那怎么才能快速去生成这些网页呢,答案就是程序。所谓程序,简单理解就是他提供了适合普通用户的选项,让用户通过简单的设置就可以快速生成我们所需网页的代码。Wordpress就是这样一个网站的后台程序,通过访问 http://www.yourdomain.com/admin,我们只需要按照简单的设置就可以快速生成一个不太复杂的网站。

主题的作用:

wordpress提供的程序让我们可以不用通过编写代码就可生成复杂的网页,一个网站有不同的页面,每一个页面有不同的样子,如首页,产品页,博客页等,他们的页面风格各不相同。理论上我们可以根据不同的页面内容从空白开始设计每一个页面,但这样做显然效率太低,就像制作PPT时,我们并不会完全从空白开始设计,而且先找一个模板,从模板开始改动,主题之于网站就如模板对于PPT的作用。

如果我们仔细观察任何一个大型网站,他们的不同页面之间有很多共性的部分,以dell英文官网为例,除body主体部分外,header和footer部位,不管跳转到哪个页面,都是不变的。类似于我们编写word时候的页眉和页脚等辅助信息。

002. OceanWP - 万能WP主题安装和设置 5

这些不变的共性的部分,在wordpress程序中是由主题控制的,也就是主题控制了所有网页中页脚,页头等共性部分。如果需要对页头,页脚等共性部分进行修改,我们就需要对主题进行设置。

 网页页面中共性的部分包括但不限于:页面的logo,导航,侧边栏,页脚,字体,颜色。不同的主题包含的选项不一样。

OceanWP主题最大的优势就是几乎可以完全定制所有的共性部分,而且非常轻量。

搞清楚了主题所作用的范围后,接下来对其进行设置就变得简单了。

三、OceanWP主题字体颜色设置

点击菜单栏中的Customize定制,即可对主题进行快速设置。

Theme主题基础设置,主要有以下2个个方面:

    1. 网站默认Font字体
    2. 配色Color设置

002. OceanWP - 万能WP主题安装和设置 6
002. OceanWP - 万能WP主题安装和设置 7

A、默认字体设置

Typography字体,进入字体设置菜单,大部分网站设置以下4种即够用。

  • General通用 – 设置网站默认字体
  • Body正文 — 网站正文内容字体格式
  • Heading 1 — H1标签字体
  • Heading 2— H2标签字体

General通用设置,如果在网站在国内的服务器或者需要在国内访问,可以勾选 Disable google fonts, 禁用google字体,否则会导致网站打开很慢,原因是因为大部分字体都需要连接google的服务器,国内访问不了Google。

002. OceanWP - 万能WP主题安装和设置 8

https://fonts.google.com/ 可以找到上千种字体,目前对中文字体的支持有限,但不影响显示。

如看到好的网站字体,可以用WhatFont插件查看网站对应的字符集和字体大小等设置,以Apple.com苹果官网为例,WhatFont可以快速查看苹果官网采用的是什么字体和weight等参数。如果对字符集设计没有感觉,直接拿来用即可。

002. OceanWP - 万能WP主题安装和设置 9

在设计之前,可以先用elementor拖拽几个文本框进入网页内容中,分别设置为H1, H2, body,这样就可以实时看到字体设计的显示效果。

整个网站请尽量使用不超过2种字符集,大部分时候应该只采用一种字符集。

Tips技巧提示:正文不要用全黑,不要用全黑,不要用全黑。

002. OceanWP - 万能WP主题安装和设置 10

B、颜色设置

配色是一门专业的学问,没有一定的时间积累和审美,普通人很难驾驭颜色的搭配。但开始颜色设置之前,我们必须有个最基本的颜色使用法则:一个网站不超过3种颜色(黑白灰不算)

这里提供两种方法给到大家:

  1.  “偷”。颜色是没有专利这一说法的,我们完全可以借鉴知名大品牌的网站颜色搭配,如apple,LV,gucci等大品牌官网的配色直接拿来用就可以了。Chrome中有个Colorzilla插件,可以快速获取颜色的值。
  2.  用专业的配色工具,如 colors.co 这样的网站将固定的颜色搭配组合显示出来了,直接拿来用即可。

002. OceanWP - 万能WP主题安装和设置 11

Primary Color:主颜色
Hover color: 鼠标移动到该区域后的颜色
Background:背景颜色,默认白色

002. OceanWP - 万能WP主题安装和设置 12

以上三个值影响的区域范围,大部分的颜色控制区域我们交给elementor。

002. OceanWP - 万能WP主题安装和设置 13

3人评论了“002. OceanWP – 万能WP主题安装和设置”

    1. 一般我就是这么设置的,如果网页所用的字体和颜色都已经确定了,尽量用主题的,这样就不用在设计的时候再单独设置字体和颜色了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据