4. 个性化自己的网站

4. 个性化自己的网站

在前面的文章中,我们从服务器、域名,到安装Wordpress博客网站,到发布博客文章,进行了一系列介绍。目前,我们已经可以访问自己的网站。但是现在的网站页面是WordPress默认的布局和色彩样式,那我们如何自定义我们的网站样式呢?如何构建一个全新的页面布局?在这篇文章,我们将通过安装主题和插件,来个性化自己的网站。

本篇文章是建站系列教程中的第四篇,点击下面的链接访问之前的文章介绍。

普通人如何从0到1搭建个人网站

1. 购买云服务器和域名

2. 搭建最简单的博客网站

3. 发布第一篇博客文章

4. 个性化自己的网站

4.1 我们需要什么样的网站布局

如果我们对默认的网站布局和色彩样式不满意,我们可以设计自己的网站布局和色彩样式,并通过相关的插件实现页面的构造。但是,实际上,很多人都不知道自己需要什么样的网站布局,这时候你就需要一点过来人的建议。

我建议,大家不要挤破脑袋思考自己网站的布局,因为大家对网站都是刚上手,而所有人对网站的基本概念是需要时间来理解消化的。

现在很多优秀的主题提供的默认模版,非常简洁美观,对于我们个人网站而言,已经完全够用了。我们首先使用这些默认的网站模版,再往里面填充自己的必要(比如发表文章等)信息即可。

4.2 安装必要的主题和插件

根据许多国内外使用WordPress用户的建议,我们推荐使用Astra这个主题和Elementor这个页面可视化构建器。这两个都是付费的,但是都提供免费版本(已经够用了)。

因为WordPress.org经常拒绝国内云服务器的访问,我们选择手动上传主题和插件的方法。我们打开Astra和Elementor的下载页面,先下载这两个安装包:

Astra: The Most Lightweight & Customizable WordPress Theme

Elementor: The World's Leading WordPress Page Builder

如果你的电脑不能访问上面的网址,多试几次。如果还是不行,那就挂上番强(谐音)软件再试试,FQ软件下面我有一个推荐的,可以点击购买使用,买15块钱一个月的就行。WordPress居然还是没解决国内云服务器访问的问题,苦啊。

番强服务推荐

Astra下载-翻墙

Elementor下载

 

现在我们已经将Astra和Elementor的安装包下载到了本地电脑上,下面我们进行安装。

4.2.1 主题的安装-Astra

我们进入网站后台,点击左侧外观>主题,点击左上角添加,页面跳转后再点击左上角的上传主题,点击选择文件,在弹框中选择我们刚下载的astra安装包,点击现在安装,安装完成后,点击启用

若这一步忘记启用,也可以返回主题页面后再点击启用主题。至此我们完成了Astra主题的安装。

wordpress-手动安装主题-astra

现在我们再去网站主页看一下,会发现网站的样式变化了,这是因为我们的网站主题从默认的二零一九变成了Astra主题。别忘了我们说过的,主题就是控制网站长什么样,主色是什么,附加色是什么,布局怎么样等等功能的。

默认二零一九主题的网站主页效果

二零一九主题的主页效果


启用Astra主题之后的网站主页效果

Astra主题下的主页效果

4.2.2 插件的安装-Elementor

插件的安装也类似,进入网站后台,点击插件>安装插件,点击左上角上传插件,点击选择文件,在弹框中选择我们下载的elementor安装包。等待安装完成后,点击启用插件,网页会自动跳转到Elementor激活页面。是一个Youtube上的插件使用指导视频,有条件的可以看一下挺好的,我们直接点击右上角的X号关闭即可。bilibili上应该也有elementor的相关介绍,英文好又有FQ条件的,建议直接去Youtube上搜索elementor查看教程,毕竟软件是外国人写的,而且老外用WordPress的牛人很多,都愿意视频分享。

wordpress-手动安装插件-elementor

4.3 如何个性化自己的网站

4.3.1 利用主题自带功能个性化自己的网站

进入网站后台,我们点击外观>主题,在已启用的Astra这个主题模块上,点击自定义,网页自动跳转至主题自定义页面。在这个页面,我们可以自定义字体,网站颜色及其他功能。

4.3.2 利用Elementor构造自己的网站页面

