扫描二维码在手机上浏览

wordpress古腾堡Gutenberg编辑器创建自定义Block块详细教程 ·展示

广告位,电脑和手机可分别设置,可放任何广告代码
对了,我应该放什么广告呢?
相信很多朋友都更新了wordpress5.0了吧,这次更新带来了全新的可视化编辑器:古腾堡Gutenberg。新的编辑器我用了一段时间确实不错,可自定义的地方也非常多。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

Block介绍

新的编辑器采用Block块的方式插入文章,把内容分成各种块,方便内容的调整和修改,同时也大大的扩展了编辑器的功能。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

目前相关的中文内容还是很少,需要了解更多内容可以参考官方介绍

截图介绍

如图所示,通过创建自定义块可以更方便的调整文章内容功能和效果,在此我以实现上图的两个自定义块为例,一步一步的创建。

详细教程

创建自定义的过程大致分为三步,只要按照我的教程一步一步的来,还是很简单的

  1. 在function中注册相关的脚本文件
  2. 编辑块Block的JS文件
  3. 编辑块的css外观

注册 Gutenberg Block块

找到你主题的 function.php文件,在最下方添加以下代码:

// 古腾堡编辑器扩展
function duxq_block() {
    wp_register_script( //引入核心js文件
        'duxq_block',
        get_stylesheet_directory_uri().'/js/gb_block.js',
        array( 'wp-blocks', 'wp-element' )
    );

    wp_register_style(  //引入css外观样式文件
        'duxq_block',
        get_stylesheet_directory_uri().'/css/editor-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type( 'duxq/block', array(
        'editor_script' => 'duxq_block',
        'editor_style'  => 'duxq_block',
    ) );
}
if (function_exists('register_block_type')) { //判断是否使用古腾堡编辑器
    add_action( 'init', 'duxq_block' );
}

语法解释:

  • wp_register_script () 引入核心的js文件
  • wp_register_style() 引入css外观样式文件
  • 最后我们检测一下是否使用古腾堡,然后排队注册

编辑Block块JS内容

块是的核心就是JS文件控制的,要实现的所有功能也是靠这个就是文件。

按照我们上面引入的js文件,我们打开编辑这个文件。

在以上代码中我们创建了两个自定义块,分别是DUXQ标题和DUXQ按钮,点击块就会出现上面图片中的块,包含了文字内容输入,和几个按钮,按下按钮会切换内容的css Class,以实现外观样式的改变!

语法解释:

  • blocks, editor, i18n, element, components等均是官方的API接口,实现数据传递
  • blocks.registerBlockType() 创建Block的函数接口
  • registerBlockType的几个参数:title(标题)、icon(图标)、category(分组)、attributes(自定义属性)
  • 两个核心函数:editsave ,分别定义了编辑时候的函数和保存的函数
  • 上面我们增加了几个按钮,传递onClick事件,实现点击切换不同的className

css外观样式

通过创建了自定义块,能实现加载不同的css className 了,那我们添加一些样式,就可以看到效果了!

.duxq.anz button {
	margin: 10px;
	padding: .5em 1em;
	min-width: 33px;
	min-height: 33px;
	cursor: pointer
}

.duxq.anz button:hover {
	box-shadow: 0 0 10px #ddd;
	opacity: .8
}

.qe_wzk_hong {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #f1d3d3;
	border-radius: 4px;
	background: #fff7f7;
	color: #dc3f3f
}

.qe_wzk_lan {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #b3daf1;
	border-radius: 4px;
	background: #f7fcff;
	color: #197cb1
}

.qe_wzk_hui {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #d4d4d4;
	background: #f5f5f5;
	color: #757575
}

.qe_wzk_lv {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #b4e6b1;
	border-radius: 4px;
	background: #f7fff9;
	color: #1d9c24
}

.quote_q:before {
	content: "“";
	position: absolute;
	color: #ccc;
	font-size: 120px;
	top: -60px;
	left: 0
}

.qe_fxan {
	display: inline-block;
	margin: .5em;
	padding: .6em .8em;
	min-width: 80px;
	border: none;
	border-radius: 60px;
	box-shadow: -1px 4px 10px rgba(0,0,0,.2);
	color: #fff;
	text-align: center;
	transition: all .2s ease
}

.qe_fxan a,.qe_fxan a:hover {
	color: #fff
}

.qe_fxan.b1 {
	background-image: linear-gradient(135deg,#f58852 10%,#e43e2f 100%)
}

.qe_fxan.b2 {
	background-image: linear-gradient(135deg,#59b7fb 10%,#036bff 100%)
}

.qe_fxan.b3 {
	background-image: linear-gradient(135deg,#CE9FFC 10%,#7367F0 100%)
}

.qe_fxan.b4 {
	background-image: linear-gradient(135deg,#FCCF31 10%,#f77f2d 100%)
}

.qe_fxan.b5 {
	background-image: linear-gradient(135deg,#54ea98 10%,#0db757 100%)
}

以上css内容除了要添加到刚刚引入的css文件中,还需要添加到主题的相关css文件中,才能实现文章页中也显示相同效果!同时css样式可能还需要根据你的主题做一些优先级调整,才能显示正确的效果,这里就不再详细赘述了!

古腾堡编辑器的功能很强大,但同时也更加复杂了。想要创建更多功能的自定义块就还得多多学习官方文档了!
最近我也把DUXQ主题编辑器也增加了很多实用的块,写文章太方便了!

本站主题Block块

为了方便写文章,我可是费了很大功夫,把常用的几个功能都用这样的方法添加到主题的block块了,下面截图展示部分block块
广告位,电脑和手机可分别设置,可放任何广告代码
赞 42 打赏
分享海报
版权声明
分享是一种美德,转载请注明地址
文章地址:倾微博客 » wordpress古腾堡Gutenberg编辑器创建自定义Block块详细教程
广告位,电脑和手机可分别设置,可放任何广告代码

评论 14

  • *
  • *
  1. #13

    代码调试不通过,看看这里的行不行

    忆風/love2个月前 (09-29)
  2. #12

    。。。我有罪

    何先生2个月前 (09-10)
  3. #11

    感觉很不错的教程

    何先生2个月前 (09-09)
  4. #10

    保护环境

    Black Eyes4个月前 (08-01)
图片正在生成中,请稍后...

周三

11/20

wordpress古腾堡Gutenberg编辑器创建自定义Block块详细教程 ·展示

一篇教程,手把手的教大家学习wordpress古腾堡Gutenberg编辑器创建自定义Block块

还不错吧!打赏支持一下呗

支付宝扫一扫打赏

微信扫一扫打赏

登录

记住我

注册