WordPressのhead要素を整理してみる

静的HTMLだった場合のhead要素

いきなりWordpressに入る前に静的HTMLで作成する場合のhead要素を確認してみます。
あれが足りない、ここは違うだろという意見はあると思いますが、大きく外していないはず（多分……）。

HTML

			<!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-Language" content="ja" />
			<meta http-equiv="imagetoolbar" content="no" />
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
			<meta name="description" content="ここにページの説明が入ります。" />
			<title>サイトタイトル</title> 
			<link rel="shortcut icon" href="/favicon.ico" />
			<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
			<script type="text/javascript" src="js/common.js"></script>
			</head>

WordPress用のタグに置き換え

上記をベースにWordpress用のタグに置き換え、または追加する部分だけを抜き出してみます。

6行目

			<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

メディアタイプと文字コードを指定する情報です。
bloginfoのhtml_typeとcharsetに置き換えることによって管理画面で入力した情報を反映させることができます。
ただ管理画面から指定したとしてもこの部分はテンプレートで対応しなきゃいけない部分だよな、とか思ったりするので置き換える必要はないと思います。

7-8行目

keywordsとdescriptionです。
2011年4月現時点で「keywords」に関してはGoogleではまったく見ていないようです。
さらに日本のYahoo!ではGoogleのエンジンを採用していますので、適当に書いておく程度で良いと思います。

「description」は検索エンジンに表示される部分なので重要ですね。
例えばトップページは管理画面で設定した「キャッチフレーズ」を、各記事は抜粋を表示したい場合は次のようになります。

<meta name="description" content="<?php
if(is_single()) {
	echo strip_tags(preg_replace('/n/i', '', get_the_excerpt()));
} elseif(is_category()) {
	echo single_cat_title()."カテゴリーの記事一覧ページです。";
} elseif(is_tag()) {
    echo single_tag_title()."タグの記事一覧ページです。";
} elseif(is_month()) {
    echo the_time('Y年M月')."に投稿された記事一覧ページです。";
} else {
    bloginfo('description');
}?>" />

また、SEO関係のプラグインを入れている場合はこの辺りは各プラグインの設定に合わせる必要があります。
ちなみに「HeadSpace」を使用する場合、そのままですと重複しますのでkeywordsとdescriptionは削除しておきます。

9行目

			<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

SEOでとても重要だと言われているタイトルの部分です。
このブログでは上記のように記述して「ページタイトル | ブログ名」と表示しています。
さらにトップのようにページタイトルがないページなら「ブログ名」だけ表示されるというちょっと便利な設定です。

サイトによってはページごとにカスタマイズしたい場合もあると思いますのでそういう場合はプラグインを使用します。
ちなみに「HeadSpace」を使用する場合は下記のようにします。

			<title><?php wp_title(''); ?></title>

descriptionと違い何も書いてない場合、何も入りませんので注意です。

11-12行目

			<link href="<?php bloginfo('template_directory'); ?>/css/import.css" rel="stylesheet" type="text/css" media="all" />
			<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/common.js"></script>

外部スタイルシートとJavascriptはパスに「bloginfo(‘template_directory’)」を入れてテンプレートフォルダを指定します。

最終的にheadはこんな感じになりました。

header.php

			<!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-Language" content="ja" />
			<meta http-equiv="imagetoolbar" content="no" />
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>
			<?php wp_head(); ?>
			<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
			<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
			<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
			<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
			<link rel="shortcut icon" href="/favicon.ico" />
			<link href="<?php bloginfo('template_directory'); ?>/css/import.css" rel="stylesheet" type="text/css" media="all" />
			<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/common.js"></script>

新たに追加するWPタグ

			<?php wp_head(); ?>

余計なタグも追加されますが、これを記述しないとheadに要素を追加するタイプのプラグインが動作してくれません。

			<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
			<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
			<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
			<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

RSSとPingです。
RSSに関してはいろいろあるみたいですね。とりあえずこれでやってみようかなという感じです。

wp_headによって追加されるタグの削除

wp_headタグですが前述の通りタグが自動的に追加されます。
なるべくシンプルにしたいのでいらないものは削除してしまいましょう。
wp_headによって新たに追加されるコードは下記の通りです。

		<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wp/xmlrpc.php?rsd" /> 
		<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp/wp-includes/wlwmanifest.xml" /> 
		<link rel='index' title='webOpixel' href='https://www.webopixel.net/' /> 
		<meta name="generator" content="WordPress 3.0" /> 
			<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

「EditURI」「wlwmanifest」: Windows Live WriterやiPhoneなど外部ツールを使用してブログを更新する場合必要な情報です。
「generator」: WordPressのバージョン情報。
「index」: インデックスページの情報。

最後に「recentcomments」というインラインスタイル。
たぶん前のバージョンでは入っていなかったと思うので3.0からのものだと思われます。なんなんでしょうね。

インデックスページの情報は残しておいた方がよさそうです、それ以外のを削除してみます。
削除の方法は、コアファイルを修正する方法と、テンプレートフォルダのfunctions.phpにコードを記述する方法があります。
コアファイルの修正はバージョンアップのたびに変更しなくてはいけないので、今回は後者の方法をとります。

function.php

			remove_action('wp_head', 'rsd_link');
			remove_action('wp_head', 'wlwmanifest_link');
			remove_action('wp_head', 'wp_generator');
			
			/* インラインスタイル削除 */
			function remove_recent_comments_style() {
				global $wp_widget_factory;
				remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) );
			}
			add_action( 'widgets_init', 'remove_recent_comments_style' );

これでインデックス情報以外の項目が消えると思います。

外部JSを読み込む場合

プラグインにはWordpressに組み込まれているJSファイルを使用するものがあり、このプラグインを有効にすると「wp_head()」に自動的に読み込まれます。
そのため、通常のHTMLのように外部JSを読み込むと2重に読み込まれてしまう場合がありあまりよろしくありません。
これを回避するには「wp_enqueue_script()」という関数を使用します。
Wordpressに組み込まれているライブラリにはハンドル名が割り振られており、引数にこのハンドル名を指定することで各ライブラリを読み込むことができます。
ライブラリのハンドル名は下記URLを確認してください。

Default scripts included with WordPress

「wp_enqueue_script()」関数を記述する場所は「header.php」の「wp_head()」の前か、「functions.php」です。
「wp_head()」の後だと有効にならないっぽいので要注意です。
例えば「jquery」と「swfobject」を読み込む場合は下記のように記述します。

functions.php or header.php

			wp_enqueue_script('jquery'); 
			wp_enqueue_script('swfobject');

これで、プラグインが外部JSを使用していても、2重に読み込まれることがなくなります。

WordPressのhead要素を整理してみる

静的HTMLだった場合のhead要素

WordPress用のタグに置き換え

6行目

7-8行目

9行目

11-12行目

新たに追加するWPタグ

wp_headによって追加されるタグの削除

外部JSを読み込む場合

関連記事

WordPressでインクルード元のテンプレートから外部CSSやJSを指定する

iPhoneフレームワーク Sencha Touchを使ってみた。

jQueryでWordPressの続きを読むをAjaxで読み込む

WordPressで自作のjQueryスクリプトを実行する方法

iPhoneフレームワーク　Sencha Touchを使ってみた。