web-dev-qa-db-fra.com

Formulaire frontal pour créer une publication personnalisée avec aperçu

comment puis-je obtenir un formulaire frontal avec une option de prévisualisation pour créer une publication personnalisée basée sur l'entrée? Je veux le faire sans aucun plugin. Un exemple simple aidera beaucoup.

Est-il possible d’obtenir l’id du formulaire à remplir pour pouvoir le transmettre à

get_preview_post_link( int|WP_Post $post = null, array $query_args = array(), string $preview_link = '' )

Il a essayé d'obtenir le get_the_ID () mais il a ajouté l'id de la page où le formulaire est placé. L'identifiant de la page est également généré après la génération du champ de formulaire.

Le formulaire est destiné aux utilisateurs enregistrés et connectés. Peut-être si je suis en mesure d'obtenir une solution pour obtenir l'ID du message généré par le formulaire, je serai bien placé pour aller plus loin.

Merci

advanced-custom-fieldspreviews
5
Latheesh V M Villa

Vous pouvez utiliser plusieurs moyens pour atteindre votre objectif. En voici un ...

Pas:

  1. Créez un shortcode qui rend le formulaire.
  2. Créez et mettez en file d'attente un fichier JavaScript qui gère la soumission du formulaire.
  3. Créer la fonction PHP pour créer/mettre à jour un message/un message personnalisé.

Dans votre functions.php: 

/**
 * @return  string  $html   HTML form.
 */
function shortcode__new_post_form() {
    /**
     * @var     WP_User $current_user
     */
    $current_user = $GLOBALS['current_user'];

    ob_start(); ?>
    <form action="" id="form-new-post">
        <fieldset>
            <legend>NEW AWESOME POST</legend>
            <div class="form-group">
                <input type="text" class="form-control" name="post_title" required/>
            </div>
            <input type="hidden" name="ID" value=""/>
            <input type="hidden" name="post_author" value="<?php echo $current_user->ID; ?>"/>
            <button type="submit"
                    class="submit"
                    data-is-updated="false"
                    data-is-update-text="UPDATE">CREATE
            </button>
        </fieldset>
        <a href=""
           class="preview-link"
           target="_blank"
           style="display: none;"
           rel="nofollow">Preview Link</a>
    </form>
    <?php
    $html = ob_get_clean();

    return $html;
}

function script__new_post_form() {
    wp_enqueue_script(
        'new-post-form',
        // Insert here your JavaScript file URL,
        array( 'jquery' ),
        '1.0.0',
        true
    );

    wp_localize_script(
        'new-post-form',
        'localized_new_post_form',
        array(
            'admin_ajax_url' => admin_url( 'admin-ajax.php' ),
        )
    );
}

