記事一覧

HTMLタイトルを切り替える

 posted by suzu
テンプレート作成のススメ

前回までの記事で、index.php、header.php、footer.php、
sidebar.php (sidebar-left.php / sidebar-right.php) を作成し、
これらに関してはそれっぽく表示できるようになってきました。
⇒ まだご覧になって頂けていない方は
  カテゴリページ 「テンプレート作成のススメ」 からどうぞ。

今回は、他のページのテンプレートの作成を進める前に、
HTML タイトルの表示部分に少し仕込みを入れたいと思います。

ブログの全ての リクエスト(ページアクセス) の間口 となる index.php では、
HTML タイトルを固定で 「ブログ名」 としていて問題ありませんでした。
ですが、archive.php では、カスタムタクソノミー別、カテゴリ別、タグ別、
作成者別、日付別(年別、月別、日別)、カスタム投稿タイプ別と
様々な一覧ページを表示することになります。
single.php では個別投稿記事を、page.php では固定ページを表示します。
これらのことを考えると、HTML タイトルはページ種別ごとに変えたいですね。

メインコンテンツより上の部分を共通化 (全てのページで利用) できるように、
header.php / footer.php を作成する
で header.php を作成しました。
そこで、header.php の HTML タイトルを表示している部分を
ページ種別ごとに切り替えるように修正します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?></title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
	<div id="container">
		<div id="header">
			<div id="header-image">
<?php if (get_header_image()) : ?>
				<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
			</div>
			<div id="header-text">
				<p class="sitename"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
				<h1 class="descr"><?php bloginfo('description'); ?></h1>
			</div>
		</div>
		<div id="wrapper">
			<div id="side-left">
<?php get_sidebar('left'); ?>
			</div>
			<div id="main">

(修正対象となる) HTML タイトルを表示している部分をハイライト表示しています。

これを以下のように変更します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title>
<?php
if (is_archive()) {
	wp_title('|', true, 'right');
} elseif (is_search()) {
	wp_title('-', true, 'right');
} elseif (is_404()) {
	echo '404 Not Found - ';
}
if (is_front_page()) {
	bloginfo('name');
} elseif (is_single() || is_page()) {
	wp_title('');
} else {
	bloginfo('name');
}
global $page, $paged;
if ($paged >= 2 || $page >= 2) {
	echo '-' . sprintf('%sページ', max($paged, $page));
}
?>
	</title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
	<div id="container">
		<div id="header">
			<div id="header-image">
<?php if (get_header_image()) : ?>
				<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
			</div>
			<div id="header-text">
				<p class="sitename"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
				<h1 class="descr"><?php bloginfo('description'); ?></h1>
			</div>
		</div>
		<div id="wrapper">
			<div id="side-left">
<?php get_sidebar('left'); ?>
			</div>
			<div id="main">

さて、解説します。
まず、8・10・17行目で使用している wp_title は、
各種アーカイブページや投稿ページなど、要求されているページに応じた
ページタイトルを作成してくれます、第二パラメータ は表示をするか
文字列として取得をするかの指定で、true が指定された場合は表示を行い、
false の場合は文字列として返します。(省略可能:デフォルト true)
第一パラメータは区切り文字、第三パラメータは区切り文字の連結場所の
指定になります。(省略可能:デフォルト 空白)
8行目の例では、第一パラメータに ‘|’、第三パラメータに ‘right’ を
指定していますが、この場合は、ページタイトルの右側に 「|」 が連結されます。

6行目の is_archive は、アーカイブページかどうかを返す関数です。
アーカイブページであった場合、7行目で 「[ページタイトル] | 」 を表示しています。
9行目の is_search は、検索結果ページかどうかを返す関数です。
検索結果ページであった場合、10行目で 「[ページタイトル] – 」 を表示しています。
11行目の is_404 は、404ページかどうかを返す関数です。
404ページであった場合、12行目で 「404 Not Found – 」 を表示しています。
ここまでで、最初の if / else ブロックは終わりです。

その後、先に表示したタイトルに連続して表示を行います。
14行目の is_front_page は、フロントページかどうかを返す関数です。
フロントページであった場合、15行目で 「ブログタイトル」 を表示しています。
16行目の is_single は投稿ページかどうかを、is_page は固定ページか
どうかを返す関数です。
これらのページであった場合、17行目で 「ページタイトル」 を表示しています。
フロントページ(投稿ページか固定ページのいずれかではありますが) でも
投稿ページ、固定ページでもなかった場合、
19行目で 「ブログタイトル」 を表示しています。

これで、
アーカイブページの場合は 「アーカイブタイトル | ブログタイトル」、
検索結果ページの場合は 「検索タイトル – ブログタイトル」、
404ページの場合は 「404 Not Found – ブログタイトル」、
フロントページの場合は 「ブログタイトル」、
投稿ページや固定ページの場合は 「記事タイトル」、
その他は「ブログタイトル」
が HTML として出力されるわけです。

21行目の グローバル変数の内容を説明します。
アーカイブページ等の一覧ページの場合、
$paged に現在表示中のページ番号が入ります。
投稿・固定ページの (ページングがあるような) 場合、
$page に現在表示中のページ番号が入ります。
23行目では、複数ページにまたがるようなページの2ページ目以降で、
そのページ番号を表示しているわけです。
SEO 対策的には、ページングされているページでは
HTML タイトルに現在のページ数を入れた方が良いらしいので、
追加で表示するようにしてみました。
すみません、ネタ元のソース忘れました・・・
 

これで、HTMLタイトルがページごとに切り替わるようになりました。
共通化した部分で表示ページごとに異なる部分を実装したので、
これで気持ちよく次のテンプレート作成に入れそうです。
では、また。

関連記事

eyecatch_template

カスタム背景を使用する

前の記事までのシリーズ 「カスタムヘッダーを表示する – [1]」 ...

記事を読む

eyecatch_template

不要なヘッダーを除去する

今回は不要なヘッダーを除去してみます。 またまた時間が空いてしまってすみません・...

記事を読む

eyecatch_template

コピーライトを表示する

今回は footer 領域にコピーライトを表示してみます。 特にどうっていうこと...

記事を読む

カレンダー

2024年3月
« 7月    
 12
3456789
10111213141516
17181920212223
24252627282930
31  
PAGE TOP ↑