WordPressのAjaxで非同期処理を実装する方法を徹底解説(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのAjaxで非同期処理を実装する方法について解説していきたいと思います。

Ajaxとは、Asynchronous JavaScript and XMLの略で、Webページを更新せずにサーバーとデータをやり取りするための技術です。

このWebページを更新せずにサーバーとデータをやり取りすることを非同期通信といいますが、この非同期通信を利用した実装ができれば、様々な便利な機能を実装することができます。

WordPressにはこのAjaxが標準機能としてあらかじめ搭載されており、このWordPressのAjaxを利用すれば効率的かつ簡単に機能を実装することができます。

当記事ではこのAjaxの実装方法やメリットなどについて徹底的に解説し、お仕事などで情報をそのまま利用できるように構成いたしましたので、よろしければぜひ繰り返しご活用ください。

Ajaxとは

Ajax（エイジャックス）とは、Asynchronous JavaScript and XMLの略で、Webページを更新せずにサーバーとデータをやり取りするための技術のことをいいます。

通常の場合、Webページでは、サーバーにデータを送信したり、新しい情報を取得するたびにページ全体を再読み込み（レンダリング）する必要がありました。（これを「同期処理」といいます）

しかし、Ajaxを使うと特定の部分だけを更新できるため、ページの更新をせずに済むのでユーザー体験が向上します。（これを「非同期処理」といいます）

以下の表示にAjaxの特徴をおまとめいたしました。

このようにAjaxは、ユーザーの操作に応じて非同期的にデータをサーバーとやり取りし、ページのリロードを伴わずに情報を更新するための仕組みです。

たとえば、「いいね」ボタンをクリックした際にカウントを即座に更新したり、フォームを送信した後にメッセージを表示するような操作を可能にします。

通常、Webページの更新にはサーバーへのリクエストと、その結果得られるデータを含む新しいページを再読み込みする必要がありますが、Ajaxを利用することで、特定のデータのみをやり取りし、ページ全体を再読み込みすることなく表示内容を更新できます。

非同期処理とは

非同期処理とは、ある処理を実行する間に他の処理を同時進行で行える仕組みのことです。

プログラムは通常「同期処理」で動作しますが、Ajax等での非同期処理を使うと、プログラムの読み込みの処理中において、待ち時間を有効活用して他の作業を並行して進めることができます。

非同期処理では、リクエスト（要求）を送信したあと、結果が返ってくるまで別の作業を行い、結果が返ってきたときにその処理を再開します。これにより、ユーザーの操作に対してスムーズに反応できます。

非同期通信とも呼ばれたりますので、覚えておいてください。

WordPressのAjaxとは

WordPressのAjaxは、WordPressに標準搭載されているAjax機能のことをいいます。
標準で搭載することで、Ajaxを簡単に実装するための仕組みが用意されています。

具体的には、admin-ajax.phpというファイルを利用して、Ajaxリクエストを処理し、適切なレスポンスを返すことができます。これにより、プラグインやテーマの開発者は、何かしらの実装にAjaxを組み込むことが簡単になります。

WordPressのAjaxを活用することで、ユーザー体験が大幅に向上します。たとえば、WordPress実装の以下のようなケースでAjaxは非常に有効です。

• WordPressループでの記事一覧の絞り込み検索をリアルタイムで表示
• 無限スクロールによるコンテンツの読み込み
• 非同期のフォーム送信
• リアルタイムな通知機能

上記のように、WordPressのAjax機能は、管理画面での操作やフロントエンドのカスタマイズなど、さまざまな場面で活用されています。

この仕組みを理解し、効果的に使用することで、より直感的でダイナミックなWebサイトを構築することが可能になります。

WordPressのAjaxの実装に必要な関数やフック、ファイル

まず実装方法についてお伝えする前に、事前にWordPressでAjaxを実装する際に必要な主な関数やフックについて解説します。

• wp_enqueue_script()関数
• wp_localize_script()関数
• admin-ajax.php
• wp_ajax_{action}フック
• wp_ajax_nopriv_{action}フック
• wp_die()関数
• check_ajax_referer()関数
• wp_create_nonce()関数

それぞれ解説いたします。

wp_enqueue_script()関数

wp_enqueue_script()関数は、JavaScriptファイルをWordPressに読み込ませるための関数です。
特に、Ajaxのリクエストを処理するJavaScriptファイル（以下で解説するサンプルコードにあるmain.js など）をフロントエンドに読み込む際に使用します。

この関数はwp_enqueue_scriptsフックにて使用します。

以下はコードの使用例になります。

wp_enqueue_script('ajax-script', get_template_directory_uri() . '/js/ajax.js', array('jquery'), null, true);

また、以下は公式のページとなります。

wp_localize_script()関数

wp_localize_script()関数は、JavaScriptファイルにサーバー側のデータを渡すための関数です。
これにより、JavaScript内でPHPの値を利用できます。特に、admin-ajax.phpへのURLやセキュリティ用のnonceを渡すのに使われます。

以下はコードの使用例になります。

wp_localize_script('ajax-script', 'ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('my_nonce')
));

