最新公告
  • 欢迎您光临vivi资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress如何给古腾堡编辑器添加自定义模块

    大多WordPress站长都表示用不习惯古腾堡编辑器,甚至在WordPress的商店里评分还是负数,但是我个人还是挺喜欢用这个编辑器的。比起之前那个大型富文本输入框,这种编辑器可谓即优雅又实用。

    但这只是个开始,个人认为,能够有效的自定义模块,才是古腾堡编辑器最有优势的地方。

    关于古腾堡编辑器,官方之前给了一个初步的文档,但是那个文档是以插件化为教程进行的,对于主题设计者而言,更希望在自己的主题里直接加入古腾堡自定义模块比较方便,因此本文的方向是在主题里直接往古腾堡编辑器里插入自定义模块。

    今天我们来了解下如何给古腾堡编辑器添加自定义模块。

    加载古腾堡自定义模板

    //加载古腾堡自定义模板
    function my_gutenberg_block(){
    	//注册古腾堡编辑器
    	wp_register_script( \'block-js\', get_template_directory_uri() . \'/extends/src/blocks.js\', array(\'wp-blocks\', \'wp-element\', \'wp-editor\', \'wp-i18n\'), \'1.0.0\' );
    	//插入模块
    	//fishtheme/block可自定义, 比如: demo/block
    	register_block_type( \'fishtheme/block\', array(
    		\'editor_script\' => \'block-js\'
    	) );
    }
    add_action( \'init\', \'my_gutenberg_block\' );
    

    新建blocks.js

    在目前使用的WordPress主题目录下,新建一个src的文件夹,并新建blocks.js。

    blocks.js文件路径可以自定义,注意把上面代码里的对应路径也改一下就行。

    编辑blocks.js

    这个是古腾堡核心文件,基本所有的功能都在这里。

    //js代码
    //引入对应方法, 需要注意的是这里引用了4个方法, 那么在底部也需要window.wp.回调这4个方法
    //这4个方法的来源是functions.php里的wp_register_script时array()里传入, 需要注意一一对应
    (function (blocks, element, editor, i18n) {
        var el = element.createElement; //用于输出HTML
        var RichText = editor.RichText; //用于获取文本输入块
    
        blocks.registerBlockType(\'gutenberg-examples/example-03-editable\', {
            title: \'测试模块\', //标题
            icon: \'universal-access-alt\', //图标
            category: \'layout\', //对应栏目
            attributes: { //模块的属性
                content: {
                    type: \'array\',
                    source: \'children\',
                    selector: \'p\',
                },
            },
            //编辑时
            edit: function (props) {
                //获取模块输入的值
                var content = props.attributes.content;
                //点击输入框时用的方法
                function onChangeContent(newContent) {
                    //将输入框里的内容输出到模块属性里
                    props.setAttributes({ content: newContent });
                }
                //返回HTML
                //el的方法格式为: el( 对象, 属性, 值 ); 可以相互嵌套
                //例如:
                // el(
                //     \'div\',
                //     {
                //         className: \'demo-class\',
                //     },
                //     \'DEMO数据\'
                // );
                // 输出为: <div class=\"demo-class\">DEMO数据</div>
                return el(
                    RichText,
                    {
                        tagName: \'p\',
                        className: props.className,
                        onChange: onChangeContent,
                        value: content,
                    }
                );
            },
            //保存时
            save: function (props) {
                //保存时返回的HTML
                return el(RichText.Content, {
                    tagName: \'p\', value: props.attributes.content,
                });
            },
        });
    }(
        window.wp.blocks,
        window.wp.element,
        window.wp.editor,
        window.wp.i18n
    ));
    

    查看效果

    以上步骤完成后,在编辑器页面刷新,然后添加区块,看看是不是添加成功了。

    此为官网提供的demo,如果想更深一步的开发自己需要的复杂的模块,请直接参考文章开始的《Block Editor Handbook》。

    文章来自Vivi源码http://www.vxiaotou.com转载请注明出处,并保留本链接,谢谢!

    vivi主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
    vivi小偷官网 » WordPress如何给古腾堡编辑器添加自定义模块

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    Vivi资源网
    一个高级程序员模板开发平台

    发表评论

    Hi, 如果你对这款程序有疑问,可以跟我联系哦!

    联系作者
    • 3256会员总数(位)
    • 4999资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1458稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情