WPに最新jQueryを読み込む
WordPressはAjax通信に必要なjQueryは備わっています。しかし、jQueryのバージョンは最新ではありませんので、最新バージョンのjQueryを読み込むようにします。
WPにスクリプトまたはスタイルシートの読み込むは、次のAPIを使用します。
- wp_enqueue_script スクリプトの読み込み
- wp_enqueue_style スタイルシートの読み込み
スクリプトまたはスタイルシート読み込みAPIの実行は、wp_enqueue_scriptsフックをを使用します。(フッター読み込み時に処理を行いたい場合は、wp_footerフックに変えてください)
add_action( 'wp_enqueue_scripts',{スクリプトまたはスタイルシートを読み込む関数名});
wp_enqueue_script
-
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
この関数を呼び出す際に使うべきアクションフックについての情報は注セクションをご覧ください。
パラメータ
- $handle
- (文字列) (必須) スクリプトのハンドルとして使われる名前。特別なケースとして、文字列に ‘?’ という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。このような特別な場合、バージョンを使用する必要がある。
- 初期値: なし
- $src
- (文字列) (オプション) スクリプトの URL。例:
http://example.com/wp-content/themes/my-theme/my-theme-script.js
。ローカルスクリプトの URL は絶対に直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例://otherdomain.com/js/their-script.js
。「WordPress に含まれ登録されているデフォルトスクリプト」を参照。- 初期値: false
- $deps
- (配列) (オプション) このスクリプトが依存するスクリプトのハンドルの配列、つまり、このスクリプトより前に読み込まれる必要があるスクリプト。このパラメータは、$handle のスクリプトが wp_register_script() を使って登録されていない場合のみに必要。デフォルトのハンドルはすべて小文字。
- 初期値: array()
- $ver
- (文字列) (オプション) クエリストリングとしてファイルパスの最後に連結される、スクリプトのバージョン番号を指定する文字列 (存在する場合) 。バージョンが指定されていない場合は false に設定され、WordPress は自動的に現在の WordPress のバージョン数と同じバージョン番号を追加する。null に設定した場合はバージョン番号は追加されない。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスクリプトに意味を持つ場合は含めるべきである。
- 初期値: false
- $in_footer
- (真偽値) (オプション) スクリプトは通常 HTML ドキュメントの <head> に置かれるが、もしこのパラメータが true の場合 </body> 終了タグの前に配置される。テーマ内の適切な位置に wp_footer() テンプレートタグが含まれていることが必須となる。
- 初期値: false
戻り値
- (void)
- この関数には戻り値はありません。
wp_enqueue_style
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
パラメータ
- $handle
- (文字列) (必須) スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に ‘?’ という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。
- 初期値: なし
- $src
- (文字列|真偽値) (オプション) スタイルシートの URL。例:
http://example.com/css/mystyle.css
。このパラメータは WordPress がこのスタイルを認識していない場合のみに必要。ローカルのスタイルには URL を直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例://otherdomain.com/css/theirstyle.css
- 初期値: 空文字列
- $deps
- (array) (オプション) このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。
- 初期値: array()
- $ver
- (文字列|真偽値) (オプション) スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。
- 初期値: false
- $media
- (文字列|真偽値) (オプション) スタイルシートが定義されているメディアを指定する文字列。例: ‘all‘、’screen‘、’handheld‘、’print‘。有効な CSS-media-types の全容についてはこちらの一覧を参照。
- 初期値: 'all'
戻り値
- (void)
- この関数は値を返しません。
jsのグローバル変数を定義する
フロントエンド側でAJAXを使用するとき、WORDPRESSならではの規則があります。あらかじめ必要な情報はfunctions.phpで定義して、ビュー側(テンプレート)で使用できるようにしておいたほうが便利です。
そのためには、phpの配列変数をJSで参照できるオブジェクト型に変換するAPI(wp_localize_script)を使用します。
※wp_localize_scriptで生成したデータをwp_enqueue_scriptでキューに出力するだけでは、ビュー側で参照できず悩みました。実際にファイルを指定して読み込むAPI(wp_register_scriptやwp_enqueue_script)のハンドル名と同じハンドル名を使用して、wp_localize_scriptを使用することで、ファイル読み込み時に同時にJS用に変換されたオブジェクトも読み込まれます。
wp_localize_script
<?php wp_localize_script( $handle, $name, $data ); ?>
パラメータ
- $handle
- (string) (必須) The registered script handle you are attaching the data for.
- 初期値: なし
- $name
- (string) (必須) The name of the variable which will contain the data. Note that this should be unique to both the script and to the plugin or theme. Thus, the value here should be properly prefixed with the slug or another unique value, to prevent conflicts. However, as this is a JavaScript object name, it cannot contain dashes. Use underscores or camelCasing.
- 初期値: なし
- $data
- (array) (必須) The data itself. The data can be either a single- or multi- (as of 3.3) dimensional array. Like json_encode(), the data will be a JavaScript object if the array is an associate array (a map), otherwise the array will be a JavaScript array.
- 初期値: なし
用例
<?php // Register the script first. wp_register_script( 'some_handle', 'path/to/myscript.js' ); // Now we can localize the script with our data. $translation_array = array( 'some_string' => __( 'Some string to translate' ), 'a_value' => '10' ); wp_localize_script( 'some_handle', 'object_name', $translation_array ); // The script can be enqueued now or later. wp_enqueue_script( 'some_handle' );
You can access the variables in JavaScript as follows:
<script> alert( object_name.some_string) ; // alerts 'Some string to translate' </script>
フロントエンド側JS
今回はテンプレートファイルにJSを直接書いていきます。
functions.phpで読み込み設定したjQueryが使用できるように、必ずwp_headまたはwp_footer以降にJSを記述するようにします。
画面に表示されているボタンをクリックすると、jQueryでクリックイベントが発生して、AJAX通信処理が起動するようにします。
画面に表示するボタンは、nameをすべて”show-item”にして、データセレクタ(id)に投稿idを設定することで、イベント発生後に、対象の投稿データの取得が可能になります。
※投稿記事を一覧表示できるプラグインListCategoryPostsのテンプレートに少し手を加えてボタンを追加しました。
jQueryクリックイベントの取得と、AJAXの起動はjQueryで。
$("input:button[name=show-item]").click(function() { $selected_id = $(this).data("id"); AJAX通信関数の呼び出し(引数:$selected_id); });
AJAX通信もjQueryで行えるので簡単です。
AJAX通信関数: $.ajax({ type: 'GET', url: MY_AJAX.api, data: { //functions.phpで定義済み 'action' : MY_AJAX.action, // アクションに対応するnonce nonce: MY_AJAX.nonce, 'id': $selected_id, }, //ajax通信エラー error : function(XMLHttpRequest, textStatus, errorThrown) { // // エラー時のデバッグ用 resultMsg("NG", "AJAX通信エラー"); }, success: function( callback ){ if(callback.status=="OK") { AJAXで取得した投稿データをダイアログボックスで表示する関数の呼び出し(引数:AJAX取得データ) }else{ resultMsg(callback.status, callback.message); } } });
バックエンド側PHP
バックエンド側では、JSからAJAX通信データが要求されたときに実行する関数をWPに登録する必要があります。
WPでAJAX通信をする場合は、決められた手続きに従って行う必要があります。
実際には、AJAX専用のフックをap_ajax_{アクション名}およびap_ajax_noprov_{アクション名}という命名方法で生成して、対象のアクション名に対応するコールバック関数を登録します。
add_action('wp_ajax_{アクション名}',{API関数名}); add_action('wp_ajax_nopriv_{アクション名}',{API関数名});
登録するコールバック関数はこちらです。
コールバック関数では、まずセキュリティのためnonceチェックを行います。
nonceチェックがOKなら、次にフロントエンド側で設定したパラメータを取得して、投稿データをフロントエンド側に返します。
function my_ajax_event() { // wp_create_nonce の引数に渡したものと同じ アクション名 $action = 'my-ajax-action'; // nonceのチェック // https://chaika.hatenablog.com/entry/2017/09/08/090000 if( check_ajax_referer($action, 'nonce', false) ) { // Ajax(post)のdataから渡される値を使用する場合は $_POST から取得する (適時エスケープ) $id = intval( $_GET['id'] ); //$name = esc_html( $_POST['name'] ); // 投稿IDが10の投稿情報を取得 $post_data = get_post($id); // 投稿IDが10の投稿タイトルを取得 $title = $post_data->post_title; $content = $post_data->post_content; // 配列をjson形式にエンコード //$data = "<p>post_id=$id title=$title price=".print_r($price,true)."</p>";//</p>json_encode($data); $data = array( 'id' => $id, 'title' => $title, 'content' => $content, ); } else { // Ajaxに返す //status_header( '403' ); header( 'Content-Type: application/json; charset=UTF-8' ); echo json_encode(array('data'=> '', 'status' => 'NG', 'message' => "nonceチェックエラー", 'result' => "")); die(); } // Ajaxに返す header( 'Content-Type: application/json; charset=UTF-8' ); echo json_encode(array('data'=> $data, 'status' => 'OK', 'message' => "受信完了", 'result' => "")); die(); }
参考
■AJAXを使用する
★Ajaxを使ってWordPressからコンテンツを取得したい。
[blogcard url=”https://chaika.hatenablog.com/entry/2017/09/08/090000″]
★ordPressでAjaxを使う方法の解説
[blogcard url=”https://hijiriworld.com/web/wordpress-ajax/”]
jQuery UI のファイル読込みを CDN のライブラリから参照する方法
[blogcard url=”https://webllica.com/jquery-ui-file-load/”]
★html5のdata属性をjQueryで取得する方法
[blogcard url=”https://www.markernet.co.jp/blog/blog/2014/12/03/html5%E3%81%AEdata%E5%B1%9E%E6%80%A7%E3%82%92jquery%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/”]
【HTML5】カスタムデータ属性(data-*)の値に複数設定、それを取得する方法
[blogcard url=”https://qiita.com/yamanoku/items/9459bec5413be46afcda”]
★WordPressテーマ開発:jQueryの正しい読み込み方法
[blogcard url=”http://www-creators.com/archives/671″]
AJAX-UI ダイアログ
[blogcard url=”http://stacktrace.jp/jquery/ui/widgets/dialog.html”]
WordPressでpathやURLを取得するためのタグと出力例まとめ
[blogcard url=”https://oxynotes.com/?p=8590″]
WINDOWSサイズ
[blogcard url=”https://web-designer.cman.jp/javascript_ref/window/size/”]
★テーマにJavaScript(jsファイル)を正しい方法で読み込む
[blogcard url=”https://thewppress.com/libraries/enqueue-scripts/”]
★jsもcssもenqueue(エンキュー)しよう!
[blogcard url=”https://ebicology.work/2017/11/17/5339/”]
★重要★
★WordPress標準のjQueryを使う場合の書き方
[blogcard url=”http://primarytext.jp/blog/1298″]