また、以下は公式のページとなります。

admin-ajax.php

admin-ajax.phpというPHPファイルは、WordPressでAjaxリクエストを処理するための専用のエンドポイントです。
フロントエンドから送信されたリクエストは、このadmin-ajax.phpに送信され、サーバーサイドで処理が行われます。

使い方としては、wp_localize_script()関数で渡されたajax_urlに基づき、admin-ajax.phpへリクエストを送信します。

wp_ajax_{action}フック

wp_ajax_{action}フックは、Ajaxリクエストを受け取った際に、特定のアクションを処理するコールバック関数を設定するためのフックです。

{action}にはリクエストで送られるアクション名が入ります。これにより、特定のアクションに対する処理をカスタマイズできます。

以下はコードの使用例になります。（{action}が「my_custom_action」の場合）

add_action('wp_ajax_my_custom_action', 'my_custom_action_callback');

また、以下は公式のページとなります。

wp_ajax_nopriv_{action}フック

wp_ajax_nopriv_{action}フックは、未ログインユーザー（ゲスト）からのAjaxリクエストに対して処理を行うためのフックです。

wp_ajax_{action}フックはログインユーザー用のフックですが、wp_ajax_nopriv_{action}フックは未ログインユーザー用に使用されます。

以下はコードの使用例になります。（{action}が「my_custom_action」の場合）

add_action('wp_ajax_nopriv_my_custom_action', 'my_custom_action_callback');

また、以下は公式のページとなります。

wp_die()関数

Ajaxリクエストの処理を終了させるために使用します。この関数は、Ajaxレスポンスを終了するために必須であり、レスポンスを返す前に呼び出します。

以下はコードの使用例になります。

wp_die(); // Ajaxレスポンスを終了

また、以下は公式のページとなります。

check_ajax_referer()関数

セキュリティ対策として、Ajaxリクエストに含まれるnonce（ワンタイムトークン）を検証します。この関数を使うことで、リクエストが正当なものであることを確認できます。

以下はコードの使用例になります。

check_ajax_referer('my_nonce_action', 'nonce');

また、以下は公式のページとなります。

wp_create_nonce()関数

wp_create_nonce()関数は、セキュリティ対策のために、Ajaxリクエストに使うnonceを生成するための関数です。
このnonceはwp_localize_script()関数でJavaScriptに渡し、リクエストに含めてサーバー側で検証します。

以下はコードの使用例になります。

$nonce = wp_create_nonce('my_nonce_action');

また、以下は公式のページとなります。

これらの関数やフックを適切に組み合わせることで、WordPressでのAjaxによる非同期通信を実装することができます。

主な流れとしては、フロントエンドからAjaxリクエストを送信し、バックエンドでリクエストを受け取り、必要な処理を行い、その結果をフロントエンドに返す、という一連の処理となります。

WordPressのAjaxの実装方法

それでは早速、Ajaxの実装方法について解説いたします。

まずWordPressのAjaxの実装手順は以下になります。

• WordPress搭載のjQuery本体を読み込む
• WordPress搭載のAjaxを読み込む
• フロントに表示用のUIのHTMLを追加する
• フロントの表示処理のためのJSコードを追加する
• functions.phpに出力処理を追加する

それぞれ解説いたします。

WordPress搭載のjQuery本体を読み込む

まずはjQuery本体ファイルを読み込みます。

Ajaxを使って何か実装する際は大体jQueryを利用することがほとんどなので、まずはJavaScriptライブラリであるjQueryの本体ファイルを読み込んでおくようにしましょう。

WordPressにはあらかじめjQueryというが搭載されているので、簡単なコードで読み込むことが可能です。

ただし、WordPressでは標準搭載ということで、jQueryが依存するスクリプトとして登録されているため、使用する際は明示的に読み込む必要があります。また、テーマやプラグインで独自に外部のjQueryを読み込むと競合を引き起こす可能性があるため、必ずWordPress搭載のものを利用するようにしましょう。

