LION MEDIAのスタイルシートがheadで読み込まれる仕組みを知りたい

LION MEDIAのスタイルシートがheadで読み込まれる仕組みを知りたい

なぜLION MEDIAのスタイルシートがheadで読み込まれてる仕組みを知りたくなったのか?それはLION MEDIAにスタイルシートを2つ作成して、記述したCSSを分割してheadに置くときとCSSの管理をシンプルにしたかったからです。

ですがスタイルシートを分割する前に、そもそもスタイルシートがheadでどのように読み込まれてるか、ぼんやりとしか分からなかったので改めて覚えておこうと思ったことが始まりで、あーでもないこーでもないと貪ったときのことを書いています。

 

基本的なLION MEDIAのスタイルシートの理解

 

LION MEDIAのスタイルシート(style.css)はLION MEDIAのHTMLで作られた骨組みにデザインをするために使うCSSファイルです。

 

 

  • 親テーマのスタイルシート(style.css)
  • 子テーマのスタイルシート(style.css)

 

 

LION MEDIAのスタイルシートには親テーマのスタイルシートと子テーマのスタイルシートがあります。

LION MEDIAの親テーマのスタイルシートはサイトのデザインの元になっています。

そして私たちが実際にLION MEDIAのテーマを自分の好きなようにカスタマイズするときはLION MEDIAの親テーマと一緒にインストールした子テーマのスタイルシートにCSSを記述して要素のカラーを変更したり、動きをつけてみたり、デザインをカスタマイズすることができるファイルです。

このようなLION MEDIAのスタイルシートはLION MEDIAのheader.phpのheadで読み込まれてブラウザのレンダリング後にはHTMLのlinkタグになっています。

 

headで読み込んだスタイルシートの必要性

スタイルシートはHTMLの骨組みにデザインを適用するために必要ですが、そのほかにブラウザがWebページを画面に表示するとき(レンダリング)にも必要です。

 

関連 ブラウザレンダリングの仕組みを覚えておきたい

 

スタイルシートの情報をブラウザに渡すときはheadで読み込むようにしないとブラウザのレンダリングに支障が出てしまうので、必ずスタイルシートはheadに置く必要があります。

しかしWordPressのテーマLION MEDIAのheadにはスタイルシートらしきlinkタグが見当たらない。

知ってる人からすれば「何をいってるんだね君は…」と言われそうですが、ぼんやりとしか理解できていなかったので知っておきたいと思います。

 

 

Advertisement

 

 

headで読み込まれてるスタイルシートの仕組み

 

まず基本的なHTMLでheadタグ内にスタイルシートをリンクする方法は下記のようになります。

 

<head>
 <link rel="stylesheet" href="css/style.css">
</head>

 

この書き方は理解できてるのですが、しかしLION MEDIAのheadだと

 

<head>
 <meta charset="utf-8">
 <?php fit_amp_head(); ?>
 <?php else: // 通常ページ ?>
 <html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">
 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 <meta charset="<?php bloginfo('charset'); ?>">
 <?php wp_head(); ?>
 <?php endif; // AMP分岐終了 ?>
 <?php fit_seo();?>
 <?php fit_ogp();?>
 <?php if(!$myAmp && get_option('fit_access_gaid')): // 通常ページanalytics ?>
 <?php include_once("analyticstracking.php"); ?>
 <?php endif; ?>
 <?php if (get_option('fit_advanced_head')): ?>
 <?php echo get_option('fit_advanced_head'); ?>
 <?php endif; ?>
</head>

 

上記のようにスタイルシートらしき記述がないです。

 

 

ですが実際にブラウザがページをレンダリングしてページが表示されたソースには、ちゃっかりHTMLのlinkタグが付いてます。

WordPressの知識が豊富な人やPHPを知ってる人なら、なんてことはない事ですが、スタイルシートがheadで読み込まれる仕組みを理解して、さらに同じようにheadでスタイルシートを読み込めるような書き方ができるまで私は丸一日かかりました。

そんなスタイルシートがheadで読み込まれる仕組みを書いてるので読み進めてみてください。

 

headにスタイルシートをwp_headで呼び出す

 

