WordPressの管理画面でページを編集する際、「文字に色をつける」「文字を中央寄せにする」など装飾ができるようになっています。
また、さまざまなプラグインを導入した際には、プラグインを動作させるための スタイルシートやスクリプトを読み込む必要があります。
このように、WordPressでは、WordPressを正常に動作させるために必要なスタイルシートやスクリプトを読み込む機能があります。
現状を確認してみよう
WordPressの固定ページ編集画面で、装飾を施してみます。
「赤い文字」「青い文字」「中央寄せ」を追加で入力してみました。
装飾結果がどのように反映されているか確認してみましょう。
文字は表示されているものの、色や位置に変化がありません。
なぜ、装飾が反映されないのでしょうか？
それは、ページのソースを確認してみるとわかります。WordPressのエディタで装飾を行った場合、装飾するためのclassが追加されます。
「赤い文字」・・・class="has-inline-color has-vivid-red-color"
「青い文字」・・・class="has-inline-color has-vivid-blue-color"
「中央寄せ」・・・class="has-text-align-center"
classが追加されるだけでclassに対するスタイルの定義がないため、装飾が反映されないのです。
スタイルやスクリプトを読み込む
WordPressには、標準のスタイルやスクリプトが用意されています。
また任意のプラグインをインストールした際、そのプラグインを正常に動作させるために必要なスタイルやスクリプトもあります。
WordPressでは、これらのスタイルやスクリプトをヘッダーとフッターで読み込みを行います。
WordPress標準のヘッダーを読み込む
WordPress標準のヘッダーを読み込みには、wp_header関数 を使用します。
記述する場所は、headタグを閉じる直前（</head>）です。headタグは、header.php にあります。
<!DOCTYPE html>
<html>
<head>
<title><?php the_title();?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
<?php wp_header();?>
</head>
<body>
<h1><?php the_title();?></h1>
<?php the_content();?>WordPress標準のフッターを読み込む
WordPress標準のヘッダーを読み込みには、wp_footer関数 を使用します。
記述する場所は、bodyタグを閉じる直前（</body>）です。bodyタグの終了タグは、footer.php にあります。
<?php wp_footer();?>
</body>
</html>WordPress標準のヘッダー／フッターの反映結果を確認しよう
文字の色や文字の位置が、エディタで装飾を行ったとおりに反映されていることが確認できます。
これは、WordPress標準のヘッダー／フッターを読み込んだことで、装飾用classに対するスタイル（css）が適用されたからです。
WordPress標準のヘッダー／フッターを読み込むことで適用されるのは、スタイルだけではありません。
ページのソースを確認すると様々なタグが追加されていることが分かります。
詳細については、おいおい紹介していきます。
まとめ
今回は、wp_header関数、wp_footer関数を使ってWordPress標準のヘッダーとフッターを読み込む方法を紹介しました。
WordPress標準のヘッダーとフッターを読み込まないと、装飾が反映されないだけでなくWordPressやプラグインが正しく動作しないことがありますので、必ずwp_header関数、wp_footer関数ッターを使ってWordPress標準のヘッダーとフッターを読み込みましょう。
