初识 WordPress 古腾堡编辑器的区块样板

前不久连着发了数篇文章,让博客的流量稍微增高了一些,巅峰时期超过了 500IP,我寻思着这流量不能白白浪费啊…我服务器很贵的好伐!于是我又开始折腾广告了…起先仍然是放了 Google AdSense,不过 G 家的中文广告实在太少了…每天十来个点击量恐怕都是误操作来的。因此,我想进一步在页面上增加 CPS 广告…这时,怎么放,放哪里成了一个值得探讨的命题。

如你所见,我最开始粗暴地将红包广告放在了边栏上,点的人少不说且看起来十分丑陋!所以我还是打算将它们插入到正文视图。直接用 WordPress 过滤器把内容加在正文中间或末尾处是个省事儿的办法,不过但每次修改广告还要动代码不甚安全,且灵活性不够,于是我想到了 WordPress 的区块样板功能。话说回来,WordPress 区块诞生已久我一直没认真用过,究其原因是我两个站的主题模块已经足够强大,且每当要另外构建页面时,一般都用更强大的 WPBakery Page Builder。

什么是 WPBakery Page Builder

WPBakery Page Builder 是一款流行的 WordPress 页面构建插件,它提供了灵活的可视化界面,让 WordPress 用户能够容易地创建和管理他们的网站布局,而无需编写代码。该插件包括一系列预先构建的内容元素、模板和小部件,使得页面设计更加快速和简便。此外,WPBakery Page Builder 与多种 WordPress 主题兼容,并提供前端和后端编辑选项,这样用户既可以在实时预览中编辑页面,也可以在后台管理区编辑它们。这种灵活性加上其广泛的扩展插件生态系统,使其成为用户构建个性化和专业网站的受欢迎工具。

古腾堡编辑器(Gutenberg Editor)是 WordPress 的一项主要特性,自 5.0 版本以后被默认集成在核心中。它引入了一种新的页面编辑方式,即“区块(Blocks)”编辑。在古腾堡编辑器中,每个内容元素都被视为一个区块,比如段落、图片、标题、列表等等,让用户能够更加直观便捷地构建和编辑内容。

区块样板(Block Template)是定义区块集合的一种方式,可以在创建特定类型的帖子或页面时自动应用。区块样板允许开发人员预先设置一组区块,包括布局和初始内容(图文、视频、脚本等),使内容作者能够基于一个指定的布局快速开始编辑。具体的做法是:1、按我们的构想编辑好一个区块;2、鼠标选中区块点属性设置的三个点;3、点击“创建新样板”,填入特定的名称并归档在分类中即可。

WordPress创建区块样板
WordPress 创建区块样板

此后就可以在任何文章、页面中通过区块引入到咱们的正文中,从“代码编辑器”模式可以看到,咱们的区块是像< ! -- wp:block {"ref":9721} /-- >这样被整体加载的,因而此时若对其编辑并保存是全局生效的,所有引用该区块的文章都会跟着改变,非常方便。基于这种特性,我们可以用 WordPress 区块来做一些频繁引用但又不是全局生效的内容,比如特殊的版权声明、特别文章、相册和广告。

1、竖幅简约广告样式

我目前利用区块样板做了两个广告样式,均是基于 WordPress 原生样板的基础上进行修改而来,并且把必要的 CSS/JavaScript 直接嵌入到了区块中,您各位看看效果如何。

10.20 ~ 11.11

天猫双 11 活动震撼来袭!

天猫双 11 超级红包会场,按此打开天猫领取现金红包,最高 24888 元……可叠加、无限制使用,绝无套路~

2、通用横幅广告样式

这个区块由背景图、文字段落、按钮、超链接和弹出图片构成,它没有上面那个竖幅的夸张效果,更为普通实用……目前我在不少频繁访问的页面中引用了这个区块。考虑到过多文字对 SEO 的影响,后期我会对其进行简化。

天猫&京东 618 活动盛大来袭!天猫超级红包活动从 5.20~6.10,京东京享红包从 5.24~6.18,每天动动手指即可开红包,最高可得 24888 元…Kevin's 亲测红包可叠加无限制使用,绝无套路!