LION MEDIAのheadのスタイルシートがどのように読み込まれてるか結果を先に言うと、PHPとWordPress関数でスタイルシートをheadに呼び出しています。

もう少し細かく言うとWordPress関数の「wp_head」でLION MEDIAのスタイルシートが呼び出せるようにphpでオリジナル関数をwp_headと結びつけて呼び出せる仕組みになっている。

そうするとheader.phpのheadタグ内にはスタイルシートのlinkタグを書くことなくスタイルシートを呼び出せて読み込める仕組みになっています。

 

Advertisement

 

結果だけでは分かりずらいのでheadにwp_headを置いただけでスタイルシートを呼び出す仕組みを作ってるLION MEDIAのファイルを見てみます。

 

wp_headを呼び出すLIONMEDIAのファイル

 

LION MEDIAの関数がまとめられてるファイル「functions.php」でスタイルシートをheader.phpのheadにwp_headにして呼び出してます。

これはLION MEDIAに限らずWordPressで言えることですがWordPressのテーマはphpを使用して動的なサイト作成をするのが得意ですが、headに呼び出すテンプレートファイルも動的にfunctions.phpで動作が作られてます。

 

functions.phpで呼び出す仕組み

 

//////////////////////////////////////////////////
//wp_headにオリジナル項目追加
//////////////////////////////////////////////////
function fit_head() {
if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-main')) {
echo '<link class="css-async" rel href="'.get_stylesheet_uri().'">'."\n";
}else{
echo '<link rel="stylesheet" href="'.get_stylesheet_uri().'">'."\n";
}

〜省略〜

add_action('wp_head', 'fit_head');

 

functions.php2488行目あたりにwp_headにオリジナル項目追加という項目があります。この項目でLION MEDIAのstylesheetはwp_headで呼び出せるように追加してます。

そして同じくfunctions.phpでLION MEDIAのheadに呼び出すオリジナルのfit_headの内容をphp記述してあります。

「style.css」のURLを取得し、echoでURLを出力するために「echo get_stylesheet_url()」が書いてある。

if文で条件分岐してLION MEDIAのスタイルシートをget_template_directory_url()テンプレートタグを使って、LION  MEDIAのテンプレートのあるディレクトリのURLを取得している。くらいしかわかりませんが、初見ならざっくり場所を特定できたくらいでいいかと思います。

 

 

headのwp_headをadd_actionで実行

 

最終的にここで書かれてるif文によってオリジナル項目で追加されたfit_headはwp_headにフックしてadd_actionで実行できるようになってます。

 

add_action('wp_head', 'fit_head');

 

functions.phpの3550行目あたりでfit_headをwp_headにフックしたファイルをadd_actionで実行させてheader.phpのheadタグ内でスタイルシートが読み込めてるのだと理解できた。

この仕組みはwp_headがアクションしたときにfit_headが実行を始めるけどfunctions.phpに紐づいてるstyleが実行を始めることができるWordPressのアクションフックです。

 

wp_headアクションフックはユーザーのテンプレート内<head></head>セクション内において、wp_head()関数を呼び出したときに起動されます。これはテーマに依存しますが、最も重要なフックの1つであるので、かなり広くサポートされています。

引用元 WordPress Codex日本語版

 

それなのでheadでwp_headしか記述がなくてもLION MEDIAのスタイルシートの読み込みができてレンダリングのときにはlinkタグが生成される仕組みができている。

 

LION MEDIAのスタイルシートの読み込み方の利点

 

LION MEDIAのテンプレートファイルをずっと見ていて理解できた仕組みについての利点です。

記述場所がfunctions.phpで統一されてるので読み込むファイルは何をフックしてるかわかりやすかったし、スタイルシートの管理も楽だということ。そしてheadに記述するタグをシンプルにすることができる。

さすがWordPress公式推奨の関数です。

最終的には、この仕組みを応用するとスタイルシートの子テーマを2つに分割してもheadにはwp_headだけ置いとけばいいので、headタグ内はシンプルにしておける利点があるし、スタイルシートに書くCSSの管理がらくになる利点ができます。

そして一番の利点はカスタマイズの幅がかなり広がります。

WordPressテーマカテゴリの最新記事