function maybe_insert_new_post() {
    /**
     * @var     array $r Initialize response variable.
     */
    $r = array(
        'error'        => '', // Error message.
        'html'         => '', // Any message/HTML you want to output to the logged in user.
        'preview_link' => '', // Preview link URL.
        'post'         => '' // The created/updated post.
    );

    /**
     * @link    https://developer.wordpress.org/reference/functions/wp_insert_post/
     */
    $postarr = array(
        'ID'          => '', // If ID stays empty the post will be created.
        'post_author' => '',
        'post_title'  => 'My name is Optimus Prime',
        'post_status' => 'draft',
        'post_type'   => 'post',
        'meta_input'  => array( // Delete this line if you won't use it!
            'your_NON_acf_meta_field_key' => 'your_NON_acf_meta_field_value'
        )
    );

    parse_str( $_POST['form_data'], $form_data );

    $postarr = array_merge( $postarr, $form_data );

    /**
     * wp_insert_post can either create posts or update existing ones, if ID is passed!
     *
     * @link    https://developer.wordpress.org/reference/functions/wp_insert_post/
     *
     * @param   array $postarr An array of elements that make up a post to update or insert.
     * @param   bool $wp_error Whether to return a WP_Error on failure.
     *
     * @return  int|WP_Error    The post ID on success. The value 0 or WP_Error on failure.
     */
    $new_post = wp_insert_post(
        $postarr,
        true
    );

    // Post was not created/updated, so let's output the error message.
    if ( is_wp_error( $new_post ) ) {
        $r['error'] = $new_post->get_error_message();

        echo json_encode( $r );

        exit;
    }

    $post_id = $new_post; // Just for reference.

    /**
     * To save ACF fields use update_field() function. It doesn't matter if it's text field, repeater field, etc.
     * Make sure the field exists in admin area.
     * Use update_field() as many times as you want.
     *
     * @link    https://www.advancedcustomfields.com/resources/update_field/
     */
    update_field( 'your_acf_meta_key', 'field_value', $post_id );
//  update_field( 'your_acf_meta_key', 'field_value', $post_id );
//  update_field( 'your_acf_meta_key', 'field_value', $post_id );

    /**
     * @link    https://developer.wordpress.org/reference/functions/get_preview_post_link/
     */
    $preview_link = get_preview_post_link( $post_id );

    if ( $preview_link ) {
        $r['preview_link'] = $preview_link;
    }

    // Gets post info in array format as it's easier to debug via console if needed.
    $post_array = get_post( $post_id, ARRAY_A );

    if ( $post_array ) {
        $r['post'] = $post_array;
    }

    echo json_encode( $r );

    exit;
}

// Ads shortcode so you can use the form anywhere you want.
add_shortcode( 'new_post_form', 'shortcode__new_post_form' );

// Use wp_enqueue_scripts action hook so you can correctly localize the script with admin ajax URL.
add_action( 'wp_enqueue_scripts', 'script__new_post_form' );

// Prefix 'wp_ajax_' is mandatory.
add_action( 'wp_ajax_new_post', 'maybe_insert_new_post' );

Créez un fichier JavaScript et écrivez-le (n'oubliez pas de mettre son URL dans votre functions.php): 

(function ($) {

    var el_form = $('#form-new-post'),
        el_form_submit = $('.submit', el_form);

    // Fires when the form is submitted.
    el_form.on('submit', function (e) {
        e.preventDefault();

        el_form_submit.attr('disabled', 'disabled');

        new_post();
    });

    // Ajax request.
    function new_post() {
        $.ajax({
            url: localized_new_post_form.admin_ajax_url,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'new_post', // Set action without prefix 'wp_ajax_'.
                form_data: el_form.serialize()
            },
            cache: false
        }).done(function (r) {
            if (r.post !== '' && r.preview_link !== '') {
                $('[name="ID"]', el_form).attr('value', r.post.ID);
                $('.preview-link', el_form)
                    .attr('href', r.preview_link)
                    .show();
                el_form_submit.attr('data-is-updated', 'true');
                el_form_submit.text(el_form_submit.data('is-update-text'));
            }

            el_form_submit.removeAttr('disabled');
        });
    }

    // Used to trigger/simulate post submission without user action.
    function trigger_new_post() {
        el_form.trigger('submit');
    }

    // Sets interval so the post the can be updated automatically provided that it was already created.
    setInterval(function () {
        if (el_form_submit.attr('data-is-updated') === 'false') {
            return false;
        }

        trigger_new_post();
    }, 5000); // Set to 5 seconds.

})(jQuery);

Maintenant, créez une nouvelle page et insérez-y le shortcode [new_post_form]. Ouvrez la page et testez votre formulaire.

Si cela fonctionne pour vous, s'il vous plaît accepter ma réponse comme votre solution.

3
filipecsweb

Vous devez créer une publication en tant que brouillon pour la prévisualisation. Vous pouvez utiliser ce formulaire, cette fonction et le script ajax pour cela.

Premier formulaire standard pour le nouveau poste;

