【领域展开 25 式】 WordPress Widgets 小工具练习

认识完 Soledad 在安装时一并提供的常用套件後,今天要来做跟主题有关的 Widgets 小工具探索与练习,上次提到 Widgets 已经是在 【领域展开 13 式】 有了骨头与皮肤,再搞清楚主要肌群 Menu 层级与操作当初在布景主题选择时想说样式如果都差不多就看到时候有什麽小工具再来调整,今天就要来纪录Widgets 小工具的使用历程/images/emoticon/emoticon34.gif

大家好,我是 Jade Chang
Statistic Information 毕业,入职场後於外商从事软件技术行销,长期规划各种线上线下活动像是直播节目/带状线上教学,後期负责学生实习计画与大专院校 Talent Cultivation 与技术社群行销 Program 为主,过去一年转任於台湾本土软件开发商 PM,周旋於客户、工程师与设计师之间并短期投身新创事业,近期转换於新竹半导体产业,还在体验适应中。


首先,Widgets 设定架构

位置:appearance > widgets
widgets 的设定是跟着所选择的布景主题变动的,用这次选择的 simple blog 样式说明,就能看到下图有分为 main sidebar、footer column #1 #2 等区域名称!

接着对应到网站前台,哪些是所谓 main sidebar、footer column 等 Widgets 小工具组成的区域呢?

通常讲的 sidebar 是指网站的左边或是右手边的侧边栏位,左右边会依照网站样式设计不同而不同,更简单的说就是内文左右边的其他资讯栏多半是侧边栏,可以从下图看到 jadechang.blog 这次simple blog的侧边栏是用 search + recnet post+ recent comments ...(还有很多在下面) 所组合而成的,是希望使用者观看主要内容之余,能从 sidebar 看到更多资讯进而加长使用者在网站的停留时间外,也是让经营者的其他内容被露出

再来,对应到後台设定该如何调整

从第一段的图当中可以看到 Widgets 在编辑时使按照区块名称做下拉式展开编辑

  1. 点选要编辑的区块,并按下下拉式按钮展开
  2. 不论是要新增、修改、删除,都直接点选此区域的空白位置,就会显示编辑器功能并提供选单,可直接看到是要复制、上移下移或是群组化
  3. 编辑完後按下右上的 update 即可

下一步用 about me来说明,从要编辑的区域选到 about me,会提供可编辑栏位供网站经营者编辑,从 title 开始到图片上传与文字编辑

新增图片可以参考下图,位置:media > add new
将想要放在网站上的图片上传到 WordPress 媒体资料库,用拖曳或是点选上传图档都可以,上传完成後点选图片即会显示 file url,即可获取图片的储存位置

最後,简单调整 main sidebar

这次的练习当中,将 about me 的区域往上拉,并将 recent comments 与 newsletter 先删除,并且留下有显示图片与标题的 recent post,将原本抓五篇最新的改为抓三篇

One more thing..


铁人赛文章会 Delay 1-2 天同步放在 Medium
欢迎订阅或是透过 Facebook 一起来交流 (求指导)/images/emoticon/emoticon32.gif


<<:  【D26】熟练一下厨具-bid and ask #1:什麽是选择权价差单

>>:  DAY 25 - 野猪枪手 (1)

Day 19 ( 中级 ) 电风扇 ( 控制强度 )

电风扇 ( 控制强度 ) 教学原文参考:电风扇 ( 控制强度 ) 这篇文章会介绍,如何在 Scrat...

Day 10 利用 Cloudflare 来管理你的网域和子网域

将你所购买的网域名称,透过 Cloudflare 来设定 DNS 的好处多多。除了可以预防一些基本的...

Thunkable学习笔记 8 - Data Viewer List 想做资产盘点(一)

Thunkable能做资产盘点吗? 也不确定能否成功, 边做边想边调整, 准备资料先 搬出barco...

Day11 想要什麽随你点

User interface and user experience 为了能分析复杂的资料,我们希...

[Day 28] Edge Impulse + BLE Sense实现影像分类(下)

=== 书接上回,[Day 27] Edge Impulse + BLE Sense实现影像分类(上...