1140 760 Kevin's
「初识 WordPress 古腾堡编辑器的区块样板」有 18 条评论
  • […] 我个人简单对比了三个构建器,最终选择长期使用 WPBakery Page Builder 及其扩展,另外两个是一个太强一个太弱。较弱的古腾堡编辑器偶尔在编辑文章时用一下,比如这篇文章:初识 WordPress 古腾堡编辑器的区块样板。 […]

  • Justin
    06/11/2024 at 16:50 回复

    现在 WordPress 已支持全站编辑功能了,我的两个博客站点(zblogs.top & plogs.top)都是用了支持全站编辑的主题,对小白用户来说是非常方便了!

    我最开始用 WP 时也是只有经典编辑器,不过它是真的丑,一点也不优雅,后来 WP 推出 Block Editor(应该就是你文章中说的“古登堡编辑器”)后就果断用了,非常好用,好不夸张地说使用体验可以吊打其他博客后台编辑器。

    • 的头像
      Kevin
      06/19/2024 at 22:21 回复

      WordPress官方这个,也就是古腾堡编辑器比较low,所以诞生了很多功能强大的第三方页面构建器
      我这个主题同时支持古腾堡、wpb、elementer,我首页是用wpb构建的,
      当然,日常发文章还算用默认的古腾堡

  • 闲鱼
    06/08/2024 at 21:42 回复

    一直用的经典编辑器,用不惯古腾堡编辑器,看你这么搞突然有点兴趣了

    • 的头像
      Kevin
      06/19/2024 at 22:19 回复

      just try it,
      其实好用得多……主要是功能强大

  • 的头像
    皇家元林
    06/01/2024 at 09:38 回复

    其实我一开始建站就是为了赚钱...做不起来....gg 广告十几年连 100 刀都没有

    • 的头像
      Kevin
      06/19/2024 at 22:18 回复

      我现在这个博客1天一刀,且只是部分页面上了广告,,空了我想办法再提升一下流量

  • 的头像
    Christopher
    05/31/2024 at 10:17 回复

    对用户体验很好的优化方式!
    两点小建议:
    1. 区块要尽量小一点,这个图片广告区块在我这笔记本上快一屏了。
    2. 支付宝扫红包那个按钮的链接用 ### 更好一点,用户的第一反应是鼠标点击,而不是悬浮。

    总之很棒,回头我也用上~~~

    • 的头像
      Kevin
      06/19/2024 at 22:17 回复

      谢谢您建议,我也只是测试,图片广告我用的vh计算屏幕高度,,所以不管你屏幕多大,都会占用很高空间的

  • 万有引力
    05/29/2024 at 21:07 回复

    区块好处就像notion,爱折腾才行。
    我喜欢osidian logseq。啥也没有。感觉,无束缚。

  • 三百米生活
    05/29/2024 at 19:25 回复

    也是习惯经典编辑器了,古腾堡编辑器的区块样板一直没耐心研究

    • 的头像
      Kevin
      06/19/2024 at 22:15 回复

      没什么可研究的,类似本文提到的区块编辑器勉强算高阶 功能了日常用一样的

  • Lvtu
    05/29/2024 at 10:09 回复

    我还用着经典编辑器,习惯了!
    可能老了, 感觉古腾堡一直用不顺手,所以直接禁掉了。。。

    • 的头像
      Kevin
      06/19/2024 at 22:15 回复

      你可以试试,而且可以在古腾堡里面调取“经典编辑器”这一模块~~

  • S
    05/28/2024 at 23:41 回复

    区块样板还是很方便的。

  • 的头像
    Jeffer.Z
    05/28/2024 at 17:09 回复

    谷歌广告流量不值钱,你要是英文站点就值钱了,我有时候用站点编辑器,直接在线编辑网站,拖曳那种。我也没搞懂这个和古腾堡是一个东西吗。

    • 的头像
      Kevin
      06/19/2024 at 22:14 回复

      是一个东西。经我测试,,,中文广告更不值钱。。

发表评论

请输入关键词…