プラグイン開発レッスン。プラグイン用のCSSを自動で読み込む方法。

WordPressでオリジナルのテーマやプラグインを自作できるレベルを目指しておられる生徒さんに、ブログでよく見かける「新着記事の一覧」を表示するウィジェットをプラグイン化するレッスンを行っています。

大きな流れは次の通りです。

1.ウィジェット用のプログラムを作成する。
2.ZIP化してプラグインの新規追加ページからアップロードする。

そのため、まずはウィジェットのプログラムを、使用中のテーマの functions.php に直接組み込む手順を学んでいただき、その次に、プラグイン化してテーマと物理的に分離する手順を学んでいただきました。

プラグイン専用のCSSはどうやって読み込ませるのか?

通常、何かをブラウザの画面に表示するプラグインでは、表示用のスタイルを定義したCSSファイルがプラグインと一緒に自動で読み込まれるようになっています。

WordPressでCSSやJavaScriptなどの外部ファイルを公開ページ側に読み込ませる方法といえば、wp_enqueue_scripts アクションフックで wp_enqueue_style や wp_enqueue_script を割り込ませるのが定石です。

関数リファレンス/wp enqueue style

関数リファレンス/wp enqueue script

プラグインでも、この考え方は全く同じです。

問題は、「プラグインのプログラムの中で、どのタイミングでアクションフックを使うべきか?」です。

ここで、フックに関する知識が役に立ちます。

WordPressのアクションフックとは、WordPressが公開ページや管理画面の表示に先立ってサーバー内で実行する特定の処理に、別の処理を割り込ませることができる仕組みのことをいいます。

wp_enqueue_scripts は、公開ページが表示されるときに発生しますが、add_action でフックを登録する処理自体はもっと早いタイミングで行っておかなければなりません。

ウィジェットの場合、WP_Widgetクラスの派生クラスを実装しますので、コンストラクタの中で wp_enqueue_scripts  を add_action すると良いです。

このあたりはプログラムレベルのお話になりますので、しっかり学びたい方は無料相談をご利用ください。