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

资源分享网

给你想要的资源
扫描二维码在手机上浏览

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

相信很多朋友都更新了wordpress5.0了吧,这次更新带来了全新的可视化编辑器:古腾堡Gutenberg。新的编辑器我用了一段时间确实不错,可自定义的地方也非常多。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

Block介绍

新的编辑器采用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(自定义属性)
  • 两个核心函数:edit 和 save ,分别定义了编辑时候的函数和保存的函数
  • 上面我们增加了几个按钮,传递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块

 

历史上的今天:

本文来自:资源网

分享海报
版权声明
原创文章未经LIN资源网允许不得转载。本站部分转载文章资源来源于互联网收集和整理,仅供学习和研究使用。如有侵犯你的版权,请联系我们,本站将立即更正。请多多关照!
文章地址:Lin资源分享网 » wordpress古腾堡Gutenberg编辑器创建自定义Block块详细教程 ·展示

评论 抢沙发

评论前必须登录!

立即登录   注册

图片正在生成中,请稍后...

周六

12/07

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

相信很多朋友都更新了wordpress5.0了吧,这次更新带来了全新的可视化编辑器:古腾堡Gutenberg。新的编辑器我用了一段时间确实不错,可自定义的地方也非常多。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

Lin资源分享网 分享你想要的资源

站点地图联系我们

登录

记住我

注册