给WordPress添加个额外的古腾堡编辑器

在WordPress中添加一个额外的古腾堡编辑器(Gutenberg Editor)实例可以通过自定义代码实现。以下是一个基本的步骤指南,帮助你在WordPress中添加第二个古腾堡编辑器实例。

步骤 1: 创建一个自定义插件

首先,创建一个自定义插件来包含你的代码。你可以在 wp-content/plugins 目录下创建一个新的文件夹,并在其中创建一个PHP文件。

例如,创建一个名为 custom-gutenberg-editor.php 的文件,并添加以下代码:

复制代码
<?php
/*
Plugin Name: Custom Gutenberg Editor
Description: Adds an additional Gutenberg editor instance.
Version: 1.0
Author: Your Name
*/

function custom_gutenberg_editor_enqueue_scripts() {
    wp_enqueue_script('custom-gutenberg-editor', plugins_url('/js/custom-gutenberg-editor.js', __FILE__), array('wp-blocks', 'wp-element', 'wp-editor'), null, true);
}

add_action('enqueue_block_editor_assets', 'custom_gutenberg_editor_enqueue_scripts');

function custom_gutenberg_editor_init() {
    register_post_type('custom_post_type', array(
        'public' => true,
        'label' => 'Custom Post Type',
        'supports' => array('title', 'editor'),
    ));
}

add_action('init', 'custom_gutenberg_editor_init');

步骤 2: 创建自定义JavaScript文件

在你的插件文件夹中创建一个 js 目录,并在其中创建一个名为 custom-gutenberg-editor.js 的文件。添加以下代码:

复制代码
(function($) {
    var editor = wp.editor.create(document.getElementById('custom-editor'), {
        frame: true,
        title: 'Custom Gutenberg Editor',
        icon: 'admin-post',
        buttons: {
            preview: false,
            fullscreen: true,
            collapse: true,
        },
    });

    editor.on('ready', function() {
        console.log('Custom Gutenberg Editor is ready!');
    });
})(jQuery);

步骤 3: 添加自定义编辑器容器

在你的主题文件中(例如 functions.php 或 header.php),添加一个容器来承载第二个古腾堡编辑器实例。

复制代码
<?php
function custom_gutenberg_editor_container() {
    ?>
    <div id="custom-editor"></div>
    <?php
}
add_action('wp_footer', 'custom_gutenberg_editor_container');
?>

步骤 4: 激活插件

在WordPress后台,导航到"插件"页面,找到你创建的自定义插件并激活它。

步骤 5: 测试

访问你的网站,并检查页面底部是否出现了第二个古腾堡编辑器实例。

注意事项

性能影响:添加额外的编辑器实例可能会对性能产生影响,特别是在低配置的服务器上。

兼容性:确保你的代码与当前使用的WordPress版本兼容。

安全性:在生产环境中使用自定义代码时,请确保进行适当的安全检查和测试。

原文

http://www.dulizhan.cq.cn/jianzhan/42.html

相关推荐
GDAL3 小时前
vscode 插件开发activityba
vscode·编辑器
learn_coder3 小时前
在vscode中和obsidian中使用Mermaid
ide·vscode·编辑器
前端小超人rui17 小时前
UEditor 对接 秀米 手机编辑器流程与问题
编辑器
l1x1n019 小时前
Vim 编辑器常用操作详解(新手快速上手指南)
linux·编辑器·vim
Shan12051 天前
编辑器Vim的快速入门
linux·编辑器·vim
通信小小昕1 天前
ubuntu18.04.1无法安装vscode(安装依赖无效)
ide·vscode·编辑器
ykjhr_3d1 天前
华锐云空间展销编辑器:开启数字化展示新时代
编辑器
许白掰1 天前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
向宇it2 天前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质
TOSUN同星3 天前
干货分享 | TSMaster DBC编辑器操作指南:功能详解+实战示例
数据库·oracle·编辑器·汽车·软件工程