WordPress 自建房实录 - - DiVi 主题五页面建站篇(下)

WordPress 自建房实录 - - DiVi 主题五页面建站篇(下)

看到这里时, 其实你已经创建了一个全新的 WordPress 展示站, Blog, 即博客文章列表, 并不是一个网站中必须的.

开办一个网站, 说明你是谁, 你提供什么服务, 你的作品有哪些, 这些是必要的内容.

现在, 你回头看 WordPress 网站自建房实录 - 索引篇 中所做的类比, 搭建一个 WordPress 网站, 是不是就像在老家自建房. 它有一些步骤, 但远远没有你想象的那么难, 甚至可以说, 建站, 仅仅是个力气活, 没有技术可言.

在搭建过程中, 你要付出的主要是汗水, 如果是看我写的这几篇文章, 足以确保你搭建一个一模一样的网站起来, 核心只有两个字"照做"

万事皆有开头, 开头是最难的, 也不要指望一上来就和教程完成的完全一样, 你只需要照猫画虎即可, 有了这个"虎"形, 你才可能最终画出自己的"虎".

建站很难么, 功能完善的网站, 确实很难, 难到需要一整个团队, 半年才能出一个成品; 但也可以很容易, 像我们这样建一个展示站, 照做, 几天就可以了.

但是, 即使有一步电梯出现在你面前, 你需要做的, 必须包含迈出第一步, 在这个系列文章中, 第一步就是 2021 Wordpress 小白新手建站教程保姆版 - 腾讯宝塔面板建站篇 , 先有这个基础, 你才能走到现在, 最终, 你会看到 hysen.me 这样的网站在你的手中诞生.



当然, 有各种高端人士会写高端标题 "一小时搞定 xxx", 你去看, 去做, 如果 10 小时还没搞定, 欢迎你回来看我这个, 需要几天时间的 WordPress自建站安装实录, 确保你只要照做, 即可做一个一样的网站出来.

现在, 我们进入到系列文章的最后一篇, 如何在 DiVi主题中创建博客文章, 下面进入正题.


目标页面 : 创建 如下图所示的 Blog, 其中包含 6 篇 POST 文章, 即常说的博客文章.



目标1: Wordpress Blog 相关基本设置:

  • 1.1 设置 Blog Page 这个页面显示 Post, 及博客文章
  • 1.2 给 Post 文章分为两类: Self Improvment 以及 Other
  • 1.3 设置 Wordpress 中 Link 的颜色为 #2F7BCB.



  • 1.1 设置 Blog Page 这个页面显示 Post, 及博客文章 Dashboard - Settings - Reading - Your homepage displays - A static page - Post Page -- 选 Blog . 点击 Save 保存设置.


  • 1.2 给 POST 分类为两类: Dashboard - Posts - Categories - Add New Category: name 中输入 Other slug 中输入 other 点击下方按钮Add New Category, 这样就增加了一个 Other 类别, 在右侧分类列表可以看到结果.

    同理增加 Self Improvement 类别.


  • 1.3 设置 Wordpress 中 Link 的颜色为 #2F7BCB.

网站前台, 任意页面, 比如 Contact 或者 Blog 页面.左上角 Site Title 处 悬浮鼠标指针. Site Title - Theme Customizer - General Settings - Typography - BODY LINK COLOR - #2F7BCB. 输入后点一下回车, 确认颜色变化后, 再点击上方的 Published. 设置完毕.

目标 2. 发布六篇 Post 文章

  • 2.1 创建第一个 POST , 名称: How to Expand Your Influence
  • 2.2 创建第2个 POST, 含有视频, 图片和文章链接及其他设置, 名称为How do you Spend Your Time in Life.
  • 2.3 创建总计 6 个 Blog(包含之前的两篇 POST), 给文章分类, 并使用 Featured 图片, 最后用随机拉丁文填充.


  • 2.1 创建第一个 POST , 名称: How to Expand Your Influence

