アヤックス、または 非同期JavascriptとXML、サーバー側のスクリプトと通信するために使用され、ページをリロードすることなく動的コンテンツをロードできます。

たとえば、あなたが構築しているとしましょう サイトのWeb 地元の慈善団体のために、ポジティブな雰囲気を促進したいと考えています。 「」というラベルの付いたボタンを追加できます愛を示す! »ホームページにカウンターがあり、AJAXのおかげで、ボタンがアクティブになるたびに(によってクリックされました 訪問者)、ページをリロードせずにカウンターが増加します。

これは、このチュートリアルで作成する例です。

このチュートリアルでは、AJAXの概要、使用方法、WordPressでAJAXを使用して素晴らしい機能を作成する方法について学習します。

のは、始めましょう。

AJAXの基本

  • AJAXフィードは通常、次の手順に従います。
  • ユーザーアクションによりAJAX呼び出しを開始します
  • サーバー上の要求を受信し、処理
  • 応答をキャプチャし、JavaScriptを介してすべての必要なアクションを実行します
  • 新しいテーマ環境のセットアップ

これをWordPressで実践してみましょう。 最初の例では、タイトルをクリックしたときに記事のコメント数を含む簡単なポップアップが表示されます。 「」に基づいた子テーマを使用します トゥエンティシックスティーン WordPressから。

ここであなたがする必要があるものです。

WordPressインストールのThemesディレクトリに新しいフォルダーを作成します。 WP-コンテンツ 「そして「ajax-test」という名前を付けて、XNUMXつのファイルを作成します ワードプレスで必要とされます、つまり「 のfunctions.php "、" Styles.css "そして、" script.js "という新しいファイルを追加します。 CSSスタイルシートのヘッダーに次のコードを追加します(style.cssに).

/ *テーマ名:AjaxのテストのテーマテーマURI:http://premium.wpmudev.com説明:ダニエル・パタキ著者URI::http://danielpataki.comテンプレート:twentysixteenバージョン:1.0.0ライセンスナレッジAJAX著者をテストするためのテーマGNU一般公衆利用許諾契約書以降v2ライセンスURI:http://www.gnu.org/licenses/gpl-2.0.html * /

親テーマのスタイルシートは、子テーマによってロードする必要があります。 以前は、CSSファイルを子テーマにインポートすることでこれを行っていましたが、これを行うための推奨される方法は、「エンキュー」を使用することです。 この機能の使用方法を説明したことを忘れないでください。

のは、親のスタイルシートと私たちのJavaScriptファイルを直接追加してみましょう:

add_action( 'wp_enqueue_scripts'、 'ajax_test_scripts'); ajax_test_scripts関数(){wp_enqueue_style(親スタイル」、get_template_directory_uri() '/style.css'); wp_enqueue_script( 'Ajaxのテスト・スクリプト」get_stylesheet_directory_uri()' /scripts.js '、配列(' jqueryの ')、1.0.0'、真の); }

さらに一歩進んだ気分になったら、素敵な画像を見つけて、880px x 660pxにトリミングし、子供のテーマフォルダに配置して、名前を「」に変更します。 screenshot.png "。 テーマをアクティブにするときに、外観セクションに表示されます。

ajax WordPressサンプルテーマ

この子テーマは「 トゥエンティシックスティーン そして、まだ何も変更していないこと(まだ!)、このサイトは、「 トゥエンティシックスティーン '。

ボタンの追加

開始するには、ボタン「 愛を示すunpeu! "。 テーマのある記事のサイドバーに表示するのに最適な場所です。

いくつかの調査の結果、サイドバーは「 twentysixteen_entry_meta() »ディレクトリにある« INC /テンプレートtags.php '。

この機能は「 接続可能な つまり、独自のfunctions.phpファイルで定義することで変更できます。 この最初のステップは、関数全体をコピーして独自のfunctions.phpファイルに貼り付けることです。

function teensixteen_entry_meta(){if( 'post' === get_post_type()){$ author_avatar_size = apply_filters( 'twentysixteen_author_avatar_size'、49); printf( ' %1 $ s %2 $ s %3 $ s '、get_avatar(get_the_author_meta( 'user_email')、$ author_avatar_size)、_ x( 'Author'、 '投稿者名の前に使用されます。'、 'twentysixteen')、 esc_url(get_author_posts_url(get_the_author_meta( 'ID')))、get_the_author()); } if(in_array(get_post_type()、array( 'post'、 'attachment'))){twentysixteen_entry_date(); } $ format = get_post_format(); if(current_theme_supports( 'post-formats'、$ format)){printf( ' %4 $ s %1 $ s '、sprintf( ' %s '、_ x( 'Format'、 'post formatの前に使用されます。'、 ' 2 '))、esc_url(get_post_format_link($ format))、get_post_format_string($ format)); } if( 'post' === get_post_type()){twentysixteen_entry_taxonomies(); } if(!is_singular()&&!post_password_required()&&(comments_open()|| get_comments_number())){echo ' '; Comments_popup_link(sprintf(__( ' %sにコメントを残す'、 'twentysixteen')、get_the_title())); エコー ' '; }}