Elementor是一个可视化页面编辑器,可视化的意思就是你在页面编辑过程中所做的操作,都直接反映在网站页面上,而不是传统的后台页面编辑,最后在跳转另一个页面预览那种。

我本来想做一个Elementor的构建网页的视频,但是思考了一下还是没有必要。对于一般的网站使用者,使用Astra的默认主题就够用了,对于特别需求的博主,可以自行搜索Elementor教程。

Elementor这个东西也不难。主要有两种功能:

  • 可以自由选择网站组件,比如图片,图标,文字,幻灯片,联系表单等等,所有这些组件构成了一个网站页面;
  • 有一些预置的页面模版,如果你喜欢,可以直接插入自己的网站,免去了自己一步步从头建立网页的麻烦;

下面还是简单演示下elementor的使用:

elementor操作简单演示

总结

这篇文章里,我们安装了Astra主题,可以通过后台自定义设置网站的颜色、字体、布置样式、标题栏和页脚等等,我们还安装了Elementor插件,当有特殊需求,比如建一个特定布置的网站的时候,我们可以使用Elementor来实现页面的建设。

读完这篇文章,我们的建站系列教程就完结了。从现在开始,我们已经是一名实至名归的网站站长了,希望大家在将来的站长之路上越走越远。分享自己的经验,不装逼,不埋怨,不懈怠,持续为社会贡献自己的价值。

普通人如何从0到1搭建个人网站

1. 购买云服务器和域名

2. 搭建最简单的博客网站

3. 发布第一篇博客文章

4. 个性化自己的网站

如果有任何问题,欢迎在网站上留言。今天是鼠年大年十五元宵节,因为冠状病毒的事情,一直窝在家里。这份教程我用了四五天的时间构思,撰写,着实花了不少心思,希望能对大家的建站之路有帮助。这里需要写一下声明,文章中的购买链接有返利佣金,我到时候看看够不够买服务器的==、

谢谢大家 🙂

 

胡不过,几千寒热博客博主

2020年2月8日

【本文原始地址-几千寒热】https://jiqianhanre.com/jian-wangzhan/gexinghua-wangzhan-jiaocheng.html

11人评论了“4. 个性化自己的网站”

  1. 从B站摸过来的,非常感谢大佬的教程 尤其是这种文字+gif图片版的 网上很多教程现在都是视频版 浪费时间又不容易抓重点 还不易反复查阅观看
    多亏了您的指导,小弟已经成功的搭建了自己的个人博客(虽然中途还是因为完全不懂程序走了不少弯路 但总算问题都解决了)
    真的特别感谢您的教程 祝您生活愉快!

  2. 你好,博主,有个问题想请教你。
    如果写文章的时候采取 Elementor 编辑器会和原始的 WordPress 编辑器冲突,
    例如Wordpress 原编辑器中可以设置评论什么的,但是一旦切换到 Elementor 模板去编辑,下面的评论框就没了
    而采用默认模板再选择 Elementor 去编辑,会出现 WordPress 里的元素,且无法修改

    最近因为这个问题很是烦躁!

    1. 可以在Elementor那边搜索“评论”组件,有个WordPress内置的评论组件会被调用。
      更过解决方案可搜索“how to add comments on wordpress elementor”

      1. 所以 WordPress 自带编辑器和 Elementor 编辑器是不是可以理解为两个分别独立的部分?

        即你用 WordPress添加的评论功能区块和页头文章名那部分在 Elementor 是无法修改的。

        唉,这两者又互斥又有交叉,实在弄混了头。。

        所以最好写文章就只在 Elementor 或者 WordPress 编辑器里选一个吗?喜欢Wordpress里面的文章编辑,但是修改模板有没有 Elementor方便

        1. 如果写文章[posts]的话建议就用WordPress的编辑器。
          Elementor主要用于设计页面[page],以前大家想要设计个好看的落地页很困难,但是有了Elementor就方便多了。

  3. 我是一个小白,看了你的教程之后,操作不了,我的是轻量型服务器,系统是windonw,有这种的教程吗?
    另外,弱弱问一下,如果我想搭建一个类似小型综合购物平台,应该如何操作,求指导和建议!

    1. 我这个是基于Linux的,Windows也可以但是不建议(网络上Windows的教程很少你碰到问题找不到解决方案)。商城可以使用WooCommerce插件,但是支付接口的问题很难解决,基本只能看没法付款。

发表评论

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