如上图所示, 常用创建 Post 的方式有两种. 如果你在网站首页, 悬浮光标到左上方的 New -- 选择 Post. 如果你在网站后台, Dashboard - Posts -- 点击 Add New.

创建之后, 点击 Use Default Editor , 使用默认编辑器.


上图是 Blog 编辑的页面, 已经填入文章标题及随机拉丁文的文字.

左侧是文章标题和文章内容, 右侧上方设置小齿轮, 单击可切换全屏编辑, 还有Post 和 Block 双标签页菜单. 最右上角的三个小点是 POST OPTION 菜单.

  • 2.1.1 右侧 Post标签页中, 设置两项: Categories -- 选择 Self Improvement Featured image -- 上传当前 POST 文章的标题图片.

最后, 点击 Publish 发布文章. 一篇带标题图片的博文就发布成功了. 此时, 在 hysen.me/blog 下可以看到刚刚发布的第一篇Post: How to Expand Your Influence

  • 2.2 创建第2个 POST, 含有视频, 图片和文章链接, 名称为How do you Spend Your Time in Life.
    • 2.2.1 填入文章标题及全部所需文字内容.


2.2.2 加入第一张图片.

光标悬浮在两行文字之间的空白处, 会出现 add block 的菜单, 点击它

  • 出现了包含 6 个项目 Paragraph, Heading, Image 等的菜单, 如果想查看全部菜单, 点击黑底白字的 Browse All, 里面共有 66 项 Blocks.

在众多 Blocks 中选择 Image, 然后选择从 Media Library 上传图片.

在 wordpress 5.6.2 + Divi 4.9 版本中, 共有 66 项可以添加的 Blocks. Text: 11 项 Media: 7 项 Design: 7 项 Widgets: 11项 Embeds: 30 项
概念: Wordpress Gutenberg 编辑器中的 BLOCKS.
在 Gutenberg 中, 文章是由一个个 blocks 构成的, 其中包括常见的 段落 blocks, 图片 blocks, 视频 blocks 等 66 个 blocks.
Wordpress 中的默认编辑器名字叫做 Gutenberg, 早年使用量最广的经典的编辑器, 将于 2021 年年底不再支持. The Classic Editor plugin will be officially supported until December 31, 2021



图片上传后, 光标悬浮到图片上, 会出现横条编辑菜单, 选择 Change alignment 项目中的 Align right, 将图片向右对齐. 图片上方横条编辑菜单中的上下箭头, 单击 Move Down/up 可以上下移动图片的位置.

图片左侧和底线正中央的原点可以拖动编辑图片大小. 图片上方横条编辑菜单中最右侧的三个小点, 点击是下拉菜单, 最下方是Remove block, 用于删除当前的 Blocks, 包括所有的 66 种 blocks 都可以这样删除, 图片, 段落等.



  • 2.2.3 同理添加第二张照片(操作见上图最左图), 向左靠齐. 视排版需要上下调整图片的位置.
  • 2.2.4 加入文章链接:

选中你想链接的文字 How to expand your influence, 在弹出的菜单中点击 Link 图标, 在出现的输入框中输入 关键字 influence, 下方会出现之前的, 第一篇建立的 Post 链接, 选中它, 链接完成. 链接效果见上图最后一张图片.


  • 2.2.5 加入视频 Blocks

光标悬浮在两行文字之间的空白处, 会出现 add block 的菜单, 点击它, 输入关键字 Video, 在下方六项菜单中, 选中 Video. 在出现的 Video 菜单中, 选择从 Media Library 上传视频.

视频上传完毕后, 上方的横幅菜单, 除了可以通过上下箭头 move up/down 移动视频 blocks, 还可以通过光标所在的 Drag 图标拖动.

  • 2.2.6 设置一个含有 H4 标题的列表项
    • 2.2.6.1 设置 H4 标题 blocks 选中文字 Read More, 在光标小手所在的 Change block type or style 下拉菜单中, 选择标题字体, 随后按图中所示, 选择字号为 H4.
    • 2.2.6.2 设置 List blocks 全部选中下方的 6 篇文章题目, 在Change block type or style 下拉菜单中, 选中 List


