管理画面各ページごとに違うJavaScript,CSSを読み込ませたい

2019年11月5日

JavaScriptをWordPressで出力する手順は

タイプ1:出力候補のリストに追加&スクリプト出力キューに追加(wp_enqueue_script()関数)

タイプ2:出力候補のリストに追加(wp_register_script()関数)してから、適切なタイミングで希望のスクリプトを「ハンドル名」で指定して出力キューに追加(wp_enqueue_script()関数)

の二つがあります。

CSSの出力でも基本同じで、wp_enqueue_style()関数とwp_register_style()関数を利用することになります。

「ハンドル名」といのは、「そのファイルを示す」あだ名みたいなものです。これを使うと。。。

・あるハンドル名がついたファイル依存的なスクリプトを表示させたいときに、自動的にそのハンドル名のついたファイルも挿入してくれます。

・wp_register_script()関数でハンドル名を指定して登録しておくと、後でwp_enqueue_script()関数でそのハンドル名だけでファイルを売入が可能です。

タイプ1使用例

<?php
//使用例
$hogehoge = new HOGEHOGE();
class HOGEHOGE {
    public function __construct() { 
        add_action( 'admin_enqueue_scripts', array( &$this, 'admin_page_scripts' ) ); 
    }
 
    public function admin_page_scripts() 
    { 
        /*
        【タイプ1:JavaScriptを出力待ち配列(queue配列)として追加=>wp_head()で自動的に出力】

        ・引数1:挿入したいJavaScriptに、ハンドル名を付ける(例:my_custom_javascript)
        ・引数2:挿入したいJavaScriptは、 \wp-content\plugins\my_plugin\script\my_custom_javascript.jsに保存
        ・引数3:jQuery依存型のScriptなのでWordPressで読み込むjQueryのハンドル名jqueryを配列で設定
        ・引数4:バージョン番号はつけない
        ・引数5:wp_head()関数のところで出力
        */
        wp_enqueue_script(
            'my_custom_javascript',
            plugin_url( 'script/my_custom_javascript.js' ),
            array( 'jquery' ),
            false,
            false
        );

        /*
        【タイプ1:CSSを出力待ち配列(queue配列)として追加=>wp_head()で自動的に出力】

        ・引数1:挿入したいCSSに、ハンドル名を付ける(例:my_custom_javascript)
        ・引数2:挿入したいCSSは、 \wp-content\plugins\my_plugin\script\my_admin_style.cssに保存
        ・引数3:関連するスタイルシートのハンドル名を配列で指定
        ・引数4:バージョン番号はつけない
        ・引数5:スタイルシートの対応メディアを指定しない
        */
        wp_enqueue_style(
            'my_admin_style',
            plugin_url( 'script/my_admin_style.css' )
        );
    } 
}

タイプ2使用例

<?php
//使用例
$hogehoge = new HOGEHOGE();
class HOGEHOGE {
    public function __construct() { 
        add_action( 'admin_enqueue_scripts', array( &$this, 'admin_page_scripts' ) ); 
    }
 
    public function admin_page_scripts() 
    { 
         global $hook_suffix;
         /*
        【タイプ2:JavaScriptを登録配列(registered配列)として追加
      =>登録しただけなのでこのままではwp_footer()やwp_head()のところで出力されない。 
      =>別途wp_enqueue_script( 'my_custom_javascript2' );を行う必要がある。 】

        ・引数1:挿入したいJavaScriptに、my_custom_javascript2というハンドル名を付ける
        ・引数2:挿入したいJavaScriptは、 \wp-content\plugins\my_plugin\script\my_custom_javascript2.js
        ・引数3:jQuery依存型のScriptなのでWordPressで読み込むjQueryのハンドル名jqueryを配列で設定
        ・引数4:バージョン番号:1.0.1
        ・引数5:wp_footer()関数のところで出力
        ・
        */
        wp_register_script(
            'my_custom_script2',
            plugin_url( 'script/my_custom_javascript2.js' ),
            array( 'jquery' ),
            '1.0.1',
            true,
        );

         /*
        【タイプ2:CSSを登録配列(registered配列)として追加
      =>登録しただけなのでこのままではwp_footer()やwp_head()のところで出力されない。 
      =>別途wp_enqueue_script( 'my_custom_javascript2' );を行う必要がある。 】

        ・引数1:挿入したいCSSに、my_custom_css2というハンドル名を付ける
        ・引数2:挿入したいCSSは、 \wp-content\plugins\my_plugin\script\my_custom_css2.css
        ・引数3:関連するスタイルシートのハンドル名を配列で指定
        ・引数4:バージョン番号はつけない
        ・引数5:スタイルシートの対応メディアを指定しない
        */
        wp_register_script(
            'my_custom_css2',
            plugin_url( 'script/my_custom_css2.css' )
        );


        /*特定の管理画面で読み込ませるギミック
     1. $hook_suffixを用いる => プラグインで追加した特定のページならこれで十分
        2. get_post_type()と$hook_suffixを組み合わせる => 特定の投稿タイプ管理画面の特定の状態ページ(一覧ページ、編集ページ、新規追加ページ)を判別することができる
        
        上記1, 2を利用してif()を利用し、事前にwp_register_script()等で登録しておいたハンドル名を利用し、wp_enqueue_script(), wp_enqueue_style()を用いて出力させる

        */
        if( 'post-new.php' === $hook_suffix && 'hogehoge' === get_post_type() ){
            wp_enqueue_script( 'my_custom_script2' );
            wp_enqueue_style( 'my_custom_css2' );
        }
    
    } 
}

WordPressでデフォルトで使用できるJSライブラリのハンドル名

wp-includes\functions.wp-scripts.phpファイルには、スクリプト読み込みの登録を削除するwp_deregister_script()関数が定義されていて、その中で勝手に登録削除できないスクリプトのハンドル名がリスト化されています。

逆に言えば、このリストにあるハンドル名はWordPressでデフォルトで利用できるスクリプト(ハンドル名)だと考えられます。

'jquery’,
'jquery-core’,
'jquery-migrate’,
'jquery-ui-core’,
'jquery-ui-accordion’,
'jquery-ui-autocomplete’,
'jquery-ui-button’,
'jquery-ui-datepicker’,
'jquery-ui-dialog’,
'jquery-ui-draggable’,
'jquery-ui-droppable’,
'jquery-ui-menu’,
'jquery-ui-mouse’,
'jquery-ui-position’,
'jquery-ui-progressbar’,
'jquery-ui-resizable’,
'jquery-ui-selectable’,
'jquery-ui-slider’,
'jquery-ui-sortable’,
'jquery-ui-spinner’,
'jquery-ui-tabs’,
'jquery-ui-tooltip’,
'jquery-ui-widget’,
'underscore’,
'backbone’,

 

Posted by webmaster