<form method="post" id="new_post_form">
    <input type="text" name="post_title" id="title" />
    <?php
    /**
     * Simple editor for test reasons
     */ 
        wp_editor( '', 'post_content' );
    ?>
    <input type="hidden" name="author_id" value="<?php echo get_current_user_id(); ?>" />
    <input type="text" name="security" value="<?php echo wp_create_nonce( "ajax_securiy_nonce" ); ?>">
    <input type="hidden" name="action" value="post_new_thing">
    <input type="submit" id="submit_preview" value="Submit & Preview" />
</form>

Nous allons utiliser ajax pour poster. Vous avez donc besoin d’une fonction ajax PHP pour cela. Vous pouvez utiliser cette fonction dans votre functions.php

function add_header_ajax_url(){
    echo '<script type="text/javascript">var ajaxurl = "<?php echo admin_url("admin-ajax.php"); ?>";</script>';
}

add_action( 'wp_head', 'add_header_ajax_url');

add_action( 'wp_ajax_post_new_thing', 'post_new_thing' );

function post_new_thing() {
    /**
     * Post new for post type
     */
    check_ajax_referer( 'ajax_securiy_nonce', 'security' );

    $title     = sanitize_text_field( $_POST['post_title'] );
    $content   = sanitize_text_field( $_POST['post_content'] );
    $author_id = sanitize_text_field( $_POST['author_id'] );

    $args = array(
        'post_title'   => $title,
        'post_content' => $content,
        'post_type'    => 'post',
        'author'       => $author_id,
        'post_status'  => 'draft',
    );

    $posts = wp_insert_post( $args );


    if( is_wp_error( $posts ) ){
        echo json_encode( $posts->get_error_messages() );
    } else {
        if ( !function_exists( 'get_preview_post_link' ) ) { 
            require_once ABSPATH . WPINC . '/link-template.php'; 
        } 
        $post_preview = get_preview_post_link($posts);
        echo $post_preview;
    }
    wp_die();
}

Cette fonction renvoie le lien de prévisualisation. Créez également une publication dont le statut est brouillon. Nous allons forcer la fonction de retour pour ouvrir l'aperçu dans un nouvel onglet. Utilisez les fonctions où vous voulez (probablement en pied de page).

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#submit_preview').submit(function(e){
            $.ajax({
                type: 'post',
                url : ajaxurl,
                data : $('#new_post_form').serialize(),
                success : function(data){
                    window.open(data,'_blank');
                }
            });
            e.preventDefault();
        });
    });
</script>

Ces codes devraient fonctionner comme prévu. Commentez-moi si le code fonctionne ou non.

1
Serkan Algur

comment puis-je obtenir un formulaire frontal avec une option de prévisualisation pour créer une publication personnalisée basée sur l'entrée? Je veux le faire sans aucun plugin.

sans plugin, ce n'est pas possible à moins que vous ne fassiez beaucoup de codage personnalisé, ce qui équivaut à obtenir un plugin.

La seule façon de réaliser cela sans utiliser de plug-in consiste à utiliser le mécanisme de post-création/prévisualisation déjà disponible dans WP, à savoir le tableau de bord d'administration. Utilisez un plugin tel que Adminimize pour affiner les privilèges de vos utilisateurs ou créer un nouveau rôle personnalisé pour eux, leur permettant de créer de nouvelles publications et de les passer en revue à partir du tableau de bord principal, tout en limitant/supprimant les autres éléments de menu accès à ce dont ils ont besoin.

1
Aurovrata

Choisissez ce que vous pensez être idéal pour la forme de votre après d'abord. Créez-le ensuite à l'aide de l'API plug-in de WordPress ou apprenez la langue de ceux disponibles. Effectuer une recherche sur WordPress Forms sur Google peut être utile si vous essayez de choisir une API.

Il y en a beaucoup, alors décidez vous-même ce qui vous est destiné.

0
Nathan Powell