web-dev-qa-db-ja.com

wp_ajax（）の質問.. wp_enqueue_scriptを使用していませんか？

こんにちは、変な状況...私は初めてwp_ajax（）を使用しようとしています。私は通常、通常のjQueryのajaxリクエストを使用していますが、私の現在のケースでは多くのバグがあるので、wp_ajax（）を試すことを考えました。

私はそれを得ない！

次のコードは...

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

// 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' ) ) );

〜で終わる.

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

しかし、私はこれを使うべきプラグインや何かを持っていません、しかし私のページ全体がこのajaxリクエストをしなければなりません。したがって、wp_enqueue_script()の最初の行全体が意味をなさない。私は既にscript.jsファイル全体を<head>セクションに手動で埋め込んでいるので、このために特定のjsファイルをロードする必要はありません。これがajaxリクエストが起動される場所です。しかし、一度この行を省略すると（//wp_enqueue_script()...）、2番目の部分は機能しません。

だから何もないでしょう

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */

私のページの私のセクションに印刷される。私はここで何が悪くなっているのですか？私は本当に私の通常のscript.jsファイルの中からajaxリクエストを起動できる必要があります。

何か案は？

update：私のscript.jsファイル（手動で私の中に埋め込まれている）はajaxリクエストを呼び出すべきです：

var response;
            $.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 : 'wp_ajax_nopriv_searchmap',
                },
                function( response ) {
                    $sr.html(response);

私が呼び出したい私のfunctions.phpファイルの中の関数はこんな感じです：

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

// 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' ) ) );

// this hook is fired if the current viewer is not logged in
if (isset($_GET['action'])) {
    do_action( 'wp_ajax_nopriv_' . $_GET['action'] );
}
// if logged in:
if (isset($_POST['action'])) {
    do_action( 'wp_ajax_' . $_POST['action'] );
}
if(is_admin()) {
    add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
} else {
    add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );
}

function my_searchmap_function() {

// Start output buffer
ob_start();
?>
div>
    <h3>Pages</h3>
        <ul>
            <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
        </ul>
    <h3>Posts</h3>
        <?php $first = 0;?>
        <ul>
        <?php
        $myposts = get_posts('numberposts=-1&offset=$first');
        foreach($myposts as $post) :
        ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
        </ul>
    <h3>Categories</h3>
        <ul>
            <?php wp_list_categories('title_li=&orderby=name'); ?>
        </ul>
</div>  
<?php 

    $output = ob_get_contents();

    // Stop output buffer
    ob_end_clean();
    $response = json_encode($output);

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

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

私はここで何を誤解しますか？通常のJavaScriptファイル内からajaxを介してデータを要求できるようにしたいだけです。私は私のJavaScriptファイルに戻ってくるHTMLを処理する必要があります。

私が何をしているのか、それともうまくいっているのか、私がこれを機能させるためにしなければならないことはありますか？

jqueryajaxwp-enqueue-script
1
mathiregister

さて、最初に少し分解してみましょう。そうすれば、これらの機能の目的を理解できます。

  • wp_enqueue_script（）

    説明：
    生成されたWordPressページにjavascriptを追加する安全な方法。基本的に、まだ含まれていない場合はスクリプトを含め、WordPressが出荷するスクリプトをロードします。

  • wp_localize_script（）

    説明：
    スクリプトをローカライズしますが、スクリプトが既に追加されている場合のみ。ページに任意のJavaScriptデータを含めるためにも使用できます。

スクリプトをローカライズするとき、あなたがしていることは、Javascript変数をページに出力するアクションを設定することだけですが、これらの変数は、登録するスクリプトに結び付けられ、wp_localize_scriptに渡す最初のパラメーターです。また、スクリプトhandleとしても知られています。

wp_enqueue_scriptはjavascriptファイルをキューに入れるためのものであり、wp_localize_scriptはエンキューシステムを介してロードされたスクリプトに付随するように設計されています。何もローカライズすることはできません。したがって、キューに登録しない場合、wp_localize_scriptはここでは役に立ちません。

通常、このような2つを使用します。

$myvars = array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'somevar1' => $somevar_from_somewhere,
    'somevar2' => $somevar_from_elsewhere
);
wp_enqueue_script( 'my-ajax-request', plugins_url( '/path/to/somefile.js', __FILE__ ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );

これにより、ページに次の出力が生成されます。

<script type="text/javascript" src="path/to/somefile.js"></script>

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php",
    somevar1: "somevalue",
    somevar2: "someothervalue"
};
/* ]]> */
</script>

これをスクリプトで参照できます。たとえば.

jQuery(document).ready( function($) {

    alert( MyAjax.somevar1 ); // Produces somevalue
    alert( MyAjax.somevar2 ); // Produces someothervalue

});

これをすべて一緒に投げると、コードは次のようになります。

// Setup the ajax callback for the "searchmap" action 
add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );

// The callback function for the "searchmap" action
function my_searchmap_function() {
    $myposts = get_posts('numberposts=-1&offset=$first');
?>
<div> 
    <h3>Pages</h3>
    <ul>
        <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
    </ul>

    <h3>Posts</h3>
    <ul>
        <?php foreach( $myposts as $post ) : setup_postdata( $post ); ?>

        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

        <?php endforeach; ?>
        <?php wp_reset_postdata(); ?>
    </ul>

    <h3>Categories</h3>
    <ul>
    <?php wp_list_categories('title_li=&orderby=name'); ?>
    </ul>
</div>  
<?php 
    die;
}

JS ..（エンキューおよびローカライズされたと仮定）

jQuery(document).ready(function($) {
    $('a.myajax').click(function(){
        var data = {
            action: 'searchmap' // <--- this is the correct action name
        };
        $.post( MyAjax.ajaxurl, data, function(response) {
            $('#myresult').html(response);
        });
        return false;
    });
});

そして、アクションをトリガーするためにページで必要な実際のHTML。

<a class="myajax" href="#">Click me to fetch ajax content</a>
<div id="myresult"></div>

実際の回答

あなた自身のことをする必要があり、あなたのスクリプトのvarsを印刷する必要があることに関して、私はこのようなことをすることをお勧めします...

add_action( 'wp_head', 'my_js_vars', 1000 );

function my_js_vars() {

    // If it's not a specific page, stop here
    if( !is_page( 'my-page-with-ajax' ) )
        return;
    ?>
    <script type="text/javascript">
    /* <![CDATA[ */
    var MyAjax = {
        ajaxurl: '<?php admin_url('admin-ajax.php'); ?>',
            somevar: 'somevalue',
            someothervar: 'someothervalue'
    };
    /* ]]> */
    </script>
    <?php
    /*
       NOTE: 
       Make sure not to leave a comma after the last item 
       in the JS array, else IE(Internet Explorer) will choke on the JS.
    */
}

他の人が読むために以前に投稿したコードを残しました。

10
t31os

コーデックスのこのチュートリアルでは、プロセスの簡単な概要を説明します。

http://codex.wordpress.org/AJAX_in_Plugins

ajaxurl変数はすでにWP coreによって定義されていますが、それは管理領域内でのみです。フロントエンドに追加するには、次のようにします。

<?php
function pluginname_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
add_action('wp_head','pluginname_ajaxurl');
1
scribu