WordPressプラグインで外部CSSファイルを使ってみる

プラグインプログラム内から出力するフォームの HTMLタグ内にちょっとしたCSSは直接書いていたのですが、PHPを使用して呼び出した WordPress内のプログラム関数内から生成される HTML タグに対しては、CSSの設定が直接は出来ません。

この場合、そのHTMLタグを生成する関数の前後を div タグで囲み class を設定しておけば、head タグ内で子孫セレクタを使うことで、CSSを適用させることが出来ます

子孫セレクタっていうのを最近ようやく理解しました
他にもいろいろあるようです。CSSももっと勉強せねば (^_^;)

意外と知らない!?CSSセレクタ20個のおさらい

それではプラグインから head タグに書き込むのはどうやるのでしょうか

head タグ内でCSSファイル読み込みをする為には

プラグインプログラム内から、head タグに外部CSSファイルを読み込ませる為のWordPressの関数があります

wp_register_style() CSSスタイルシートファイルを登録します
wp_enqueue_style() wordpressの生成されたページにCSSスタイルファイルを追加します(head タグへの書き出し)。
CSSスタイルシートファイルが事前に wp_register_style で登録されていれば、そのハンドルを指定するだけです

どちらの関数も同じ引数でパラメータを指定出来るようです
必須項目は、ハンドル名とURLパスです

$handle CSSスタイルシートのハンドル名
$src CSSスタイルシートのURLパス
$deps 依存するスタイルシートのハンドル
$ver スタイルシートのバージョン番号
$media メディアタイプ属性

この関数の使用例が、wp_enqueue_style() で紹介されています

関数の説明からは、wp_enqueue_style だけ使えばよさそうな気がしますが、サンプルでは全て wp_register_style でCSSファイルを登録してから、wp_enqueue_style でハンドルを指定して書きだすという二段構成で使用しています

また、プラグインの場合は、CSSファイルをプラグインフォルダかそのサブフォルダに置きますので、plugins_url 関数を使ってURLパスをセットします
(テーマファイルの場合には、get_template_directory_uri を使用)

今回はプラグインプログラムの管理画面だけでCSSファイルを読み込ませたかったので管理画面の ‘admin_init’ にアクションフックさせて次の my_option_register 関数で呼び出してみました

//プラグインのコンストラクタ内で add_action 

  public function __construct() {

  (省略)


    if(is_admin()) {
        //管理画面(設定メニュー)
        add_action('admin_menu', array(&$this, 'my_option_menu'));        //オプション表示
        add_action('admin_init', array(&$this, 'my_option_register'));    //オプション更新

        //プラグイン削除時のフック(コールバック関数を static にする必要あり)
        if ( function_exists('register_uninstall_hook') )
            register_uninstall_hook(__FILE__, 'Post6widgetarea::my_uninstall_hook');
    }


  (以下略)
   
  }


//管理画面時のみフックされる

  public function my_option_register()
  {
      register_setting('post6widget_optiongroup', 'post6widget_option');
      //管理画面の<head> 内でCSSファイルを読みこませる
      $urlpath = plugins_url('Post6style.css', __FILE__);
      wp_register_style('post6style', $urlpath);
      wp_enqueue_style('post6style');
  }

  (以下略)
 


wp_enqueue_style を実行するタイミングで head タグに書き出されるので、プログラム内で条件判断をすることで、特定のページだけに出力させることが出来ます

今回はCSSファイルを試してみましたが、参考までに JavaScript用の wp_register_script, wp_enqueue_script という関数もあるようです

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss