AJAXを使用してWordPressプラグインをレスポンシブにする

公開: 2020-08-17

WordPressは、Webサイトを構築するための優れたプラットフォームです。ただし、コンテンツマネージャツールには欠点があります。 WordPressでウェブサイトを構築した場合、読み込み速度が遅いという問題に直面することは珍しくありません。データベースやコードベースの流入に伴って多数のプラグインが追加されているため、実際には珍しいことではありません。ただし、ソリューションに焦点を当てることが重要です。あなたはあなたの聴衆が遅い速度のために焦って去って、潜在的なビジネスを失うことを望まない！

AJAXと呼ばれるシンプルな機能をプラグインに統合することで、WordPressWebサイトの速度を最適化できると言ったらどうでしょうか。 AJAXという用語は、非同期JavaScriptおよびXMLの略です。 AJAXは、Webサイトの速度を向上させるのに役立ちます。ページの特定の部分のみをロードし、残りのページを静的に保つことで、ロード時間を改善します。いくつかのプラグインとアプリは、今日でもWebページの速度を向上させるためにこの機能をすでに使用しています。

ほんの少しの時間で、AJAXはデジタルマーケティングの世界で優れた評判を得て、ウェブサイトの所有者の大多数によって使用されています。幸い、WordPressはAJAXの優れたサポートを提供し、AJAXに統合されたプラグインを簡単に作成できるようにします。 WordPressと私たちの記事のサポートにより、AJAXをプラグインにすぐに統合できるはずです。

以下は、プロセスを順を追って説明するためのステップバイステップガイドです。

ステップ1–プラグインを作成する

最初のステップは、応答性が高く、Webページの読み込み時間を短縮するより高度な製品を開発するために使用できる単純なプラグインを作成することです。幸いなことに、プラグインを作成するのに問題はありません。必要なのは、ワンライナーデータを含むファイルを作成することだけだからです。

これを行うには、ファイル「wp-content / plugins」を検索して、適切な名前のフォルダーを生成します。これを行ったら、フォルダを開いて、「name_of_the_plugin.php」という名前のファイルを作成する必要があります。このファイルをテキストエディタで開いたら、テキストエディタに次のコードを入力します。

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

ステップ2–JavaScriptライブラリを追加する

このステップは、「ajaxloadpost」ディレクトリを作成することから始めます。そうする方法は？ WordPressプラグインと一緒にインストールできるのでとても簡単です。この手順が完了すると、コーディングしたプラグインを作成して実行できるようになります。次に、以下のコードを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);

作成したプラグインのURLを介してWordPressに指示する必要があります。これが、AJAXLOADPOSTURLという名前で変数を定義する必要がある理由です。

AJAXは常にプログラミング言語の組み合わせで使用されます。残りの記事ではJavaScriptを使用します。 \ wp-content \ plugins \ ajaxloadpost \ js \ folderでajaxloadpost.jsを探し、それにJavaScriptを追加します。これで、JavaScript変数をスクリプトに追加できます。

ステップ3–AJAXハンドラーの統合

上記のすべてがソートされたら、最終的にAJAXハンドラーをプラグインに統合することに進むことができます。以下は、AJAXハンドラーのコードです。

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

上記のコードは基本的に2つのタスクを実行します。まず、ユーザーが必要とする投稿のIDを作成します。 2番目のタスクは「ノンス」を作成することです。とりあえず2番目の要素について心配する必要はありません（これについては記事の最後で詳しく説明しています）。

代わりに、WordPressディレクトリ内にAJAXハンドラーを登録するという2番目のステップに進む必要があります。これにより、要求されたときにAJAX関数を呼び出すことができます。このアクションは、以下に説明するコードを介して実行できます。

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

JavaScriptに関する背景知識があることは、あなたにとって大きなプラスです。このプログラミング言語に精通していない場合は、専門家の助けを借りて、プロセス全体をガイドしてください。また、Webチューターを通じて、またはここの記事を読んで、JavaScriptスキルを磨くこともできます。

ステップ4–AJAXにJavaScriptを使用する

次に必要なのは、AJAXがAJAXハンドラーを介して返されたデータを呼び出して更新できるようにする関数を作成することです。関数は通常ajacloadpost.jsです。次のコードを使用して、上記のアクションを判別できます。

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

上記の関数は2つの入力を受け取ります。1つは投稿のIDで、もう1つはナンスです。 jQuery.ajax関数を使用して、サーバーを呼び出すことができます。成功したら、ID#loadpostresultの<div>をAJAXハンドラーを介して返されたデータで更新します。コードの最後のビットは、エラーが発生した場合の条件です。エラーが発生した場合、システムはポップアップで警告されます。

ステップ5–リストの表示

すべての機能がソートされたら、投稿のタイトルを表示する最後のステップに進むことができます。クリックするたびに異なる投稿タイトルが表示される可能性があり、コードは呼び出されたコードをフェッチできる必要があることに注意してください。次のコードは、これを実現するのに役立ちます。

function 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>'. get_the_title().'</a>';

$result.= '<li>' . $link . '</li>'; endwhile; wp_reset_postdata();

$result.= '<div></div>';

return $result; }

function ajaxloadpost_shortcode_function( $atts ){ return ajaxloadpost_show_latest_posts(); } add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

「ノンス」とは何ですか？

ナンスは、要求が本物のソースからのものであるかどうかを確認するために使用されます。ナンスは、単純なWordPress関数「wp_create_nonce」を使用して生成できます。関数「wp_verify_nonce」を使用して、AJAXハンドラーでさらにチェックできます。 WordPressでデリケートなタスクを実行している場合、この機能を使用することは非常に重要です。

結論

AJAXをプラグインと統合すると、ページの応答性を視覚的に向上させることができます。 JavaScriptに慣れていない場合は、コーディングが簡単なプログラミング言語を選択するか、プラグインのコーディングを支援できる専門家を見つけることができます。 AJAXをプラグインに統合してみてください。失望することはありません！