すべてのメタデータの最後にキーを追加しましょう。

$ love = get_post_meta(get_the_ID()、 'show_some_love'、true); $ love =(empty($ love))? 0:$愛; エコー ' '。 $愛。 ' ';
このすべてのコードを説明します。

最初の行は、記事が受け取った愛の数を取得します。 場合によっては、このデータが存在しないこともあります。つまり、ボタンがまだクリックされていない場合です。 このため、

値が空の場合に値を0に設定するコードの2行目。

64 行目は、画像と愛の数を含むスパンで構成されるボタンを配信します。 そこで SVG を使用したいので、画像ソースを空のままにしました。 baseXNUMX でエンコードされた SVG を使用して、イメージ ラインを作成できます。 これにより、要求を行う必要がなくなり、 ウェブサイト もっと効率的な。

私は利用可能なこの小さな無料の画像を使用しました このリンク。 受け取ったコードをコピーして、次のように画像ソースに貼り付けます。

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

また、ボタンのスタイリングに少しCSSを使用して、ホバー効果を与えました。 ボタンであるかどうかはあまり明確ではありませんが、簡単なテストではわかります。

.loveボタンIMG {マージン右:6px。 不透明度:0.7。 カーソル:ポインタ; } .loveボタンIMG:ホバー{不透明:1。 }

ボタンの愛WordPressのチュートリアル

アクションのトリガー

最後に、JavaScriptにアクセスします! アイテムをターゲットにし、クリックを検出する必要があります。 方法は次のとおりです。

(関数($){$(ドキュメント).on( 'click'、 '.love-button img'、function(){alert( "love is shared");})})(jQuery);

この時点でボタンをクリックすると、「愛は共有されています」というテキストのJavaScriptアラートが表示されます。 「」

データ要件

このテキストの代わりに、AJAX呼び出しをトリガーする必要があります。 コードを記述する前に、送信する必要があるものを理解します。

AJAX URL

まず、データを送信する場所が必要です。 データを送信する場所がデータを処理し、通話に応答します。 WordPressには、AJAX呼び出しを処理するための組み込みの場所があり、これを使用できます。 管理-付け加える 「中」 wp-admin "。 このURLをスクリプトに追加することはできません(「生の」コーディングの使用は受け入れられません)、それでは、いくつかの狡猾なワードプレスを使用してみましょう。

機能 wp_localize_script() もともとはJavaScriptファイルの文字列を翻訳することを目的としていましたが、それはうまくいきます。 これを使用して、JavaScriptファイル(この場合はAJAXファイルのURL)に変数を渡すこともできます。 次のコードをファイルに追加します " 機能 次のように:

wp_localize_script( 'ajax-test-scripts'、 'ajaxTest'、array( 'ajax_url' => admin_url( 'admin-ajax.php')));

この最後のオブジェクトの結果はajaxTestという名前になり、最後のパラメーターに特定の配列がプロパティとして含まれます。 値を入力するために使用できます ajaxTest.ajax_url 私たちのJavaScriptコードインチ

記事の識別子

記事の識別子として任意のデータを送信します(「少しの愛を加えたい」記事を特定するために使用します)。 これはDOMから取得できます。 以下の「TwentySixteen」テーマで使用されている構造を見てください。

記事の構造トゥエンティシックスティーン

私たちのボタンには、その祖先のXNUMXつとして「記事」があります。 この要素にはクラスがあり、記事の数値識別子が含まれています。 これは最も洗練されたソリューションではありませんが、そこからIDを取得できます。

$(ドキュメント).on( 'IMGの.loveボタン'、 'クリック' 機能(){VAR =のparseInt post_idの($(この).parents( 'article.post:first')。Attrの( 'ID') .replace( 'ポスト'、 ''));にconsole.log(ID)})

アクション

WordPressでは、actionという名前のパラメーターを送信する必要もあります。 すべてのアクションはadmin-ajaxに送信されるため、これらの要求を区別する方法が必要です。したがって、このパラメーターを使用します。

AJAXリクエストの送信

