ワードプレス(wordpress)で jQuery UI を使って Dialog

ワードプレス(wordpress)に同梱されている jQuery UI を使って Dialog を作ってみました。
(自分なりの使い方なのでベストではないかもしれませんが、間違ってはいないと思います。)

今回の、ワードプレス(wordpress)設定条件は次のとおり
  • ワードプレス(wordpress)バージョンは、4.6.1
  • 使用テーマは、twentysixteen
jQuery本体、jQuery UI ダウンロード必要なし

jQuery本体、そして、いろいろなUIも含めて、ワードプレス(wordpress)ファイル内に、同梱されているため、jQuery ダウンロード、CDNへのリンクは必要ありません。

ちなみに、jQuery ファイルの保存場所は、「wp-includes/js/jquery」

jQuery本体を使用するための script 記述、必要なし

テーマ twentysixteen(他の殆どのテーマも同じ)では、jQuery 本体を、header 部分の wp_head 関数に、action hook で enqueue しているみたいなので、わざわざ script 記述しなくても、default で、下記のように jQuery 本体の script が設定されています。

<script type='text/javascript' src='https:// * * * .com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https:// * * * .com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
jquery-ui-dialog と、その style sheet を、enqueue する

jquery-ui-dialog と、ui-dialog の style sheet を、functions.php 内で、wp_enqueue_scripts に、アクション フックして、enqueue する

jquery-ui-dialog は、default で、ワードプレス内に登録されているので、下記のように、handle だけを記述すれば、利用可能となる。(スクリプトの URL などを記載する必要なし。)

add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
	wp_enqueue_script( 'jquery-ui-dialog' );
	wp_enqueue_style( 'jquery-ui-dialog-min-css', includes_url().'css/jquery-ui-dialog.min.css' );
}
dialog 用 script 設定

下記のような dialog 用 script を、header 内に記述、もしくは、別ファイルに保存して、enqueue する。
注:$は使用しない。

  <script>
  jQuery( function() {
    jQuery( "#dialog" ).dialog();
  } );
  </script>
表示の為の、HTML タグと、表示コンテンツを作成

投稿内、もしくは、固定ページ内に、HTML タグを含めた、表示コンテンツを記述

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
メモ書き

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.

これは、default の dialog です。移動、サイズ変更が可能です。右上の x で close してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です