欢迎您光临92源码网,秉承服务宗旨,履行"站长"责任,销售只是起点,服务永无止境!

WordPress如何给古腾堡编辑器添加自定义模块

作者 : admin 本文共2280个字,预计阅读时间需要6分钟 发布时间: 2021-10-19 共250人阅读
注:未经许可的【搬运】和【账号共享】可能会被取消VIP【每个都会记录ip,多ip封禁账号】
本站所有资源来源于网络,分享目的仅供大家学习和交流!不得使用于非法商业用途,不得违反国家法律。否则后果自负! 本站提供的资源,都不包含技术服务请大家谅解!如有链接无法下载、失效或广告,请联系站长处理!

大多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》。

本站声明:
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!

再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。


92源码网 » WordPress如何给古腾堡编辑器添加自定义模块

常见问题FAQ

本站下载资源解压密码是什么?
本站所有资源解压密码均为www.92luntan.com或者www.huziy.com
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
Copyright © 2018-2022 92源码资源网 - All rights reserved 浙ICP备14006446号-2
开通VIP 享更多特权,建议使用QQ登录