以下のコードは、jQueryを正しく読み込む方法の例です。利用する際はfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // WordPressに標準搭載されているjQueryを読み込む
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

これで、WordPressに搭載されたjQuery本体ファイルの読み込みは完了です。

WordPress搭載のAjaxを読み込む

次に、WordPressに標準搭載されているAjaxを読み込みます。

WordPressにはadmin-ajax.phpというAjax処理専用のエンドポイントが用意されています。

このadmin-ajax.phpを使うことで、サーバーと非同期通信を簡単に実現できます。
実装の際は、Ajaxの実装に必要なデータをJavaScriptで利用できるようにするため、スクリプトにローカル変数を渡します。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function enqueue_ajax_script() {
    wp_enqueue_script('ajax-filter', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
    wp_localize_script('ajax-filter', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php') // WordPressのAjax URL
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_script');

上記コード中の「wp_enqueue_script(‘ajax-filter’, get_template_directory_uri() . ‘/js/main.js’, array(‘jquery’), null, true);」の読み込み部分は、フロントで設置するUIに対するJavaScriptコードを記述するファイルになります。

また、そもそもこの読み込みコードがなければwp_localize_script()関数での処理が実行されず反映されなくなってしまうので、読み込む対象のJSファイル（ここでいう「main.js」）は空であっても必ず読み込むようにしましょう。

フロントに表示用のUIのHTMLを追加する

次に、フロントに表示用のUIのHTMLを追加します。

ユーザーが操作するUI（インターフェース）を作成するには、適切なHTML構造を追加する必要があります。たとえば、セレクトボックスを設置して選択した項目ごとに非同期処理が実行される機能を作成する場合、以下のようなHTMLを用意します。

ここではサンプルとして、カテゴリー項目一覧を動的にセレクトボックスとして選択できるようにし、選択したらそのカテゴリーに紐づけられた記事一覧を非同期で表示させることを想定しております。

以下のコードに表示したいページのPHPテンプレートファイルにコピー＆ペーストしてください。

<select id="filter-category">
    <option value="">すべてのカテゴリ</option>
    <?php
    // カテゴリ一覧を取得して表示
    $categories = get_categories();
    foreach ($categories as $category) {
        echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
    }
    ?>
</select>

<div id="filter-results">
    <?php
    // デフォルトの表示
    $query = new WP_Query(array(
        'post_type' => 'post',
        'posts_per_page' => -1, // 全ての投稿を取得
    ));

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="post-item">';
            echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>'; // 投稿タイトル
            echo '<p>' . get_the_excerpt() . '</p>'; // 抜粋
    
            // カテゴリーを表示
            $categories = get_the_category();
            if (!empty($categories)) {
                echo '<p>カテゴリー: ';
                foreach ($categories as $category) {
                    echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a> ';
                }
                echo '</p>';
            }
    
            echo '</div>';
        }
    } else {
        echo '<p>該当する投稿がありません。</p>';
    }
    wp_reset_postdata(); // クエリをリセット
    ?>
</div>

上記コードの「id=”filter-results”」のdivタグ何にあらかじめWordPressループのコードがあるのは、ページを初期アクセスした時に事前に記事一覧を表示させるためです。

セレクトボックスを選択したら、「id=”filter-results”」のdivタグ内のWordPressループの内容は非同期で上書きされることになります。

フロントの表示処理のためのJSコードを追加する

次に、フロントの表示処理のためのJSコードを追加します。
ここでは前述のwp_localize_script()関数で渡したデータを利用します。

以下のコードをJSファイル（もしくはfooter.phpなど）にコピー＆ペーストしてください。

jQuery(document).ready(function ($) {
    $('#filter-category').on('change', function () {
        // 選択された値を取得
        const category = $(this).val();

        // Ajaxリクエスト
        $.ajax({
            url: ajax_object.ajax_url, // wp_localize_script で渡されるURL
            type: 'POST',
            data: {
                action: 'filter_posts', // PHP側でフックするアクション
                category: category
            },
            success: function (response) {
                $('#filter-results').html(response); // 結果を更新
            },
            error: function () {
                alert('絞り込みに失敗しました。');
            }
        });
    });
});

上記コードは通常は先ほどの「WordPress搭載のAjaxを読み込む」のサンプルコードにあった「/js/main.js」へペーストして保存していただき、テーマやプラグインに追加したwp_enqueue_scriptフックで読み込むようにします。

上記コードを説明すると、jQueryを使ってカテゴリーが選択されるたびに非同期で投稿を絞り込む処理を実装しています。

まず、「jQuery(document).ready()」によって、ページが完全に読み込まれてから処理を開始します。

次に、#filter-categoryというselectタグで作られたカテゴリ選択フォームが変更された際にイベントが発生し、選択されたカテゴリーの値が取得されます。その値を使って、$.ajax()でサーバーにリクエストを送信します。

リクエスト先のURLは ajax_object.ajax_urlで指定され、サーバーには選択されたカテゴリーとともに 「action」として「filter_posts」が送られます。
この「filter_posts」はこのあと解説する「wp_ajax_(actionで送信されるデータ名)」「wp_ajax_nopriv_(actionで送信されるデータ名)」の2つのフックと関係してくるので覚えておいてください。

サーバー側で処理が成功すると、結果がHTMLとして返され、#filter-resultsのdivタグに表示されます。もし通信が失敗した場合は、エラーメッセージがアラートで表示されます。

このように、ページ全体をリロードすることなく、選択されたカテゴリに応じて投稿を動的に更新することができる仕組みとなっております。

functions.phpに出力処理を追加する

最後に、サーバー側でAjaxリクエストを処理し、レスポンスを返すためのコードをfunctions.phpに記述します。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function filter_posts_ajax() {
    // フォームから送信されたカテゴリIDを取得
    $category_id = isset($_POST['category']) ? intval($_POST['category']) : '';

    // WP_Queryで投稿を取得
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1
    );

    if ($category_id) {
        $args['cat'] = $category_id; // カテゴリーIDを使用
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="post-item">';
            echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>'; // 投稿タイトル
            echo '<p>' . get_the_excerpt() . '</p>'; // 抜粋
    
            // カテゴリーを表示
            $categories = get_the_category();
            if (!empty($categories)) {
                echo '<p>カテゴリー: ';
                foreach ($categories as $category) {
                    echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a> ';
                }
                echo '</p>';
            }
    
            echo '</div>';
        }
    } else {
        echo '<p>該当する投稿がありません。</p>';
    }

    wp_die(); // Ajaxの終了に必要
}
add_action('wp_ajax_filter_posts', 'filter_posts_ajax');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts_ajax');

