WordPress教程 2020年02月4日
0 收藏 0 点赞 1,514 浏览 1930 个字
摘要 :

大多WordPress站长都表示用不习惯古腾堡编辑器,甚至在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》。

微信扫一扫

支付宝扫一扫

本文网址:https://www.wpjc.net/556.html

相关推荐
测试
日期:2022-10-21 点赞:0 阅读:1,234
WordPress获取文章内第一张图片为缩略图
如果你的站点文章数量很多,那么每一篇文章都要手动设置缩略图必然会是个繁杂的步骤,之前我们分享过一篇《WordPress文章随机显示缩略图的实…
日期:2020-12-16 点赞:0 阅读:2,508
一行代码让你的网站变灰进入哀悼模式
深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞, 愿逝者安息,愿生者奋发,愿祖国昌盛。 让我们一起接力,一起变灰,一起哀悼。 网站变灰的方…
日期:2020-12-16 点赞:0 阅读:1,974
WordPress添加网址加载时间
最近比格经常在别的博客上看到“页面加载时间n秒”的效果,然后群里也有人在问,所以比格今天就写一篇Wordpress添加网址加载时间的Word…
日期:2020-12-16 点赞:0 阅读:1,873
WordPress后台只显示当前用户的文章和媒体文件
在我们使用WordPress多用户主题的时候,WordPress后台会默认显示的所有用户文章、媒体文件,这样的情况会导致大家都可以看到其他用…
日期:2020-12-16 点赞:0 阅读:1,891
WordPress纯代码免插件配置SMTP邮件功能教程
SMTP邮件功能在WordPress中是很常用的功能, 例如:网站注册登录、评论回复等风,虽然WordPress自带了mail函数,但是使用…
日期:2020-12-16 点赞:0 阅读:2,478
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站