前回、WordPressのindex.phpを分割した。今回最初に行ってほしいのが、2つのタグの追加である。
　

<?php wp_head(); ?>
</head>

<?php wp_footer(); ?>
</body>

　
まず<?php wp_head(); ?>は、以前に記述済みのテンプレートタグ。これは前回「index.php」を分割してできた「header-top.php」内の</head>の直前に配置しなければならない。メタタグの出力、jQueryライブラリの読み込み、WordPressツールバーの表示など自動的にHTMLを読み込むために必要不可欠な要素であり、WordPressでオリジナルテーマを作成するときには、必ず記述するようにしよう。
　
続いて「footer.php」内の </body> の直線に<?php wp_footer(); ?>を置く。これも自動的にHTMLを読み込むために欠かせないものであり、特にサイトログイン時に上部に表示されるツールバーを生成するので、管理画面との行き来には必要となってくる。
　

テンプレートタグを追加しよう

まずは先述した2つのテンプレートタグを追加し、続いて「header-top.php」に基本的なテンプレートタグを追加していこう。

さっそく上記のテンプレートタグを使って、「header-top.php」を書き直してみよう。
　

    <header>
        <h1><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="俺のブログ"></h1>
〜省略〜
    </header>

上のコードは、サイトトップのロゴ画像の部分。まず「alt」が「俺のブログ」となっている所を、サイト名出力のテンプレートタグ<?php bloginfo('name'); ?>に変更する。続いて、画像を「a要素」で囲み、トップページのURLを取得するテンプレートタグ<?php echo home_url('/'); ?>を記述する。また、「h1要素」の下に、「h2要素」を新たに設けて、その中にキャッチフレーズを表示するテンプレートタグ<?php bloginfo('description'); ?>を入れて、スタイルシートで「h2要素」を整える。
　

 	<header> 
		<h1><a href="<?php echo home_url('/'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="<?php bloginfo('name'); ?>"></a></h1>
		<h2><?php bloginfo('description'); ?></h2>
〜省略〜
    </header>

「style.css」の「全デバイス共通のスタイルとスマートフォン向けレイアウト指定」部分の「ヘッダーのスタイル」に下記ハイライト部分を追加。
　

/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align: center;
  margin: 0 auto;
}
header h1 {
  padding: 15px 5px 15px 5px;
}
header h1 img {
  width: 100%;
  height: auto;
  max-width: 200px;
}
header img {
  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: -2px;
}
header h2 {
  margin-bottom: 15px;
}

管理画面の「設定」→「一般」からサイトのタイトルとキャッチフレーズは、いつでも変更可能だ。ディフォルトでは「Just another WordPress site」と表示されているので、自分のサイトに合ったキャッチフレーズにしよう。
　

キャッチフレーズをブラウザのツールバーに表示する

検索エンジンに表示されるサイト名や、ブラウザのツールバー、ブックマークしたときのサイト名の横にキャッチフレーズが記載されているのをよく見かけると思う。例えば当サイトの場合は、「TRIAINA | Web マガジン「トリアイナ」夢あるライフスタイルを」。これはSEOを語る上では非常に重要な部分なので、必ずサイトのキーワードを含んだ言葉にしてほしい。
　

現在作成中のサイト「Mono Press」のキャッチフレーズは「大人の男の定番アイテム」と定める。さっそく管理画面の「設定」→「一般」から変更してみよう。さらに「MY BLOG」という仮のタイトルロゴ画像も変更。これはロゴ画像を差し替えるだけだ。
　

　
管理画面からキャッチフレーズは変更したが、これではまだブラウザのツールバーなどには表示されない。<title>タグ内を変更しなければならないのだ。今から紹介するのは、トップページでは「サイト名 | キャッチフレーズ」と表示して、尚かつ下層ページでは「ページ名 | サイト名」というようにSEOに最適となるコード。下記コード黒枠をマウスオーバーで表示される「ソースを表示」からコピーしよう。
　

<title><?php
  global $page, $paged;
  if (is_search()) : 
    wp_title('', true, 'left');
    echo ' | ';
  else :
    wp_title('|', true, 'right');
  endif;
  bloginfo('name');
  if (is_front_page()) : 
    echo ' | ';
    bloginfo('description');
  endif;
  if ($paged >= 2 || $page >= 2) : 
    echo ' | ' . sprintf('%sページ', max($paged, $page));
  endif;
?></title>

これでタイトル名やキャッチフレーズを管理画面から変更しても何ら問題なく、自動で生成してくれるのだ。
　
最後にフッターのコピーライトのサイト名表示の部分を<?php bloginfo('name'); ?>に変更してサイト名を出力。フッターのタイトルロゴが変更されたので、縦横の大きさを調整して、「alt」内も<?php bloginfo('name'); ?>と記述する。これでトップ画面の基本的なテンプレートタグの記述が完了した。次回はグローバルナビゲーションをWordPress仕様にしていく。
　

<!-- フッター -->
	<footer>
		<img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" width="100" height="auto" alt="<?php bloginfo('name'); ?>">
		<p>Copyright &copy; 2014 <?php bloginfo('name'); ?> All Rights Reserved.</p>
	</footer>

</div><!-- #wrap end -->
<?php wp_footer(); ?>
</body>
</html>

Tweet