上記コードは、WordPressのAjax機能を使用して、特定のカテゴリーにもとづいて投稿をフィルタリングする処理を実装しています。

最初に、filter_posts_ajax()関数が定義されています。この関数は、PHPのPOSTリクエストで送信された 「category」の値を受け取ります。このカテゴリIDが送信されていれば、intval()関数を使って整数に変換し、$category_id変数に保存します。もし送信されていなければ、空の文字列が代入されます。

次に、WP_Queryを使って、投稿を取得するためのクエリを作成します。クエリの引数$argsには、パタメーターとして投稿タイプ「post」と、全ての投稿を取得するために「posts_per_page」を -1 に設定しています。もし category_idが存在すれば、「cat」パラメータを使って、特定のカテゴリに絞り込みます。

WP_Queryが実行され、投稿がある場合、whileループ内で各投稿の内容を表示します。ここでは、get_permalink()関数で投稿のリンクを取得し、get_the_title()関数でタイトルを表示、get_the_excerpt()関数で抜粋を表示しています。

また、各投稿のカテゴリも表示します。get_the_category()関数でその投稿に関連するカテゴリを取得し、foreach文で各カテゴリをリンクとして表示します。

もし、WP_Queryで該当する投稿がなければ、「該当する投稿がありません。」というメッセージが表示されます。

最後に、wp_die()関数が呼び出され、Ajaxリクエストが終了します。この関数は、Ajax処理が終了したことをWordPressに知らせるために必要ですので、記述するようにしましょう。

また、この関数は wp_ajax_filter_postsフックと wp_ajax_nopriv_filter_postsフックという2つのアクションフックに登録されています。wp_ajax_filter_postsフックは、ログインしているユーザー用、wp_ajax_nopriv_filter_postsフックは、未ログインユーザー用に処理を実行します。

この2つのフックの「filter_posts」の文字部分は、先ほどのJSコードにあった「action: ‘filter_posts’,」の部分の「filter_posts」がそのまま当てはまりまして、ここが一致しなければ機能は実装できないのでご注意ください。

これでWordPressのAjaxの実装方法の手順は以上になります。

ここまで解説したコードを組み合わせることで、WordPressで非同期処理を簡単に実装できます。

WordPressのAjaxでWordPressループの絞り込み機能を実装する方法

