AjaxとWordPress

公開: 2021-11-02

Ajaxの紹介記事で説明したように、Ajaxの手法は、ページを更新しなくてもWebページのコンテンツの一部を更新できるため人気があります。これにより、ユーザーエクスペリエンスが向上します。

もちろん、WordPressサイトも例外ではありません。ただし、WordPressでのAjaxの使用方法は、他のWebアプリケーションでの使用とは異なります。

admin-ajaxとは何ですか？どのように機能しますか？

WordPressは、自動保存、即時更新、コメントのモデレート、投稿の追加/削除などの独自の管理機能のためにAjaxをすでに実装しています。これは、WordPressが提供する関連機能を利用するだけですぐに使用できることを意味します。

この目的のキーファイルは、wp-adminフォルダーの下にあるadmin-ajax.phpファイルであり、クライアントとサーバー間の接続を作成するために使用されます。

このファイル内の159行目あたりで、すべてのAjaxリクエストがいくつかのアクションフックによってどのように登録されているかを確認できます。

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax _ {$ action}はログインしたユーザーを参照し、wp_ajax_nopriv _ {$ _REQUEST['action']}はサイト訪問者を参照します。すべてのユーザーを含むリクエストを作成する場合は、両方のフックを使用する必要があります。

したがって、これらのアクションを使用して、カスタム関数をフックし、データをWordPressに渡してAjaxリクエストを作成できます。これを実際に見てみましょう。

WordPressAjaxの例

Ajaxの紹介記事で行ったのと同じ例を使用して、ユーザーが記事のタイトルを検索し、提案された結果をその場で確認できるフォームを作成します。

テーマのヘッダースペースに、検索フォームのHTML出力を挿入します。 Twenty Twenty-Oneテーマを使用しているため、テーマのメインフォルダーの下にあるheader.phpファイルを編集し、<div id =” content” class =” site-content”>行の前に次の行を挿入しました。

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

これで、ユーザーが使用できるフォームがフロントエンドに表示されます。

注：ここでは、子テーマを作成せずに、テーマのheader.phpファイルを直接編集します。 これは良い習慣ではなく、いくつかの欠点があります。 子供のテーマの重要性について詳しく知りたい場合は、関連記事をお読みください。 この例では、コードを単純でトピックに沿ったものにしています。 そのため、本番Webサイトでこのコードを使用することはお勧めしません。

次に、リクエストを送信するJavaScript関数を含めます。代わりにjQueryを使用します。これは、すでにWordPressに付属しており、すぐに使用できるためです。もちろん、WordPressの方法でスクリプトを含める必要があります。

スクリプトをエンキューする

テーマのfunction.phpファイルを編集し、このようにスクリプトをキューに入れることで、JSファイルの存在をWordPressに通知します。ファイルは、作成してテーマのメインフォルダーの下にある新しい「js」フォルダー内に配置したcustom.jsになります。

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

ajax_search_script()関数では、スクリプトを登録してローカライズしてから、組み込みのwp_enqueue_script（）関数を使用してローカライズされたデータをキューに入れました。次に、 ajax_search_script()関数をwp_enqueue_scriptsにフックしました。これは、WordPressでスクリプトをキューに入れるときに使用する適切なアクションです。

wp_localize_scriptの使用は、WordPress関数として、もともとスクリプトで使用されている文字列を翻訳するために設計されているため、ここで混乱する可能性があります。ただし、PHPからJavaScriptに汎用データを渡すためにも頻繁に使用されます。この場合、AjaxURLとnonceオブジェクトを渡します。

jQuery AjaxリクエストをWebサイトからのリクエストとして検証できるようにするには、nonceを使用する必要があります。 WordPressでのナンスの使用に慣れていない場合は、関連記事で詳細を読むことができます。

ajax_objectは、 wp_localize_script()関数に必要な$object_nameパラメーターの値であり、後でjQueryコードで使用されるものです。

すごい！次に、関数に適切なコンテンツを入力しましょう。

JavaScript

custom.jsファイル内にjQueryを含めました。

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

今回は、目的のデータ、action、search_text、nonceをサーバー側スクリプトに渡すために、jQueryとJSONを使用しました。コールバックget_articles_titles()関数は、バックエンドでのデータの処理、結果の準備、および応答の返送を担当します。

また、ご覧のとおり、wp_localize_scriptのwp_localize_scriptを、nonceとurlの2つの配列値とともに使用します。

フック

次に、認証されたAjaxアクションを前述の必要なフックにバインドする必要があります。ログに記録されたユーザーとログに記録されていないユーザーの両方を含めるには、両方のフックを使用する必要があることに注意してください。 functions.php .phpファイルで、スクリプトをキューに入れる前に追加したコードの下にこれらの2行を追加します。

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

すでにお気づきかもしれませんが、フック名は実際にはプレフィックスの後にアクション名が続きます。 get_articles_titlesフック関数は、実際に記事のタイトルを取得する場所です。この関数はfunctions.php内でも定義します。

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

check_ajax_refererは、Ajaxリクエストが外部で処理されていないことを確認する責任があります。

ここで必要なパラメーターは、 ajax_search_script()関数内'nonce' => wp_create_nonce( 'ajax_nonce' )に関連するアクションと、nonceに関連する値です。

以上です！非常に単純なAjax-PHPの例を作成しました。この時点で、テストWordPress環境でコードを試すと、次のように機能するはずです。

サービス1-5は、テスト投稿のタイトルです。

結論

これは、Ajaxの利点を活用してWordPressWebサイトの応答性とパフォーマンスを向上させる方法に関する記事でした。うまくいけば、あなたは今あなた自身のウェブサイトで同様のテクニックを使う準備ができていて、ユーザーエクスペリエンスの改善を楽しんでいます！