Enregistrement et affichage du contenu sur le front-end avec wp_editor

Question

Permettez-moi de commencer par dire que, lorsqu'il s'agit de coder en dur avec Wordpress, je suis un débutant. Non pas que je ne l'ai pas fait, mais plus encore, je ne sais pas exactement comment faire certaines choses. Cela dit, voici le problème sur lequel j'ai passé HOURS à effectuer des recherches sur:

J'essaie de créer une zone de texte frontale à l'aide de wp_editor pouvant être mise à jour par plusieurs utilisateurs et afficher le contenu sous forme de <div>. L'éditeur doit se présenter au début mais il n'y a pas de bouton de sauvegarde ou d'envoi. Même si je crée mon propre bouton de sauvegarde/envoi, cela ne fait rien. Comment puis-je accomplir cela? Mon code atroce est attaché.

NOTE: S'il y a un moyen plus facile de faire cela, je suis tout à fait d'accord. J'aimerais vraiment être plus impliqué dans le codage en dur pour Wordpress que de me fier aux plugins.

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

Vous souhaitez soumettre les données à admin_post_(action) , puis gérer la demande. Vous aurez peut-être besoin de jQuery pour intercepter le clic et fournir toutes les données requises, mais cela vous montre les pièces principales.

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." );
}

---

VERSION DE TRAVAIL COMME SHORTCODE

Voici une version opérationnelle que vous pouvez tester en ajoutant le shortcode [front-end-editor] à votre contenu. Inclut l'actualisation par JS en cas de succès.

// 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." );
    }
}