WordPressテーマ開発をやり始めたころ、「header.phpにはwp_head();を、footer.phpにはwp_footer();を必ず書いてください」と言われ、意味もよくわからず「とりあえずこれ書いとかんと動かんのやな」くらいのイメージでいましたが、書かなければ動かないということは当然これらは重要な役割を持っているからなのです。
よく「なんで動かんのやろ…」と原因不明の不具合に悩まされているとき、wp_head();かwp_footer();のどっちかがないということがたまにありますが、この方々はとんでもなく重要な役割を持っていることを知れば、書き忘れることも少なくなるでしょう。
むしろ愛着すら持つようになるかもしれません。
というわけで、今回はwp_head();とwp_footer();がいったい何なのかを徹底解説したいと思います。
wp_head();とは
WordPress Codexでは、wp_head();について以下のように説明されています。
‘wp_head’ アクションをスタートさせる。テーマテンプレートファイル内の</head>タグ直前で使う（例: header.php や index.php の中）。
全然意味がわかりません。とりあえず</head>の直前に入れたほうがいいということだけは伝わります。
これでは結局なんやねんってなってしまうので、実際にテンプレートにwp_head();を入れて、サイト上でどのようになっているのか確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '｜', true, 'right' ); bloginfo('name');?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
↓ブラウザ上で見てみると…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>テスト</title>
<link rel="stylesheet" href="http://localhost/nomou/htdocs/wp-content/themes/sample/style.css" type="text/css" />
<meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/nomou\/htdocs\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.6"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css' href='http://localhost/nomou/htdocs/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost/nomou/htdocs/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='https://api.w.org/' href='http://localhost/nomou/htdocs/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/nomou/htdocs/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/nomou/htdocs/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.9.6" />
<link rel="canonical" href="http://localhost/nomou/htdocs/" />
<link rel='shortlink' href='http://localhost/nomou/htdocs/' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/nomou/htdocs/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fnomou%2Fhtdocs%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/nomou/htdocs/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fnomou%2Fhtdocs%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
うわーっ！なんかいっぱい増えてる！
<meta name=’robots’ content=’noindex,follow’ />
以降は全部wp_head();によって出力されているんですね。
そう、wp_head();とは、WordPressさんサイドで用意してくれるhtmlをhead内に出力してくれる関数なんです。
例えばそこには、All in one SEO Pack等のプラグインで設定したmeta情報や、プラグイン固有のスタイルシート、javascriptファイルなんかも出力されることになります。
逆に言えばwp_head();がないと、head内に必要な情報が出力されないということです。
wp_footer();とは
これも例によりCodexを見てみましょう。もしかするとわかりやすい説明が…
‘wp_footer’ アクションフックをスタートさせる。テーマテンプレートファイル内の </body> タグ直前で使う（例: footer.php や index.php の中）。
うん、そうだと思った。
wp_footer();も、働きとしてはwp_head();と同じです。</body>直前に、ページの最後に読み込まれるべきスクリプトなんかが出力されるわけですね。見てみましょう
<?php wp_footer(); ?>
</body>
</html>
↓ブラウザ上で見ると…
<script type='text/javascript' src='http://localhost/nomou/htdocs/wp-includes/js/admin-bar.min.js?ver=4.9.6'></script>
<script type='text/javascript' src='http://localhost/nomou/htdocs/wp-includes/js/wp-embed.min.js?ver=4.9.6'></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain)
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<!--<![endif]-->
<div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">ツールバーへスキップ</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="ツールバー" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/nomou/htdocs/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">WordPress について</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/about.php">WordPress について</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://ja.wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="http://wpdocs.osdn.jp/">ドキュメンテーション</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://ja.wordpress.org/support/">サポートフォーラム</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://ja.wordpress.org/support/forum/feedback/">フィードバック</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/nomou/htdocs/wp-admin/">テスト</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/">ダッシュボード</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/themes.php">テーマ</a> </li></ul></div> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%2Fnomou%2Fhtdocs%2F">カスタマイズ</a> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/update-core.php" title="2件のプラグイン更新, 翻訳の更新"><span class="ab-icon"></span><span class="ab-label">3</span><span class="screen-reader-text">2件のプラグイン更新, 翻訳の更新</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0件のコメントが承認待ちです。</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/nomou/htdocs/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">新規</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/post-new.php">投稿</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/media-new.php">メディア</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/post-new.php?post_type=page">固定ページ</a> </li>
<li id="wp-admin-bar-new-shop"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/post-new.php?post_type=shop">店舗情報</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/user-new.php">ユーザー</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/post.php?post=11&action=edit">固定ページを編集</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost/nomou/htdocs/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">検索</label><input type="submit" class="adminbar-button" value="検索"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost/nomou/htdocs/wp-admin/profile.php">こんにちは、<span class="display-name">root</span> さん<img alt='' src='http://1.gravatar.com/avatar/d01ced56814ff772907fb3f10654240e?s=26&d=mm&r=g' srcset='http://1.gravatar.com/avatar/d01ced56814ff772907fb3f10654240e?s=52&d=mm&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost/nomou/htdocs/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/d01ced56814ff772907fb3f10654240e?s=64&d=mm&r=g' srcset='http://1.gravatar.com/avatar/d01ced56814ff772907fb3f10654240e?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>root</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-admin/profile.php">プロフィールを編集</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost/nomou/htdocs/wp-login.php?action=logout&_wpnonce=775107e931">ログアウト</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://localhost/nomou/htdocs/wp-login.php?action=logout&_wpnonce=775107e931">ログアウト</a>
</div>
</body>
</html>
これまたすごい量のコードが出力されています。
ここにはページの最後に読み込むスクリプトに加え、ログインしているときにサイト上部に表示される管理バーのコードも出力されます。
なので、wp_footer();がないと一部のスクリプトが読み込まれずエラーになったり。管理バーが表示されません。
おわり
wp_head();とwp_footer();の重要さがご理解いただけたかと思います。この方々がいないと、ページはまともに機能しません。
以後、書き忘れのないよう注意しましょう。
本記事の基礎的なことを含め、マッハでWordPressについてプロ並みのスキルを身につけたいなら、TechAcademy
のWordPressコース等、プログラミングスクールで学ぶのが手っ取り早いです。
最短４週間でオリジナルテーマを作れるようになりますので、ホームページを作りたいけど外注に出すと高いから自社で作りたい方や、WordPress構築の仕事を請けたい方はぜひ検討してみてください。
WordPressでWebサイトを構築するのに便利なプラグインを以下の記事で紹介しているので、ついでにどうぞ。
WordPress構築で使える、カスタマイズに便利なプラグイン11個
それじゃ、バイバイ～
