AJAXを使用してWordPressプラグインを応答性の高いものにする

公開: 2020-06-02
WordPress Plugin Responsive

最終更新日-2021年7月8日

AJAXは最新の開発方法論であり、開発者に提供する使いやすさのために徐々に勢いを増しています。 WordPressプラグイン内にAJAXを統合するだけで、Webページ全体を絶えずリロードする必要性を本質的に減らすことができます。 言い換えると、AJAXはWordPressプラグインをレスポンシブにし、ページの残りの部分を静的に保ちながら、その特定の部分のみをリロードすることでユーザーが新しい情報を取得できるようにします。

これにより、Webページまたはプラグインの応答性が向上するだけでなく、待機時間が半分に短縮されます。 Ajaxを使用してユーザーのエクスペリエンスを向上させるプラグインとアプリケーションがいくつかあります。 たとえば、WooCommerceはAjax機能を使用して、カートに追加する動作を改善します。

AJAXを有効にすると、顧客は商品をカートに追加した後も買い物を続けることができます。

その利点を考慮して、AJAXを介してWordPressプラグインを応答させる方法を説明します。

プラグインの作成

AJAXで魔法を働かせる前に、高度で応答性の高い製品を作成するために使用できる基本的なプラグインの基盤が必要です。

プラグインの作成は難しくありません。必要なのは、ワンライナーコンテンツを含むファイルの作成だけです。 この目的のための最初のステップは、wp-content / pluginsファイルに移動し、選択した名前で新しいフォルダーを作成することです。 フォルダを開き、新しいファイルname_of_the_plugin.phpを作成します。 次に、任意のテキストエディタでファイルを表示し、次の情報を書き込みます。

<？php

/ *

プラグイン名：Coolness Inducer

プラグインURI：http://coolness-inducer.com

説明：>-

あなたのウェブサイトをさらにクールにするのに最適なプラグイン。

バージョン：1.3

著者：ベイダーさん

著者URI：http://msvader.com

ライセンス：GPL2

* /

？>

これを行う前に、WordPressのプラグインインストールにajaxloadpostディレクトリを作成します。 これを行ったら、プラグインを作成してアクティブ化します。 この後、ajaxloadpost内に次の情報を含めます。

define（'AJAXLOADPOSTURL'、WP_PLUGIN_URL。” /”。dirname（plugin_basename（__FILE__）））;

function ajaxloadpost_enqueuescripts（）{

wp_enqueue_script（'ajaxloadpost'、AJAXLOADPOSTURL。'/ js / ajaxloadpost.js'、array（'jquery'））;

wp_localize_script（'ajaxloadpost'、'ajaxloadpostajax'、array（'ajaxurl' => admin_url（'admin-ajax.php'）））;

}

add_action（'wp_enqueue_scripts'、ajaxloadpost_enqueuescripts）;

次に、WordPressをプラグインのURLに転送するために必要になるため、AJAXLOADPOSTURL変数を定義します。 次に、WordPressのwp_enqueue_scriptsにajaxloadpost_enqueuescriptsを追加することで実行できるスクリプトをエンキューする必要があります。

AJAXをそのままの形で使用することはできないことに注意してください。 常に他のプログラミング言語、つまりjQueryやJavaScriptと組み合わせて使用​​されます。 この場合、JavaScriptを使用するため、JavaScriptの基本を理解しておく必要があります。

次に、\ wp-content \ plugins \ ajaxloadpost \ js\folderにあるajaxloadpost.jsにJavaScriptを追加します。 JSフォルダーを作成してこのアクションを実行し、その中にajaxloadpost.jsを配置します。

次に、WordPressのwp_localize_scriptを使用して、必要なJS変数を追加します。 このアクションにより、ディレクトリに構造が提供され、スクリプトがキューに入れられます。

AJAXハンドラーの作成

AJAXハンドラーを作成するには、次のコードが必要です。

関数ajaxloadpost_ajaxhandler（）{

if（！wp_verify_nonce（$ _POST ['nonce']、“ ajaxloadpost_nonce”））{

exit（ "間違ったナンス"）;

}

$ results =”;

$ content_post = get_post（$ _ POST ['postid']）;

$ results = $ content_post-> post_content;

die（$ results）;

}

