web-dev-qa-db-ja.com

WordpressでAjaxをロードする方法

私は、jQueryで通常の方法でajaxを使用することに慣れています。
しばらく試してみましたが、Wordpressが機能するために必要なものがわかりません...
ここにあるものは、いくつかのチュートリアルまたは記事から引用したものです。
これはfunctions.phpにあります（子テーマ内）：

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
   wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');

JQuery自体がロードされ、正常に動作しています。

私は次のようないくつかの基本的なajaxを試しました：

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});

これに加えて、最初から正しくロードされているかどうかをテストする方法がわかりません...

ここで助けていただければ幸いです。

編集：
firebugでは、このエラー：

ReferenceError: ajax_script is not defined
       url:   ajax_script.ajaxurl,
phpjqueryajaxwordpress
24
grai

あなたのリクエストに応じて、私はあなたの答えにこれを入れました。

Hieu Nguyenが答えで提案したように、ajaxurl javascript変数を使用してadmin-ajax.phpファイルを参照できます。ただし、この変数はフロントエンドで宣言されていません。これをフロントエンドで宣言するのは簡単です。テーマのheader.phpに次のものを追加します。

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

Wordpress AJAX のドキュメントで説明されているように、wp_ajax_（action）とwp_ajax_nopriv_（action）の2つの異なるフックがあります。これらの違いは次のとおりです。

  • wp_ajax_（action）：これは、管理パネル内からajax呼び出しが行われた場合に起動されます。
  • wp_ajax_nopriv_（action）：これは、ウェブサイトのフロントエンドからajax呼び出しが行われた場合に起動されます。

他のすべては、上記のリンクされたドキュメントで説明されています。ハッピーコーディング！

追伸次に、shouldが機能する例を示します。 （テストしていません）

フロントエンド：

<script type="text/javascript">
    jQuery.ajax({
        url: ajaxurl,
        data: {
            action: 'my_action_name'
        },
        type: 'GET'
    });
</script>

バックエンド：

<?php
    function my_ajax_callback_function() {
        // Implement ajax function here
    }
    add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' );    // If called from admin panel
    add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' );    // If called from front end
?>

[〜＃〜] update [〜＃〜]これは古い答えですが、人々から親指を上げ続けているようです-これは素晴らしいです！これは一部の人々に役立つと思います。

WordPressには、関数 wp_localize_script があります。この関数は、次のような変換を目的とした3番目のパラメーターとしてデータの配列を受け取ります。

var translation = {
    success: "Success!",
    failure: "Failure!",
    error: "Error!",
    ...
};

そのため、これは単にHTMLヘッドタグにオブジェクトをロードします。これは次の方法で利用できます。

バックエンド：

wp_localize_script( 'FrontEndAjax', 'ajax', array(
    'url' => admin_url( 'admin-ajax.php' )
) );

このメソッドの利点は、テーマにajax URL変数をハードコーディングしていないため、テーマとプラグインの両方で使用できることです。

フロントエンドでは、URLにajax.url。前の例のajaxurlだけではありません。

48
Shane

まず、このページをよくお読みください http://codex.wordpress.org/AJAX_in_Plugins

次に、_ajax_script_が定義されていないため、_url: ajaxurl_に変更する必要があります。上記のコードにfunction1()が表示されていませんが、他のファイルで既に定義されている可能性があります。

そして最後に、Firebugを使用してajax呼び出しをデバッグする方法を学び、ネットワークとコンソールのタブが友達になります。 PHP側では、print_r()またはvar_dump()が友達になります。

6
Hieu Nguyen

Wp_localize_scriptを使用してURLを渡します：

wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );

その後、js内で、次のように呼び出すことができます

admin_url.ajax_url
2
Goran Jakovljevic

個人的に私はwordpressで他のサイトでajaxを行うのと同じ方法でajaxを行うことを好みます。すべてのajaxリクエストを処理するプロセッサphpファイルを作成し、そのURLを使用します。 wordpressでは正確にhtaccessができないため、次のようにします。

1. wp-contentフォルダーにあるhtaccessファイルで、既にあるものの下にこれを追加します

<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>

この場合、私のプロセッサフ​​ァイルはforms.phpと呼ばれます-これをheader.phpやfooter.phpなどの他のすべてのファイルとともにwp-content/themes/themeNameフォルダに配置します...それはただあなたのテーマにありますルート。

2.）私のajaxコードでは、このようにURLを使用できます

$.ajax({
    url:'/wp-content/themes/themeName/forms.php',
    data:({
        someVar: someValue
    }),
    type: 'POST'
});

もちろん、以前、成功、またはエラーの種類を追加することができます...しかし、これは（=信じる）簡単な方法ですwordpress 8つの異なる場所で何が起こるのか、これにより、ページレベルでjsコードを置く場所で他の人が見ていることを避けることができるので、jsファイルを別々に保つことを好むphpに浸ることができます。

2
Jason Boerner