EP494. “Sidebar Design（侧边栏设计）”

• Sidebar 的核心目的只有两个：导航和放广告——不是塞越多 widget 越好
• Bloggess.org 干脆整个不用 Sidebar，换来更干净的阅读体验，但导航也跟着变弱了
• 社交图标的打开方式一定要设成新分页（Blank），设成 Self 访客点一下就直接离开网站了

重点内容

什么是 Sidebar，为什么要设计它

• Sidebar（侧边栏）里的每个功能模块叫 Widget。
• 默认装好主题后，Sidebar 会自带一堆功能，比如 Search、Recent Post、Recent Comments、Archives、Categories、Meta，但很多是用不上的（例如网站只有一个分类，Categories widget 就没意义）。
• 设计 Sidebar 前先想清楚两件事：
  1. 什么样的设计好看？→ 去看同行 / 喜欢的博客怎么做。
  2. 自己网站需要哪些功能？→ Widget 的核心目的只有一个：引导访客往哪里走（导航），其次是放广告。放多少东西，取决于你想要多干净的版面。

参考案例：别人的 Sidebar 怎么做

• Smart Passive Income（Pat Flynn）
  • 顶部先放一段 About Me 自我介绍。
  • 下面放分类导航 widget，直接列出网站四大主题（affiliate marketing、better blogging、email marketing、podcasting），方便访客一键跳转到感兴趣的分类。
  • 中间放自己电子书的广告，点击「Get This Guide」要先留邮箱 → 顺便建立 Email List。
  • 底部放 Popular Posts widget，展示历史最热门文章，也可以手动置顶想推的文章。
  • 左侧栏另外放了社交分享图标（Twitter、Facebook 等），方便访客分享文章。
• Simplicity in the South
  • 顶部是 Email 订阅 Opt-in（跟上面一样，先留邮箱建立 Email List）。
  • 接着是站主自我介绍。
  • 用图片轮播（Slider）展示网站相关的作品/主题图（她是家居 DIY 类网站，放装潢灵感图很搭）。
• The Dish Daily
  • 走极简风：只有 Opt-in 加 Popular Posts 两个 widget，滚下去就没了。
• Bloggess.org
  • 完全不用 Sidebar，左右都是纯文字。
  • 好处：干净、阅读体验好；坏处：导航变弱，访客不容易跳到别的内容。
  • 用了一个显示阅读进度的插件（Plugin），后面 Plugins 章节会讲。

回到自己的网站：清理默认 Widgets

路径：Appearance → Widgets

在这里能编辑好几个区域：Default Sidebar（右侧栏）、左侧栏、搜索结果侧边栏、Footer（页脚，另外一篇笔记讲）。这篇先处理 Default Sidebar（默认/右侧栏）。

默认已经放好的 widget：Search、Recent Post、Recent Comments、Archives、Categories、Meta。

逐个判断要不要留：

• Search：保留，实用功能。
• Recent Post：保留，方便展示新发布的内容。
• Recent Comments：删除。网站初期评论很少，留言列表也不好看。
• Archives：删除。内容量还不够多，按时间归档意义不大。
• Categories：删除。目前只有一个分类，不需要分类导航。
• Meta：删除。这里面是登录、RSS Feed 之类的代码相关功能，新手用不上。

操作方式：点开某个 widget → 点 Delete。

删完以后回到 Blog 页面刷新，右侧栏应该只剩 Search 和 Recent Post，版面立刻清爽很多，也空出位置给后面要加的新组件。

[截图：Appearance → Widgets 后台界面]

设计新 Sidebar：加入 About Me

1. 从左边可用 widget 列表把 About Me 拖到 Default Sidebar 最上面。
2. Title（标题）留空——只放图片和文字，看起来更干净。
3. 点 Upload Picture 上传一张代表网站/站主的照片，Insert into Post。
4. Name 栏填网站名称（例：Robin and Jesper）。
5. Info/描述栏简单介绍网站是做什么的、能帮访客解决什么问题。
6. 保存后回 Blog 页面刷新查看效果。

加入社交媒体图标

在 About Me widget 里往下还有社交连结设置：

• 直接填入各平台主页网址（例：facebook.com/RobinJesper、instagram.com/RobinJesper、youtube.com/RobinJesper），保存后侧边栏会自动显示对应平台的图标。
• Social Link Style：图标风格，有彩色版和纯色/传统版可选。
• Social Link Target：
  • 设为 Blank（推荐）：点击图标在新分页打开社交主页，访客不会离开你的网站。
  • 设为 Self：会直接把当前网页换成社交主页，不推荐，容易流失访客。

加入 Facebook Like Box

比起单纯放一个 Facebook 图标，Facebook Like Box 会直接显示专页的按赞数、动态，功能更完整：

1. 从 Facebook 里移除单独的 Facebook 图标（因为要换成 Like Box，避免重复）。
2. 拖入 Facebook Like Box widget，放在 Recent Post 下面。
3. Title 留空，视觉更干净。
4. 填入 Facebook 专页网址。
5. 可调选项：
   • Show Faces：显示哪些朋友按过赞（开/关）。
   • Show Stream：显示专页的动态贴文（类似新闻流）。
   • Show Border：显示外框。
   • Show Wall：显示地点/打卡页面（适合实体店/餐厅）。

其他可以加的 Widget 类型

• Image widget：放新课程/新产品/新服务的宣传图，加超连结导去对应的销售页（例：Udemy 课程链接），相当于网站内自打广告。
• Text widget：单纯想放一段说明文字时用，内容自由填写。
• 总原则：想清楚要走干净风格还是信息量丰富，缺什么功能就去 Plugins 搜对应关键字，加进来当 widget 用。

用 Live Preview 编辑 Sidebar

除了在 Appearance → Widgets 后台直接编辑，也可以走：Appearance → Customize → Manage with Live Preview，进入前台即时预览模式，点选 Blog 页面后一样能编辑所有 Sidebar widget，拖拽排序、加内容的操作方式相同。两种方式效果一样，喜欢哪种用哪种，习惯前台所见即所得的可以用 Live Preview，喜欢直接管理的可以用后台 Widgets 页面。

核心概念速查

行动步骤

1. 打开自己网站的 Blog 页面，参考 2-3 个同行博客的 Sidebar 设计，记下喜欢的元素。
2. 后台 Appearance → Widgets → Default Sidebar，删除 Recent Comments、Archives、Categories、Meta。
3. 加入 About Me widget：留空标题、上传照片、填网站名和简介。
4. 在 About Me 里填入 Facebook / Instagram / YouTube 等社交网址，Social Link Target 设为 Blank。
5. 加入 Facebook Like Box widget，放在 Recent Post 下方，按需求打开 Show Stream 等选项。
6. 视需求加 Image widget（推广课程/产品）或 Text widget（补充说明）。
7. 回 Blog 页面刷新确认效果，或改用 Customize → Manage with Live Preview 即时编辑。

常见误区

• 以为 Sidebar 的 widget 越多越好，其实堆太多反而分散访客注意力，先想清楚导航和广告两个目的再加。
• Social Link Target 设成 Self，访客点社交图标后直接离开网站，流量白白流失。
• 只有一个分类却还留着 Categories widget，或没什么留言却留着 Recent Comments，都是没用但占位置的默认功能。

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 494 Sidebar Design