ここでは先ほど解説したコードをあえて別のJSファイルなどに分けるなどせず、そのままコピー＆ペーストしていただければ動くようにおまとめしたコードを掲載しておきたいと思います。

ここでは、下図のようにページ上にセレクトボックスを設置して、選択したカテゴリー項目を追加したらその選択したカテゴリーに紐づけられた内容として絞り込まれた記事一覧が表示される機能を実装したいと思います。

セレクトボックスを選択したら下図のようなイメージになります。

CSSを書いてないので見た目はイマイチですが、こちらを実装できればあとは応用して実装していただくだけなので、理解の第一歩として参考にしていただければと思います。

まず以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // WordPressに標準搭載されているjQueryを読み込む
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

function enqueue_ajax_script() {
    wp_enqueue_script('ajax-filter', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
    wp_localize_script('ajax-filter', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php') // WordPressのAjax URL
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_script');

function filter_posts_ajax() {
    // フォームから送信されたカテゴリIDを取得
    $category_id = isset($_POST['category']) ? intval($_POST['category']) : '';

    // WP_Queryで投稿を取得
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1
    );

    if ($category_id) {
        $args['cat'] = $category_id; // カテゴリーIDを使用
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="post-item">';
            echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>'; // 投稿タイトル
            echo '<p>' . get_the_excerpt() . '</p>'; // 抜粋
    
            // カテゴリーを表示
            $categories = get_the_category();
            if (!empty($categories)) {
                echo '<p>カテゴリー: ';
                foreach ($categories as $category) {
                    echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a> ';
                }
                echo '</p>';
            }
    
            echo '</div>';
        }
    } else {
        echo '<p>該当する投稿がありません。</p>';
    }

    wp_die(); // Ajaxの終了に必要
}
add_action('wp_ajax_filter_posts', 'filter_posts_ajax');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts_ajax');

次に以下のコードを表示したいPHPテンプレートファイルにそのままコピー＆ペーストしてください。

<select id="filter-category">
    <option value="">すべてのカテゴリ</option>
    <?php
    // カテゴリ一覧を取得して表示
    $categories = get_categories();
    foreach ($categories as $category) {
        echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
    }
    ?>
</select>

<div id="filter-results">
    <?php
    // デフォルトの表示
    $query = new WP_Query(array(
        'post_type' => 'post',
        'posts_per_page' => -1, // 全ての投稿を取得
    ));

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="post-item">';
            echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>'; // 投稿タイトル
            echo '<p>' . get_the_excerpt() . '</p>'; // 抜粋
    
            // カテゴリーを表示
            $categories = get_the_category();
            if (!empty($categories)) {
                echo '<p>カテゴリー: ';
                foreach ($categories as $category) {
                    echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a> ';
                }
                echo '</p>';
            }
    
            echo '</div>';
        }
    } else {
        echo '<p>該当する投稿がありません。</p>';
    }
    wp_reset_postdata(); // クエリをリセット
    ?>
</div>


<script>
jQuery(document).ready(function ($) {
    $('#filter-category').on('change', function () {
        // 選択された値を取得
        const category = $(this).val();

        // Ajaxリクエスト
        $.ajax({
            url: ajax_object.ajax_url, // wp_localize_script で渡されるURL
            type: 'POST',
            data: {
                action: 'filter_posts', // PHP側でフックするアクション
                category: category
            },
            success: function (response) {
                $('#filter-results').html(response); // 結果を更新
            },
            error: function () {
                alert('絞り込みに失敗しました。');
            }
        });
    });
});
</script>

それぞれペーストできたら、保存してフロントページをご確認ください。

すると以下の動画のように、セレクトボックスを選択したらカテゴリーごとに絞り込まれて記事一覧が表示されることと思います。

これで実装のベースとなるWordPressのAjaxを使った記事一覧の絞り込み表示機能の実装は完了になります。お疲れ様でした！

あとはご自身で応用を効かせて、お好きなようにカスタマイズしていただき様々な非同期通信を利用した機能を実装していただければと思います。

まとめ

今回はWordPressのAjaxで非同期処理を実装する方法について解説しました。

Ajaxとは、Webページを更新せずにサーバーとデータをやり取りする技術で、これを利用することで非同期通信によるスムーズで便利な機能を実現できます。特にWordPressでは、Ajaxが標準機能として搭載されているため、効率的かつ簡単に非同期処理を実装可能です。

この記事では、WordPressのAjaxの基本から具体的な実装方法、メリットまでを徹底的に解説しました。ぜひ、お仕事やプロジェクトで活用し、さらなるスキルアップに役立てていただければ幸いです。