プラグインプログラム内から出力するフォームの HTMLタグ内にちょっとしたCSSは直接書いていたのですが、PHPを使用して呼び出した WordPress内のプログラム関数内から生成される HTML タグに対しては、CSSの設定が直接は出来ません。
この場合、そのHTMLタグを生成する関数の前後を div タグで囲み class を設定しておけば、head タグ内で子孫セレクタを使うことで、CSSを適用させることが出来ます
子孫セレクタっていうのを最近ようやく理解しました
他にもいろいろあるようです。CSSももっと勉強せねば (^_^;)
それではプラグインから 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 という関数もあるようです