如何在前端添加古腾堡块编辑器？

Question

我想在前端（在插件或主题中）启用页面/帖子部分的编辑。我想在前端页面上打开古腾堡编辑器。似乎没有官方的方法。

我基本上希望在前端初始化古腾堡块编辑器的实例，同时保留功能和外观，就像在“编辑页面/帖子”管理页面中一样。我该怎么做呢？

• 我查看了 WordPress 官方文档，但什么也没找到。

• 我已经搜索了之前的问题，其中大多数都涉及将 TinyMCE 添加到前端，这不像古腾堡块编辑器那样工作。

• 我找到的每个在线资源都是在古腾堡时代之前编写的，并在前端添加了tinyMCE。

• 我尝试了一些在线可用的资源，基本上最终在前端得到了一个tinyMCE的实例。

• 我发现执行此操作的唯一插件是“高级自定义字段”，如下所示：https://www.youtube.com/watch?v=M25ngsCh2kw

谢谢你！

Answer 1

编辑：

Block 主题 (developer.wordpress.org/themes/block-themes) 非常接近您正在寻找的内容

---

高级自定义字段是一个很棒的插件。但您也可以创建自己的表单和 api 来创建页面或帖子

看起来像这样

表格

<?php
/*
** Template Name: Add Post From Frontend
*/
?>
<div class="col-sm-12">
    <h3>Add New Post</h3>
    <form class="form-horizontal" name="form" method="post" enctype="multipart/form-data">
        <input type="hidden" name="ispost" value="1" />
        <input type="hidden" name="userid" value="" />
        <div class="col-md-12">
            <label class="control-label">Title</label>
            <input type="text" class="form-control" name="title" />
        </div>

        <div class="col-md-12">
            <label class="control-label">Sample Content</label>
            <textarea class="form-control" rows="8" name="sample_content"></textarea>
        </div>

        <div class="col-md-12">
            <label class="control-label">Choose Category</label>
            <select name="category" class="form-control">
                <?php
                $catList = get_categories();
                foreach($catList as $listval)
                {
                    echo '<option value="'.$listval->term_id.'">'.$listval->name.'</option>';
                }
                ?>
            </select>
        </div>

        <div class="col-md-12">
            <label class="control-label">Upload Post Image</label>
            <input type="file" name="sample_image" class="form-control" />
        </div>

        <div class="col-md-12">
            <input type="submit" class="btn btn-primary" value="SUBMIT" name="submitpost" />
        </div>
    </form>
    <div class="clearfix"></div>
</div>

验证

<script>
function returnformValidations()
{
    var title = document.getElementById("title").value;
    var content = document.getElementById("content").value;
    var category = document.getElementById("category").value;

    if(title=="")
    {
        alert("Please enter post title!");
        return false;
    }
    if(content=="")
    {
        alert("Please enter post content!");
        return false;
    }
    if(category=="")
    {
        alert("Please choose post category!");
        return false;
    }
}
</script>

保存

<?php
if(is_user_logged_in())
{
    if(isset($_POST['ispost']))
    {
        global $current_user;
        get_currentuserinfo();

        $user_login = $current_user->user_login;
        $user_email = $current_user->user_email;
        $user_firstname = $current_user->user_firstname;
        $user_lastname = $current_user->user_lastname;
        $user_id = $current_user->ID;

        $post_title = $_POST['title'];
        $sample_image = $_FILES['sample_image']['name'];
        $post_content = $_POST['sample_content'];
        $category = $_POST['category'];

        $new_post = array(
            'post_title' => $post_title,
            'post_content' => $post_content,
            'post_status' => 'pending',
            'post_name' => 'pending',
            'post_type' => $post_type,
            'post_category' => $category
        );

        $pid = wp_insert_post($new_post);
        add_post_meta($pid, 'meta_key', true);

        if (!function_exists('wp_generate_attachment_metadata'))
        {
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
        }
        if ($_FILES)
        {
            foreach ($_FILES as $file => $array)
            {
                if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK)
                {
                    return "upload error : " . $_FILES[$file]['error'];
                }
                $attach_id = media_handle_upload( $file, $pid );
            }
        }
        if ($attach_id > 0)
        {
            //and if you want to set that image as Post then use:
            update_post_meta($pid, '_thumbnail_id', $attach_id);
        }

        $my_post1 = get_post($attach_id);
        $my_post2 = get_post($pid);
        $my_post = array_merge($my_post1, $my_post2);

    }
}
else
{
    echo "<h2 style='text-align:center;'>User must be login for add post!</h2>";
}
?>

代码来自：https://www.phpkida.com/how-to-add-post-from-frontend-in-wordpress-without-plugin/

Answer 2

我测试了代码，但类别没有保存。我检查了代码，没有发现任何错误。其他人检查过吗？