WordPressに独自のスタイルシートを安全に読み込む方法

WordPressに独自のCSSファイルやJavaSCriptファイルを読み込みたい時があります。

基本は「header.php」に読み込み処理を書けば読み込まれるのですが、これではWordPressのテーマを変更する度に同じ処理を追加しなければなりません。

今回は「function.php」に追加する内容をCode Snippetsプラグインを使って管理して安全に読み込みます。

独自のスタイルシートを読み込む

独自のスタイルシートを読み込むには「header.php（もしくはそれに該当するファイル）」に以下のように記述すれば読み込まれます。

<link rel="stylesheet" href="スタイルシート名">

でも、ここに書くとWordPressのテーマを変更したり、テーマがアップデートされたりするとファイルが上書きされ、もとにもどってしまいます。

そこで、今回はCode Snippetsプラグインを使って別管理でテーマを変更、更新しても消えないようにします。

Code SnippetsプラグインはHTMLやPHP、Javascriptなどの処理をテーマファイルを変更することなく、実行させることができるプラグインです。

しかも変更の難しい「function.php」に書くような内容もこのプラグインで管理すれば、安全に機能を追加することができます。

プラグインのインストールは「プラグイン」→「新規追加」から「Code Snippets」で検索してインストールします。

プラグインを有効化したあと、新規にコードを追加します。

追加するコードは以下のようなものになります。

add_action('wp_head','my_laod_css');
function my_laod_css(){
    echo '<link rel="stylesheet" href="スタイルシート名">' ;
}

処理としてはadd_action()でwp_headをフックしてmy_laod_css()を追加します。

これでWordPressが「header.php」を読み込んだタイミングで「my_laod_css()」処理が呼ばれます。

この処理の中で必要なスタイルシートやJavascriptなどをロードします。

これで「function.php」を変更することなく、機能を追加できたので「管理画面が真っ白」になってログインできないなどのトラブルにもなりませし、テーマを変更したりアップデートしてもこの処理が消えることはありません。

このCode Snippetsプラグインはとても便利なので、カスタマイズする人は入れておきましょう。

以上、WordPressに独自のスタイルシートを安全に読み込む方法でした。