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

    具体思路来源于官方文档Block Editor Handbook,中文名称暂定为“块编辑手册”。

    wordpress 5.0版本正式加入Gutenberg(古腾堡)编辑器,这个编辑器的特色是将所有的内容模块化,官方定义为”Block”。在实际使用时,用户会发现每一段文字都变成了一个模块,写文章的感觉和儿时堆积木的体验很接近。虽然这个编辑器刚出来的时候饱受争议,甚至到现在wordpress的商店里评分还是负数,但是我个人感觉这个编辑器才是未来网络编辑的方向,比起之前那个大型富文本输入框,这种编辑器可谓即优雅又实用。但这只是个开始,个人认为,能够有效的自定义模块,才是这个编辑器最有优势的地方。

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

    加载

    打开functions.php,直接加入方法

    #-----------------------------------------------------------------#
    # 加载古腾堡自定义模块
    #-----------------------------------------------------------------#
    function my_gutenberg_block(){
    	//注册古腾堡编辑器
    	wp_register_script( 'block-js', get_template_directory_uri() . '/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

    在主题的目录下,新建一个src的文件夹,并新建blocks.js
    如果想自定义的话,注意把上面代码里的对应路径也改一下。

    编辑blocks.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》。

    另外再提供一个el布局上嵌套的例子:

    return el(
        'div',
        {
            className: 'components-placeholder wp-block-embed'
        },
        el(
            'div',
            {
                className: 'components-placeholder__label'
            },
            el(
                'span',
                {
                    className: 'editor-block-icon block-editor-block-icon has-colors'
                },
                el(
                    'span',
                    {
                        className: 'dashicons dashicons-universal-access-alt'
                    }
                )
            ),
            el(
                'span',
                {},
                '测试'
            ),
        ),
        el(
            'div',
            {
                className: 'components-placeholder__fieldset'
            },
            el(
                'input',
                {
                    className: 'components-placeholder__input',
                    placeholder: '键入要在此嵌入的URL…',
                    onChange: onChangeContent,
                    value: 11
                },
            ),
            el(
                'button',
                {
                    className: 'components-button is-button is-default is-large',
                },
                '嵌入'
            )
        )
    );

    此为古腾堡默认的嵌入样式,直接加在edit: function (props)里就能预览到了。

    旗鱼小站.我们不生产资源,我们只是大资源的搬运工
    旗鱼小站 » wordpress古腾堡编辑器添加自定义模块

    常见问题FAQ

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

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 1262500034@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

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

    联系作者
    • 1014会员总数(位)
    • 2006资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 203稳定运行(天)

    提供最优质的资源集合

    免费资源 精品源码