web-dev-qa-db-ja.com

プレビュー付きのカスタム投稿を作成するためのフロントエンドフォーム

入力に基づいてカスタム投稿を作成するためのプレビューオプションを含むフロントエンドフォームを作成する方法を教えてください。私はそれをプラグインなしでやりたいです。簡単な例が大いに役立ちます。

それがに渡すことができるように記入されているフォームのIDを取得することは可能ですか？

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

Get_the_ID（）を取得しようとしましたが、formが配置されているページのIDを追加しました。ページのIDもフォームフィールドが生成された後に生成されます。

このフォームは登録済みおよびログイン済みのユーザー用です。私はフォームが生成するポストのIDを取得するための解決策を得ることができれば私はさらに行くために良い位置になります。

ありがとう

advanced-custom-fieldspreviews
5
Latheesh V M Villa

目標を達成するために使用できる方法はたくさんあります。これがひとつ….

ステップ：

  1. フォームをレンダリングするためのショートコードを作成します。
  2. フォーム送信を処理するJavaScriptファイルを作成してキューに入れます。
  3. 投稿/カスタム投稿を作成/更新するためのPHP関数を作成します。

あなたの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' );

JavaScriptファイルを作成して書き込みます（そのURLを忘れずに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);

それでは、新しいページを作成し、その中にショートコード[new_post_form]を挿入します。ページを開いてフォームをテストしてください。

それがあなたのために働くならば、あなたの解決策として私の答えを受け入れてください。

3
filipecsweb

プレビュー用のドラフトとして投稿を作成する必要があります。このフォーム、関数、そしてajaxスクリプトを使うことができます。

新しい投稿用の最初の標準フォーム。

<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>

投稿にはajaxを使用します。そのためにはajax PHP関数が必要です。あなたの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();
}

この関数はプレビューリンクを返します。下書きとしてステータスを持つ投稿も作成します。新しいタブでプレビューを開くようにリターン機能を強制します。必要に応じて（おそらくフッターに）関数を使用してください。

<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>

このコードは期待通りに動作するはずです。コードがうまくいくかどうか私にコメントしてください。

1
Serkan Algur

入力に基づいてカスタム投稿を作成するためのプレビューオプションを含むフロントエンドフォームを作成する方法を教えてください。私はそれをプラグインなしでやりたいです。

プラグインがなければ、プラグインを取得するのと同じことですが、カスタムコーディングを多く行わない限り不可能です。

あなたがプラグインを使わずにこれを達成することができる唯一の方法はWPですでに利用可能なポスト作成/プレビューメカニズムを使用することです、それは管理ダッシュボードです。 Adminimize などのプラグインを使用してユーザーの権限を微調整したり、新しいカスタムロールを作成したりして、新しい投稿を作成してバックエンドダッシュボードからレビューできるようにします。彼らが必要とするものへのアクセス。

1
Aurovrata

あなたが最初にあなたの後のフォームにとって理想的であると思うものを選びなさい。その後、WordPressのプラグインAPIを使用してそれを作成するか、利用可能なものの言語を学びます。 GoogleでWordPressフォームを検索することは、APIを決めようとする場合に役立ちます。

たくさんありますので、自分にとってどちらを意味するのかを自分で決めてください。

0
Nathan Powell