选中 H4 标题Read More 和 6篇文章构成的 List, 此时通过上下菜单可以将它们整体上下移动.



  • 2.2.7 其他设置

右侧 Post/Block 菜单设置如下五项.

  • Categories -- 选择 Self Improvement
  • Tags -- 输入 life, meanning. 中间敲击回车键间隔.
  • Featured image -- 上传当前 POST 文章的标题图片
  • Excerpt -- 输入文章概述内容
  • Discussion -- 去掉如下两项之前的对勾, Allow comments 以及 Allow pingbacks trackbacks.


  • 2.2.8 发布 最后通过上方的 Publish 菜单发布. 一个包含常见编辑项目, 文字, 图片, 列表, 视频的 Post 就制作完成, 恭喜你.


  • 2.3 创建总计 6 个 Blog(包含之前的两篇 POST), 给文章分类, 并使用 Featured 图片, 最后用随机拉丁文填充.
博客文章名称分别为:
How to Sell 10,000 Copies of Your Own Time -- 这三篇分类至 Self Improvment
How to Expand Your Influence
How do you Spend Your Time in Life

Why use Wordpress -- 此三篇分类至 Other
Why We use DiVi for Web Design
Top 10 Best Hosting Providers for DiVi

Tips: 如果碰到 无法刷出 Blog 的问题, 先在后台 Reading 中设置 blog 显示为空, 保存后再调整为 blog, 然后保存. 刷新几次即可.

目标 3: 取消如下四个小部件 Widges. 更改小部件 Categories 的显示内容

a. Search 搜索框

b. Recent Comments

c. Archives

d. Meta



通过之前的设置, 如右侧光标所在的 Sidebar 部分, 和本文当前的目标 Blog 页面对比, 你会发现右侧小部件菜单默认多 4 项. 这些小部件称为 Widgets, 下面我们去掉它们, 并更改 Categories 的显示方式.



网站后台设置: Dashboard - Appearance - Widgets - 页面右侧的 Sidebar 点击小部件项目 Search, 选择 Delete. 同理删除 Recent Comments, Archives, Meta 三项 Widgets. 在 Categories 中, 选中Show post counts.

至此, Wordpress 内置的 Blog 页面设置完毕. 打开你的域名/blog, 在这里是 hysen.me/blog, 你可以看到初期我们设置的目标实现了, 共六篇博文.

最后, 留一个小作业. 如果你喜欢 hysen.me/blog 现在的版面, 在 Module 设置中, 将 Layout 由 Full width 改成 Grid 即可.

至此, WordPress 自建房实录 - DiVi主题五页面建站篇, 上中下三篇全文完. 你已经可以很轻松的设计一个如 hysen.me 一样的展示站了,

如果你使用 Woocomerce, 可以进一步设置为独立电商网站. 使用数以千计的 WordPress 插件, 你还可以得到各种用途的网站.

我的工作就到这里, 我的初始目标, 就是解决 WordPress 建站从 0-1 的问题, 至于 1-100, 有太多的方案和教程可选. 希望你的 WordPress 之旅充满了期待, 祝你好运.

本系列文章列表:




文章标题：WordPress 自建房实录 - DiVi主题五页面建站篇(下)

发布时间: 2021 年 10 月 9 日 - 20 : 55 分

更新时间:

更新版次 : 第0.5 beta 版

知乎链接: 翟海生：WordPress 自建房实录 - - DiVi 主题五页面建站篇(下)

非商用可任意转载，转载请保存全文信息即可。商用请联系作者获得授权.

编辑于 2024-03-31 23:33・IP 属地福建
WordPress
DIVI建站
推广渠道