web-dev-qa-db-ja.com

フロントエンド投稿送信フォーム

私はコミュニティを中心としたサイトに取り組んでいます。登録ユーザーがドラフト投稿を送信するためのフォームを作成します。投稿されたドラフトは、サイトの編集者によって承認または削除されます。私がそれを実装しようとしているのは、レビュー用にドラフト投稿を送信できるようにするフォームを含むカスタムページテンプレートを使うことです。

誰かがこれを実行し、それが機能するコードを私に示すことができるかどうか疑問に思いました。検索しようとしましたが、これまでのところコードが機能していません。

私はワードプレス3.1を使用しています

ありがとう:)

theme-developmentthemescustomizationforms
2
user4238

私はこれが古い質問であることを知っています...
しかし！ Niceビューの数があり、それは人々がまだこれを必要としていることを意味します。
たぶんそれはあなたがこの質問を閉じるのを助けるでしょう;）

これがajaxのバージョンです

  • ページ自体
  • jSコード
  • PHP Ajax受信者と発行コード。

あなたのページテンプレートの中
- これは一例です - あなたのテーマ構造に合わせてカスタマイズしてください

<div id="submit-post">
    <?php
        $content            = ''; 
        $editorSettings     = array(
            'wpautop'           => true,
            'media_buttons'     => false,
            'textarea_name'     => 'articleEditor',
            'editor_class'      => 'articleEditor',
            'theme'             => 'advanced',
            'textarea_rows'     => get_option('default_post_edit_rows', 12),
            'tinymce'           => array(
                'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv',
                'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,backcolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help',
                'theme_advanced_buttons3' => '',
                'theme_advanced_buttons4' => ''
            ),
            'quicktags'         => array(
            'buttons'           => 'b,i,ul,ol,li,link,close'
            )
        );

        // BUILD CATEGORY SELECT
        $client_select  = '';
        $categories     = get_categories('hide_empty=0');
        $optionname     = "articlecat";
        $emptyvalue     = "";

        // SELECT DROP DOWN TERMS
        $client_select  .= '<select name="'.$optionname.'" class="form-control input-normal" id="'.$optionname.'"><option selected="'.$selected.'" value="'.$emptyvalue.'">'.__('Choose a category', THEME_NAME).'</option>';
        foreach($categories as $category){
            if($currentCatId == $category->term_id) {$selected = 'selected="selected"';} else {$selected = '';}
            $client_select  .= '<option name="'.$category->term_id.'" value="'.$category->term_id.'" '.$selected.'>'.$category->name.'</option>';
        }
        $client_select  .= '</select>';

    ?>


    <div class="post-title"><input type="text" id="title" class="" placeholder="<?php _e('Article Title', THEME_NAME); ?>" /></div>
    <div class="post-category"><?php echo $client_select; ?></div>
    <div class="post-body">
        <label for="description"><?php _e('Article Body: ', THEME_NAME); ?></label> <br />
        <?php wp_editor($content, 'articlebody', $editorSettings); ?>
    </div>
    <div class="submit-post"><button type="button" id="submitPost"><?php _e('Submit Post', THEME_NAME); ?></button></div>

</div>

jQuery Ajaxコード
- 私はあるフォルダにsubmit-article.jsファイルを作成します

jQuery(function($){

    //*********************************************
    //  INSERT NEW ARTICLE
    //*********************************************
    $('.insert_article_btn').click(function () {

        $('.topAjaxLoader').fadeIn();

        var parentbox   =   $('#submit-post');
        var title       =   $(parentbox).find('input#title').val();
        var body        =   $(parentbox).find('#articlebody').val();
        var body_ifr    =   $('#articlebody_ifr').contents().find('body').html();
        var category    =   $(parentbox).find('#articlecat option:selected').val();

        $.post(ajax_object.ajaxurl, {
            action: 'insert_article',
            title: title,
            body: body,
            body_ifr: body_ifr,
            category: category,
        }, function(data) {


            var $response   = $(data);
            var postid      = $response.filter('div#postID').html();
            var success     = $response.filter('div#success').html();
            var error       = $response.filter('div#error').html();

            if(error) {
                // DO SOMETHING WITH ERROR MESSAGE
            }

            if(success) {
                // DO SOMETHING WITH SUCCESS

                $(parentbox).find('input#title').val('');
                $(parentbox).find('#articlebody').val('');
                $("#articlebody_ifr").contents().find("body").html('');
                $(parentbox).find("#articlecat").val([]);   
            }   


        });
    });
});

PHP Ajaxコード

  • 私はいくつかのフォルダにsubmit-article.phpファイルを作成します

  • 最初の行のURLがJSファイルを指していることを確認してください。

        wp_enqueue_script('ajax-insert-article', get_stylesheet_directory_uri().'/ajax/submit-article.js', array('jquery'), 1.0 );
wp_localize_script('ajax-insert-article', 'ajax_object', array( 'ajaxurl' => admin_url('admin-ajax.php')));

add_action('wp_ajax_insert_article', 'insert_article');
function insert_article() {

$title      =   sanitize_text_field( $_POST['title'] );
$body       =   sanitize_text_field( $_POST['body'] );
$body_ifr   =   sanitize_text_field( $_POST['body_ifr'] );
$category   =   intval( $_POST['category'] );


// SET WHICH ARTICLE BODY
if(!$body) {$body = $body_ifr;}


// VERIFY ALL FIELDS EXISTS
if(!$title) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('Title', THEME_NAME).'</div>';}
elseif(!$body) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('article body', THEME_NAME).'</div>';}
elseif(!$category) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('article category', THEME_NAME).'</div>';}
else{

    // INSERT POST
    $post = array(
        'post_title'    => $title,
        'post_content'  => stripslashes($body),
        'post_status'   => 'publish',
        'post_type'     => 'post',
        'post_category' => array($category)
    );
    $postid =   wp_insert_post($post, 10, 1);
    do_action('wp_insert_post', 'wp_insert_post', 10, 1); 

    echo '<div id="success">Article Published!</div>';

}

wp_die();

    }

1
Sagive SEO