ヘッダー header.phpのカスタマイズ

Category: 初心者向け WordPress講座 Tags: header.php, テーマ・テンプレート

ここではヘッダー部分に関連するheader.phpのカスタマイズについて説明しています。

sidebar.phpやsingle.phpと同じく、カテゴリーごとのheader.phpの切り替えが可能なので、ぜひ基本をマスターして下さい。

§ もくじ

1. メニューのカスタマイズ
2. カテゴリーごとにヘッダー画像を切り替える
3. タイトル設定
4. ファビコンの設置

§ メニューのカスタマイズ

一般的に、ヘッダーに設置された『メニュー』は、「固定ページ」のリストとして表示されることが多いです。

もちろん、「固定ページ」以外にも、自分が表示したい記事やインデックスのリンクを置くこともできます。

プロフィール、コンタクトフォームなど、「固定ページ」のリストとして表示したい場合、使用するテンプレートタグは次の通り。

参照サイト：テンプレートタグ wp list pages

<?php wp_list_pages('sort_column=post_date&include=3,5,7&title_li=' ); ?>

たとえば、ページID 3,5,7の固定ページを、見出しタイトル抜きで、作成日順に並べる場合。

 <?php wp_list_pages('sort_column=post_date&include=3,5,7&title_li=' ); ?>

メニューに強調したいアイテムを表示させることもできます。

たとえば、『sunshine』のデフォルトは次の通りですが、下段のように書き換えれば、固定ページ以外のリンクを表示することができます。

デフォルトのコード

テンプレートタグ list_page に加えて、表示したいリンクを「li」として挿入

実例

【メニュー】をカテゴリーリストとして表示したい場合は、wp_list_categorie のテンプレートタグを使います。

実例

トップのメニューは目に付きやすいので、強調したいアイテムを表示するといいですね。

いろいろ組み合わせて分かりやすいナビゲーションを作成して下さい♪

§ カテゴリーごとにヘッダー画像を切り替える

カテゴリーごとにヘッダー画像を切り替える方法は２通りあります。

1つは、複数のheader.phpを作成し、include構文を使って、カテゴリーごとに異なるheader.phpを読み込ませる。

もう1つは、スタイルシートに手を加え、カテゴリーIDに応じて異なるヘッダー画像を読み込む方法です。

どちらも煩わしさは同じですが、あえて言うなら、前者の方が簡単です。

include構文を使う方法

まず、デザインの異なるheader_sample.phpを作成します。

次に、テンプレート・ファイルの ヘッダー get_header(); を呼び出している部分に、include構文を記入します。

カテゴリーID3と7の記事についてヘッダーを変えたい場合。

実例：　defaultテーマの青いヘッダーがアヒルさんになりました。

スタイルシートをアレンジする方法

まず、ヘッダーの画像を指定している部分を次のように書き換えます。

<?php if(is_single() ) : ?>
<div id="Header-<?php $cat = get_the_category(); $cat = $cat[0]; {
echo "$cat->cat_ID" ;
} ?>" role="banner"><?php endif; ?>

次に、ヘッダーを変えたいカテゴリーIDに関するスタイルシートを書き換えます。
たとえば、カテゴリーID3,5について異なるヘッダー画像を読み込みたい場合、

つまり、id=”Header-○○”の部分で自動的にカテゴリーIDを取得し、スタイルシートに反映させるわけですね。

使用するテーマ・テンプレートによってdivタグの設定の仕方が異なるので、これはあくまで一例に過ぎませんが、ヘッダーのデザインを読み込んでいる部分をアレンジすることで、画像、フォント、背景色などを、自在にカスタマイズすることが出来ます。

ただ、スタイルシートを応用するにしても、include構文を読み込むにしても、あまりにカスタマイズし過ぎると、header.phpが何重にも増えたり、CSSファイルが長くなってしまいますので、ちょこっと取り入れるのがコツかと思います。
（あまりにデザインを変えすぎるのも、ユーザビリティによろしくないので）

§ タイトルの設定

サイト名および各記事のタイトルは、SEO対策においても非常に重要な位置を占めますので、ユーザーに分かりやすく、なおかつ、検索エンジンに強いタイトルを設定しましょう。

この部分↓

SEO対策に関する超有名プラグイン、『All in One SEO Pack』でもタイトル設定を細かくカスタマイズすることが出来ますが、header.phpで設定することも可能です。

[head]～[/head]内、metaタグの後に記述します（一例）

<?php
echo '	<title>';
if ( is_home() ) {
	// トップページのタイトル
	echo get_bloginfo('name') . '  » '; bloginfo('description') ;
} elseif ( is_single() or is_page() ) {
	// シングル記事およびページのタイトル
	wp_title(''); echo ' - ' . get_bloginfo('name');
} elseif ( is_category() ) {
	// アーカイブ、カテゴリーのタイトル
	echo get_bloginfo('name') . ' »  '; single_cat_title();
} elseif ( is_day() ) {
	// 日別アーカイブのタイトル
	echo get_bloginfo('name') . ' » ' . get_the_time('d') . '. ' . get_the_time('F') . ' ' . get_the_time('Y');
} elseif ( is_month() ) {
	// 月別アーカイブのタイトル
	echo get_bloginfo('name') . ' » ' . get_the_time('F') . ' ' . get_the_time('Y');
} elseif ( is_year() ) {
	// 年別アーカイブのタイトル
	echo get_bloginfo('name') . ' » ' . get_the_time('Y');
} elseif ( is_search() ) {
	// サイト内検索に対するタイトル
	echo get_bloginfo('name') . ' » ‹' . wp_specialchars($s, 1) . '›';
} elseif ( is_404() ) {
	// 404エラーページでのタイトル
	echo get_bloginfo('name') . '  » 404 - ERROR';
} else {
	// その他
	bloginfo('name'); wp_title();
}
echo '</title>';
?>

header.phpに記述しない場合は、『All in One SEO Pack』の管理画面から設定すると便利です。

§ ファビコンの設置

ファビコン(.icoファイル)を表示したい場合は、次のlinkコードを記述します。

<link rel="shortcut icon" type="image/ico" href="○○.ico" />

ファビコンをテンプレート・ファイルと同じディレクトリに置く場合は、hrefのリンク先を次のように記述すると簡単です。

href="<?php bloginfo('template_url'); ?>/○○.ico"

header.phpには、サイト内検索のSearch boxや、RSSフィードのアイコンなどが盛り込まれていることがあります。

ぱっと目につく部分ですので、いろいろ工夫を凝らして、サイトの魅力をアピールして下さいね。

オマケ

WordPress2.8のリリースに伴い、テーマ・テンプレートも一段とハイセンスなものが出てきました。

こちらに「ベストテーマ　TOP45」としてたくさん紹介されていますので、ぜひご覧下さい。

http://www.blogperfume.com/45-best-free-wordpress-themes-of-all-time/

ちなみに、私の大好きな「Branford Magazine Style」の最新版がリリースされています。（このサイトもBranfordで作成しています）

http://www.wp-themes.der-prinz.com/magazine/

このテーマも、一見、何も無いような感じですが、すべてがスタイルシートで組まれているので、非常にカスタマイズしやすく、背景画像やタイトルロゴ、色調はもちろん、コラムの横幅なんかも簡単に変えることができます。

中身のコードもすっきり、美しく書かれているので、初心者にも分かりやすいですよ。

興味のある方は、ぜひトライして下さいね。

Ads

ユーティリティ、動画編集、パソコン快適化など人気のソフトウェアが大幅割引中。