TwentyTwelveのheader.phpは、個別投稿ページ、トップページ、カテゴリーページなど全てのページで、ナビゲーションバーから上の表示を担当するテンプレートファイルです。SEOなどの面でも最重要なので、構造を簡単に理解しておくことは必須だと思います。
<!DOCTYPE html>まで
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<?php～?>は、中身がコメントアウトされていて、HTMLとして出力されない部分です。コメントアウトの中身は単なる説明です。<head>～</head>の全てと<body>～<div id=”main”>のHtmlソースの表示をheader.phpが行っていることがわかります。
<!DOCTYPE html>は文書形宣言で「このHTML文書をHTML5で書きますよ。」という意味です。
IE向けの条件付きコメント
<!DOCTYPE html>の後に以下の部分が続いています。
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
このうち、<?php language_attributes(); ?>は、ワードプレスの日本語版を使う限りにおいてはlang=”ja”を出力する働きをします。つまり、「このページは日本語で書くよ」という意味です。
また、<!–[if ○○○]>～<![endif]–>の書式は、インターネットエクスプローラー（IE7）向けの条件付きコメントで、「もし○○○ならば～」という意味になります。
ここでは、次のような3部構成になっています。
- もしIE7ならば～
- もしIE8ならば～
- もしIE7でもIE８でもないならば～
というわけで、「IE7とかIE8の場合にクラス名が設定されるけど、それ以外の場合はクラスはあてられていいないですよ」という意味になります。
なお、条件付きコメントについてもっと詳しく見たい方は、次のページがよくまとまっていると思います。
[img-link url=”http://web.archive.org/web/20140423114127/http://kleza.blogspot.jp/2008/10/ie.html” title=”Applerの備忘録（仮）: IE用条件付コメントのまとめ”]
meta charset=”○○○”
次に<head>～</head>を見てみます。ここからは細かくいきます。まず、以下の部分から。
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta charset=”○○○” />は○○○で文字コードを指定するHTMLタグです。
そして○○○の部分に使われている<?php bloginfo( ‘charset’ ); ?>ですが、ワードプレスが使用する文字コードを吐き出す関数です。つまり「UTF-8」が吐き出されます。
そういうわけで、全体として「文字コードはUTF-8ですよ。」と言っているわけです。
文字コードについて詳しく知るには、以下のページがいいです。
[img-link url=”https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89″ title=”文字コード – Wikipedia”]
meta name=”viewport”
<meta name="viewport" content="width=device-width" />
meta name=”viewport”は表示領域を指定するHTMLタグです。content=”width=device-width”で表示領域の幅をデバイスのサイズと同じにする指定を行っています。
meta name=”viewport”について詳細を調べるなら以下のページがわかりやすいかも。
[img-link url=”https://allabout.co.jp/gm/gc/382610/2/” title=”2/2 スマートフォン用ページが自動縮小されないようにする [ホームページ作成] All About”]
title、wp_title
<title><?php wp_title( '|', true, 'right' ); ?></title>
この部分については、以下のページで散々書いていますのでご一読を。
[img-link url=”https://webshufu.com/wp_title-echoes-blog-name-and-page-number-in-twenty-twelve/” title=”WordPress Twenty Twelveでwp_titleを使うとブログ名やページ数が自動出力される”]
link rel=”profile”
<link rel="profile" href="http://gmpg.org/xfn/11" />
これはこの記事を書くまで全く理解してませんでした。未だによくわかりませんが、下記のページのおかげでぼんやりと輪郭をつかむことは出来ました。
ご一読されることをオススメします。
[img-link url=”http://www.geekpage.jp/blog/?id=2008/2/4″ title=”リンク2.0:Geekなぺーじ”]
link rel=”pingback”
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
これ全体でピンバック先を指定しています。ちなみにピンバックの意味ですが、用語集 – WordPress Codex 日本語版によると、以下のように定義されています。
ピンバックは、自分の投稿からリンクした先のブログ投稿へ自動的に通知を送る仕組み。リンク先のブログにピンバックを受け取る機能がある場合のみに有効。
残りの部分
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?>
<?php wp_head(); ?>より前の部分は、IEでIE9未満のブラウザで閲覧されている場合に、TwentyTwelveテーマフォルダー内のjs/html5.jsを読み込むという意味になります。
Applerの備忘録（仮）: IE用条件付コメントのまとめと関数リファレンス/get template directory uri – WordPress Codex 日本語版を参考にしてください。
また、<?php wp_head(); ?>は、CSSファイルやjsファイルへのリンク、Link要素などを大量に出力します。
正直無駄なソースも多いですが、<?php wp_head(); ?>を外してしまうとプラグインが作動しないなどの不具合が出ます。
無駄なソースを削除したい方は、こちらをご覧ください。
[img-link url=”http://teru2-bo2.blogspot.jp/2011/07/wphead.html” title=”wp_headから不要なコードを削除する : てるてる坊主”]
ところでCSSは?
ここまでで<head>～</head>についてすべて見てきましたが、スタイルシートを読み込む記述が出てきません。
ですが、TwentyTwelveはきちんとCSSを読み込んでいます。
その謎については次の投稿で解明します。