Wp_editorを使ってフロントエンドにコンテンツを保存して表示する

Question

まずWordpressを使ったハードコーディングに関して言えば、私は新人だということから始めましょう。私はそれをしていないというわけではありませんが、もっとよく言えば、私は正確には特定のことをする方法を知りません。そうは言っても、ここで私はHOURSの研究に費やした私の問題です：

私はwp_editorを使用してフロントエンドのテキストエリアを作成しようとしています。それは複数のユーザーによって更新され、内容を例えば<div>で表示することができます。フロントエンドにエディタが表示されるようにしましたが、保存ボタンも送信ボタンもありません。自分で保存/送信ボタンを作成しても、何もしません。どうすればこれを達成できますか？私の残虐なコードが添付されています。

注：これを行うより簡単な方法があれば、私はそれをすべてだ。私はプラグインに頼るよりも、Wordpressのハードコーディングにもっと関わりたいです。

function front_end_text_box() {

    if(!is_admin()){
        require_once(ABSPATH . 'wp-admin/includes/template.php');
    }

    //$post_id = 7;
    //$post = get_post( $post_id, OBJECT, 'edit' );

    $content = '';//$post->post_content;
    $editor_id = 'mycustomeditor';
    $settings =   array(
            'wpautop' => true, //Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
            'media_buttons' => true, //Whether to display media insert/upload buttons
            'textarea_name' => $editor_id, // The name assigned to the generated textarea and passed parameter when the form is submitted.
            'textarea_rows' => get_option('default_post_edit_rows', 10), // The number of rows to display for the textarea
            'tabindex' => '', //The tabindex value used for the form field
            'editor_css' => '', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
            'editor_class' => '', // Any extra CSS Classes to append to the Editor textarea
            'teeny' => false, // Whether to output the minimal editor configuration used in PressThis
            'dfw' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
            'tinymce' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
            'quicktags' => true, // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
            'drag_drop_upload' => true //Enable Drag & Drop Upload Support (since WordPress 3.9) 
    );

    //$save_content = get_post_meta ($post->ID, 'front_end_text_box', true);
    //echo '<form action="" method="post" target="_self">';

    wp_editor( $content, $editor_id, $settings );

    //wp_update_post($post_id);
    //submit_button( 'Save Content');
    //echo '<input type="submit" value="Submit"></form>';
    //echo '<textarea>' . $content . '</textarea>';
    //echo esc_html( get_post_meta( get_the_ID(), '_mycustomeditor', true ) );

}

/*
    function save_wp_editor_fields(){
        global $_POST;
        //*update_option('my_content');
        update_post_meta($post->ID, 'mycustomeditor', $_POST['mycustomeditor']);
        //$post->post_content = $editor_id;
    }
    add_action( 'save_post', 'save_wp_editor_fields' );
    //add_action('admin_init','save_wp_editor_fields', 10);
*/

Answer 1

データを admin_post_(action) に送信してからリクエストを処理します。クリックを傍受して必要なデータをすべて提供するにはjQueryが必要かもしれませんが、これは主要な部分を示しています。

HTML

<form action="http://www.example.com/wp-admin/admin-post.php" method="post">
  <input type="hidden" name="action" value="add_foobar">
  <input type="hidden" name="data" value="foobarid"> 
  <input type="submit" value="Submit">
</form>

PHP

add_action( 'admin_post_foobar', 'prefix_admin_foobar' );
add_action( 'admin_post_nopriv_foobar', 'prefix_admin_foobar' );

function prefix_admin_foobar() {

    status_header( 200 );

    $my_post = array (
            'ID'           => (int) $_REQUEST[ 'data' ],
            'post_title'   => 'This is the post title.',
            'post_content' => 'This is the updated content.',
    );

    // Update the post into the database
    wp_update_post( $my_post );

    die( "Server updated '{$_REQUEST['data']}' from your browser." );
}

---

ショートコードとしての作業バージョン

これは、ショートコード[front-end-editor]をコンテンツに追加することでテストできる実用的なバージョンです。成功した場合のJSによる更新を含みます。

// Test with [front-end-editor] in your post content

add_shortcode( 'front-end-editor', 'front_end_editor_shortcode' );

function front_end_editor_shortcode() {

    if ( ! is_admin() ) {
        require_once( ABSPATH . 'wp-admin/includes/template.php' );
    }

    // current post id
    $post_id = get_the_ID();
    $post    = get_post( $post_id, OBJECT, 'edit' );
    $content = $post->post_content; // current content

    // editor settings
    $editor_id = 'mycustomeditor';
    $settings  = array (
            'wpautop'          => true,   // Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
            'media_buttons'    => true,   // Whether to display media insert/upload buttons
            'textarea_name'    => $editor_id,   // The name assigned to the generated textarea and passed parameter when the form is submitted.
            'textarea_rows'    => get_option( 'default_post_edit_rows', 10 ),  // The number of rows to display for the textarea
            'tabindex'         => '',     // The tabindex value used for the form field
            'editor_css'       => '',     // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
            'editor_class'     => '',     // Any extra CSS Classes to append to the Editor textarea
            'teeny'            => false,  // Whether to output the minimal editor configuration used in PressThis
            'dfw'              => false,  // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
            'tinymce'          => true,   // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
            'quicktags'        => true,   // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
            'drag_drop_upload' => true    // Enable Drag & Drop Upload Support (since WordPress 3.9)
    );

    // display the editor
    wp_editor( $content, $editor_id, $settings );

    // display the submit button
    submit_button( 'Save Content' );

    // add javaScript to handle the submit button click,
    // and send the form data to WP backend,
    // then refresh on success.
    ?>
    <script>
        (function($) {
            $ ('#submit').on ('click', function(e) {
                var content = $ ('#mycustomeditor').val ();
                $.post ('<?php echo get_admin_url( null, '/admin-post.php' ) ?>',
                        {
                            action: 'front_end_submit',
                            id: '<?php echo get_the_ID(); ?>',
                            content: content
                        },
                        function(response) {

                            // looks good
                            console.log (response);

                            // reload the latest content
                            window.location.reload();
                        });
            });
        }) (jQuery);
    </script>
    <?php
}

// subscribe to the form submit event
add_action( 'admin_post_front_end_submit', 'prefix_admin_front_end_submit' );
add_action( 'admin_post_nopriv_front_end_submit', 'prefix_admin_front_end_submit' );

// handle the form submit action
function prefix_admin_front_end_submit() {

    // grab the content and post id from the POST data
    $content = $_POST[ 'content' ];
    $id      = (int) $_POST[ 'id' ];

    // check if the post is valid
    if( ! get_post($id) ) {
        die( "No post '{$id}'." );
    }

    // prep the update
    $my_post = array (
        'ID'           => $id,
        'post_content' => stripslashes( $content ),
    );

    // update the post into the database
    $result = wp_update_post( $my_post );

    // return the results
    if ( $result ) {

        // GOOD

        status_header( 200 );
        die( "Server updated '{$id}' from your browser." );

    } else {

        // BAD

        die( "Failed to updated '{$id}' from your browser." );
    }
}