add_action（'wp_ajax_nopriv_ajaxloadpost_ajaxhandler'、'ajaxloadpost_ajaxhandler'）;

add_action（'wp_ajax_ajaxloadpost_ajaxhandler'、'ajaxloadpost_ajaxhandler'）;

このアクションを完了すると、2つの結果が得られます。 まず、ユーザーが必要とする投稿のIDを作成し、次にナンスを作成します。 しかし、それは重要ではありません！ AJAXハンドラーのコードを配置したら、次のステップに進む必要があります。それは、WordPressディレクトリにAJAXハンドラーを登録することです。 これを行うと、WordPressプラグインがAJAX呼び出しに応答するようになります。 これは、次のコードで実現できます。

add_action（'wp_ajax_nopriv_ajaxloadpost_ajaxhandler'、'ajaxloadpost_ajaxhandler'）;

add_action（'wp_ajax_ajaxloadpost_ajaxhandler'、'ajaxloadpost_ajaxhandler'）;

JavaScriptの基本とAJAX

AJAX呼び出しとAJAXハンドラーを配置したら、2つのドットを接続するJS関数を作成する必要があります。 次のJavaScriptは、ajaxloadpost.jsに配置するこのアクションを実現するのに役立ちます。

function ajaxloadpost_loadpost（postid、nonce）{

jQuery.ajax（{

タイプ：'POST'、

url：ajaxloadpostajax.ajaxurl、

データ： {

アクション：'ajaxloadpost_ajaxhandler'、

postid：postid、

ノンス：ノンス

}、

成功：function（data、textStatus、XMLHttpRequest）{

var loadpostresult ='#loadpostresult';

jQuery（loadpostresult）.html（”）;

jQuery（loadpostresult）.append（data）;

}、

エラー：function（MLHttpRequest、textStatus、errorThrown）{

alert（errorThrown）;

}

}）;

}

上記の手順と同様に、このアクションでも2つの結果、つまりnonceとpostIDが作成されます。

次のステップでは、jQueryにも習熟している必要があります。 したがって、スキルが少し素朴な場合は、この記事が役立ちます。

次に、jQuery.ajax関数を使用して、適切なサーバーへのAJAX呼び出しを行います。 上記のコードでは、URLはadmin-ajax.php URLであり、スクリプトのキューイング時に登録したJavaScript変数にあります。 また、WordPressに登録されているアクションハンドラーの名前でこのアクションを指定し、ナンスと投稿IDも投稿してください。

すべてがうまくいけば、ID #loadpostresultの<div>を更新し、フェッチされたコンテンツをAJAXハンドラーに置き換えることができます。

あなたのコードに顔を向ける

次に、適切な投稿のタイトルを表示し、AJAX呼び出しを通じてユーザーが望む情報を表示するコードを作成します。 次のコードは次のとおりです。

関数ajaxloadpost_show_latest_posts（$ number = '5'）{

$ results =”;

$ the_query = new WP_Query（'posts_per_page='。$number）;

while（$ the_query-> have_posts（））：

$ the_query-> the_post（）;

$ nonce = wp_create_nonce（“ ajaxloadpost_nonce”）;

$ arguments = get_the_ID（）。”、'”。$ nonce。”'”;

$ link ='<a onclick =” ajaxloadpost_loadpost（'。$ arguments。'）;”>'。 get_the_title（）。'</a>';

$result。='<li>'。 $link。 '</ li>';

終わり;

wp_reset_postdata（）;

$result。='<divid =” loadpostresult”> </ div>';

$resultを返します。

}

function ajaxloadpost_shortcode_function（$ atts）{

ajaxloadpost_show_latest_posts（）;を返します。

}

add_shortcode（'AJAXLOADPOST'、'ajaxloadpost_shortcode_function'）;

うまくいけば、この記事がWordPressプラグインをレスポンシブにするのに役立つことを願っています。 ご不明な点がございましたら、コメントをお寄せください。

参考文献

  • レスポンシブデザインは、コンバージョン率の向上に役立ちます。
  • 最高のレスポンシブなWooCommerceテーマ