前回は「ブラウザのタイトルバー部分」にブログタイトルを表示しましたが、今回は「ページのヘッダー部分」にブログタイトルなどを表示していきます。
ページトップにブログタイトルを追加
<body>
<h1><?php bloginfo(‘name’); ?></h1>
</body>
前回とほぼ同じような記述ですが、今回はページのヘッダー部分に表示するため、body内に記述しました。
ブログの説明文の追加
初期設定時に入力した「ブログの説明文」をブログタイトルの下に表示してみましょう。
<h1><?php bloginfo(‘name’); ?></h1>
<h2><?php bloginfo(‘description’); ?></h2>
</body>
今回は、h2タグを利用しましたが、pタグなどでも構いません。スタイルシートによって変更するとよいでしょう。
トップページのリンク設定
これは必須ではありませんが、ブログタイトル部分にトップページへのリンクを貼ってみましょう。
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>
この記述を追加したことにより、ブログすべてのページから「トップページ」へ戻ることが可能になります。
ヘッダーをdivでくくる
スタイルシートでデザインしやすくなるよう、ヘッダー部分をdivタグでまとめておきましょう。
<!– ヘッダー部分 –>
<div id=”header”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>
</div>
コメントは必須ではないですが、後日修正しやすいよう、また複数人数での修正の際のため、記述することをお勧めします。