これですべてをまとめることができます。 「」のAJAX呼び出しを作成する必要があります WP管理者/管理者-ajax.php 記事IDとアクションが含まれています。 これがどのように見えるべきかです。

(関数($){$(文書).on( 'クリック'、 'IMGの.loveボタン'、機能(){VAR =のparseInt post_idの($(この).parents( 'article.post:first')。 。ATTR( 'ID')( 'ポスト'、 '')置き換える); $アヤックス({URL:ajaxTest.ajax_urlタイプ 'ポスト'、データ:{アクション: 'add_love' post_idの:post_idの}成功:機能(応答){警告( '成功、新しいカウントが' +応答)}})})})(jQueryの);

$ .ajax()は、一連のパラメーターを使用する使用済み関数です。 URLには、現在ファイルであるターゲットが含まれています アヤックス、url.php 」。 タイプは「 役職 » によって送信されたすべてのリクエストと同様に フォーム. データ パラメータは、" を含むオブジェクトです。 キーと値 サーバーに送信したいもの。 後で、$ _ POST ['action']と$ _POST ['post_id']でそれらを読み取ることができるようになります。

アプリケーション処理

通常、ファイルを編集する必要があります " 管理-付け加える »、リクエストがそこに送信されるため。 これはシステムファイルなので、変更するつもりはありません。 WordPressでは、actionパラメータで角括弧を使用してAJAXリクエストを渡すことができます。 モデルは次のとおりです。

アクションに名前を付けた場合 add_love 「」という名前のフックに関数を添付する必要があります wp_ajax_add_love および/または wp_ajax_nopriv_add_love 」。 アクション NOPRIV 」はログアウトしたユーザーに対して実行され、XNUMXつはログインしたユーザーに対してのみ実行されます。 私たちの場合、両方を使用したいと思います。 簡単なテストとして、デフォルトの戻り値を設定します。

successパラメータは、AJAX呼び出しが完了したときに実行される関数です。 「よくできました!」という簡単なアラートを表示します。 新しいアカウントは「」で、最後に回答が追加されています。

add_action( 'wp_ajax_add_love'、 'ajax_test_add_love'); add_action( 'wp_ajax_nopriv_add_love'、 'ajax_test_add_love'); ajax_test_add_love関数(){4エコー。 死にます(); }

関数を両方のブラケットに取り付けました。 echo 4を使用してから、関数「 死にます() 」。 これはWordPressで必要です。それ以外の場合は、各回答の最後に0を受け取ります。 ここでボタンをクリックすると、次のように表示されます。

jqueryのAjaxの例ボタン

実際の「いいね」番号を取得するには、現在の番号を取得してXNUMXつインクリメントし、データベースに保存して、新しい番号を表示するだけです。

ajax_test_add_love関数(){$愛= get_post_meta($ _POST [ 'post_idの'] 'show_some_love'、TRUE); 愛= $(空($愛))? 0:$愛。 $ラブ++; update_post_meta($ _ POST [ 'post_idの'] 'show_some_love愛の$)。 $愛をエコー。 死にます(); }

ここでボタンをクリックすると、ポップアップウィンドウに「1」。 ページを更新すると、新しい番号が表示されます。 もう一度ボタンをクリックすると、それができます 2 "。 ここで行う必要があるのは、番号がUIに直接反映されていることを確認することだけです。

応答を使用してユーザーインターフェイスを変更します

この部分は、(簡単に思えますなぜなら)が、一般的にまとめるのが最も難しい。 今のところ、私たちがする必要があるのは、現在の番号を含む要素を見つけて、応答によってその内容を変更することだけです。

(関数($){$(文書).on( 'クリック'、 'IMGの.loveボタン'、機能(){VAR =のparseInt post_idの($(この).parents( 'article.post:first')。 。ATTR( 'ID')( 'ポスト'、 '')に取って代わる);変数$番号= $(この).parent()(見つける '番号')$アヤックス({URL ajaxTest.ajax_url、。タイプ: 'ポスト'、データ:{アクション: 'add_love' post_idの:post_idの}、成功:関数(応答){$のnumber.text(応答);}})})})(jQueryの)。

以前のJSコードに5行だけ追加しました。 XNUMX行目に、数値を含む要素を変数に格納します $番号。 14行で、この要素のテキストを変更して、新しい番号である回答を表示します。

これで、基本的に、カスタムテーマでこの新機能が実際に動作するのを確認できるはずです。 ご不明な点がございましたら、お気軽にお問い合わせください。 共有したい別のヒントはありますか? コメントセクションでそれを行います。