WordPress用ヘッダ - Webデザインの日々日記

大体こんな感じを目指す。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link href="style.css" media="all" rel="stylesheet" type="text/css" />
<meta name="keywords" content="キーワードを,区切りで入力。3〜5個。" / >
<meta name="description" content="ページの概要・キャッチコピーを記載。60〜180字。" />
<meta name="robots" content="index,follow" />
<meta name="creation date" content="月 日, 年" / >
<title>タイトル</title>
</head>

doctype

テーマによってheader.phpの書き方はたくさんあるのだけど、twenty-tenを参考にすると
doctypeは普通に指定。

html

htmlは、

<html <?php language_attributes(); ?>>
というのがあって、これは
<html dir="ltr" lang="ja">

を出力する。意味は、「文字は左から右に。言語は日本語。」left to right, japaneseというわけかな？
なので、

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

でいいはず。（XHTML1.0指定の場合）

文字コード

文字コード UTF-8の指定は、phpでプログラム任せにできる。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
は、
<meta charset="<?php bloginfo( 'charset' ); ?>" />
で、
<meta charset="UTF-8" />
と出力される。

スタイルシート

<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" media="all" rel="stylesheet" type="text/css" />

スタイルシートへのリンク（href="style.css"）は、WordPress のファイル構造から、php ファイルとcssファイルは同一階層になるのでこういう書き方になるはずだが、これもphpで自動的に作成させることができるようだ。

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

ちなみに相対指定ではなく絶対指定になるみたい。

タイトル

考えてみればheaderは全ページに共通に適用するのでこいつはphpコードに頼らざるを得ない。

<title><?php global $page, $paged;
	wp_title( '|', true, 'right' );
	bloginfo( 'name' );
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
	?></title>

えーと、意味が、

<title><?php
	 * Print the <title> tag based on what is being viewed.
	global $page, $paged;
　　　　　　　$pageと $pagedをグローバル変数として指定。
	wp_title( '|', true, 'right' );
　　　　　　　ページのタイトルを出力、そのあと｜をプリント　
	bloginfo( 'name' );
　　　　　　　続いてブログの名前を出力。
	$site_description = get_bloginfo( 'description', 'display' );
　　　　　　　$site_description関数を定義。
	if ( $site_description && ( is_home() || is_front_page() ) )
　　　　　　　もしも表示するページがトップページの場合
		echo " | $site_description";
　　　　　　　ブログの概要を呼び出し、表示する。

	// ページ番号が必要なら:
	if ( $paged >= 2 || $page >= 2 )
　　　　　　　ページが2ページ以上ある場合で、先頭ページでない場合、
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
　　　　　　　ページ番号を表示。最終ページまで。
	?></title>

最後のやつは要らないかな。twentytenという記述が気になる。必要に応じて、だし、twentyten限定の何かが絡んでるっぽい。手元の本ではちょっと不明なのでこれは省くことにする。

javascript

<meta http-equiv="Content-Script-Type" content="text/javascript" />

とりあえず上記は記述しておくとして、大事なコードが一つ。

<?php wp_enqueue_script('jquery'); ?>

プラグインで、jQueryを使うものはたくさんあるのだけど、それを有効化するのにこれが必要。

headerコードまとめ

上記をまとめると、WordPressでテーマ作成する際の、header.phpの基本コードは以下のようになる。(XHTMLで記述する場合)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<meta name="keywords" content="キーワードを,区切りで入力。3〜5個。" / >
<meta name="description" content="ページの概要・キャッチコピーを記載。60〜180字。" />
<meta name="robots" content="index,follow" />
<meta name="creation date" content="月 日, 年" / >
<title><?php global $page, $paged;
	wp_title( '|', true, 'right' );
	bloginfo( 'name' );
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
	?></title>
</head>

header.phpの中でも最初のhead部分はこのようになるかな。とりあえずここまで。