ワードプレス（wordpress）で jQuery UI を使って Dialog

• ワードプレス（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>

• jQuery UI Dialog 参照サイト
• 関数リファレンス/wp enqueue script 参照サイト
• Plugin API/Action Reference/wp enqueue scripts 参照サイト
• 「wp_head」などへのフック（すべてではない）は、「wp-includes/default-filters.php」内で確認できる。

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 してください。