前回までの記事で、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行目では、複数ページにまたがるようなページの２ページ目以降で、
そのページ番号を表示しているわけです。
SEO 対策的には、ページングされているページでは
HTML タイトルに現在のページ数を入れた方が良いらしいので、
追加で表示するようにしてみました。
すみません、ネタ元のソース忘れました・・・
これで、HTMLタイトルがページごとに切り替わるようになりました。
共通化した部分で表示ページごとに異なる部分を実装したので、
これで気持ちよく次のテンプレート作成に入れそうです。
では、また。
SmartStyle