jquery-uiをエンキューする正しい方法

プラグインにjquery-uiスクリプトとスタイルを含めるのに苦労しています。私のwp_enqueue_script通話は単に無視されているようです。

これに似た質問はすでにたくさんありますが、私がこれまでに見つけたすべての回答は、私がすでに行っているアクションフックwp_enqueue_script内で呼び出すために要約されますwp_enqueue_scripts。

私のクラスのコンストラクターでは、次のように呼び出します。

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

そして、以下：

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

コードが実際にページが読み込まれるたびに実行されることを確認しました。ただし、ページ<link>にはjquery-uiライブラリのタグがありません。呼び出しのjquery3番目の引数で明示的に指定された依存関係を使用して、または使用せずに、すでに試しましたwp_enqueue_script。

私は、私以外にプラグインをインストールせずに、デフォルトの21の17テーマのみを使用して、単純なWP 4.8インストールを試してみました。サイコロはありません。

私のコードの何が問題になっていますか？

まず、WordPressはを介してjQuery UIを登録しwp_default_scripts()ます。依存関係はすでに設定されているため、本当に必要なスクリプトのみをエンキューする必要があります（コアは必要ありません）。バージョン番号などを変更しないので、ハンドルだけを使用してもかまいません。

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

スタイルシートについて：WordPressはデフォルトでjQuery UIスタイルを登録しません！

コメントで、butlerblogはプラグインガイドラインに従ってそれを指摘しました

サービスとして機能していないときにプラグイン内で外部コードを実行することは許可されていません。次に例を示します。

• フォントの包含以外の理由でサードパーティのCDNを呼び出す。サービスに関連しないすべてのJavaScriptおよびCSSをローカルに含める必要があります

つまり、CDNを介したスタイルのロードは許可されておらず、常にローカルで実行する必要があります。これは、を使用して行うことができますwp_enqueue_style()。

独自のスクリプトをエンキューする場合は'jquery-ui-accordion'、たとえば、依存関係のリストにを追加するだけです。必要なすべての依存関係が自動的に追加されます。例：

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

このコードを生成します：

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>

スクリプトを変更しました。これで試してみてください。

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}