web-dev-qa-db-ja.com

ドロップダウン選択に基づいてWordPressループを変更または更新する

カスタム投稿タイプ "Distributors"を照会してサイドバーに9か所の場所を表示しているContact Usページがあります。私はユーザーに分類法 "Location"によって埋められるドロップダウンを使用できるようにしたいです。たとえば、ユーザーがドロップダウンから「California」を選択すると、Californiaでタグ付けされた投稿だけでリストが自動的に更新されます。これについて最善の方法は何ですか？また、ユーザーが自分の国や州に絞り込んだときにページが更新されても構いません。

理想的には、親カテゴリを1つのドロップダウンで表示したいのです。ドイツ、日本、アメリカなど。その後、2番目のドロップダウンにそのカテゴリの子が追加されます。たとえば、最初のドロップダウンにUSAが表示され、次にCaliforniaが2番目のドロップダウンに表示されます。

ありがとう。

custom-post-typesquery-poststaxonomyloop
1
nurain

最初にこのコードを使用して、親ドロップダウンを作成します。

<select id="parent">
    <option>-</option>
    <?php
        if(taxonomy_exists('parent_taxonomy_name')):
            $results = get_terms('parent_taxonomy_name',array('fields'=>'all','parent'=>0));
            if ($results):
                foreach ($results as $result):
    ?>                                                                 
                    <option value="<?php echo $result->name; ?>"><?php echo $result->name; ?></option>
    <?php 
                endforeach;
            endif;
        endif;
    ?>
</select>

2番目のドロップダウンボックスに入力するには、ajax/jqueryを使用する必要があります。

 <select id="child">
        <option>-</option>
    </select>

jqueryコードは次のようになります。

jQuery("#parent").change(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        MyAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'myajax-submit',

            // other parameters can be added along with "action"
            parent : jQuery(this).val()
        },
        function( response ) {
            if(response['success'] != false)
            {
                jQuery('#child').empty().append('<option value="">Select Location</option>');
                jQuery.each(response,function(index,value){
                    jQuery('#child').append('<option value="'+value+'">'+value+'</option>');
                });
            }
        }
    );
});

最後に、functions.phpファイルのajaxを次のように処理します。

// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

function myajax_submit() {
    // get the submitted parameters
    $parent = $_POST['parent'];
    // generate the response
                $locations = ashyana_getTaxonomyValues( 'parent_taxonomy_name', $parent, 0 );
                $results = array();
                if ($locations):
                    foreach ($locations as $location):                                
                        $loc[] = $location->name;
                    endforeach;
                    $response = json_encode( $loc );
                else:
                    $response = json_encode( array( 'success' => false ) );
                endif;

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don't forget to "exit"
    exit;
}

それが役に立てば幸い。注：必要に応じて、分類名やその他のパラメーター/引数/変数を変更してください。

2
booota

答えに含まれるコメントを説明するのに役立つリンクを共有したいと思いました。

http://solislab.com/blog/5-tips-for-using-ajax-in-wordpress/

これはコメントの1で言及された先端1です：

  1. WP_LOCALIZE_SCRIPT（）を使用してJAVASCRIPTグローバル変数を宣言する

Wp_localize_script（）はローカライズのために作成されていますが、それはまた別の素晴らしい用途があります。スクリプトで使用する名前空間を使用してJavaScript変数を宣言できます。構文は次のとおりです。

wp_localize_script( $handle, $namespace, $variable_array );

これがAJAXを扱うファイルへのURLを宣言する方法です（この例では、私はadmin-ajax.phpを使います。

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

こうすれば、JavaScriptコードを印刷するのにPHPを使用する必要がなくなります。要素内で生成されたHTMLを見ると、これがわかります。

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script><script type="text/javascript">// <![CDATA[
<span class="mceItemHidden">
/* 
 */
var <span class="hiddenSpellError" pre=""-->MyAjax = {
    <span class="hiddenSpellError" pre="">ajaxurl</span>:  "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]&gt; */
</span>
// ]]></script>

これで、ajax.jsファイルで、PHPに頼らずにwp-load.phpを含めずにMyAjax.ajaxurlを使用できます。リクエストを送信するJavaScriptコードの設定、およびリクエストを適切に処理する方法の詳細については、下記のヒント＃2を参照してください。

0
WorkingMan8798