WordPress Customize NOTE > WordPress オリジナルテーマの作り方目次 > ヘッダー部分の作成その2

WordPress オリジナルテーマを作るヘッダー部分の作成2

スポンサードリンク

ブログのタイトルから

ヘッダー部分（上部のこと）の続きです。まずはブログのタイトルから。前回紹介しましたが、ブログのタイトルを表記するには次のテンプレートタグを使います。

Pick up: <?php bloginfo('name'); ?>

「header.php」に、たとえば以下のように追加してみます。あとでわかりやすいように、<div> タグで囲んでおきます。

編集: header.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> …（省略）… <body> <div id="header"> <h1><?php bloginfo('name'); ?></h1> </div>

ここでちょっと設定をいじりたいと思います。左メニューから「ユーザー > あなたのプロフィール」を選んでください。項目の中に「ツールバー」「サイトを見るときにツールバーを表示する」というものがあります。始めからチェックされているのですが、そのチェックをはずしてください。
なぜはずすのかといいますと、前回「header.php」に挿入した <?php wp_head(); ?> というタグには、一部でブログの上部に大きめの空白が入ることがあるのです。デザインをする際に邪魔なるので、嫌な方はチェックを外しておいてください。構わない、またはそうならない方はチェックをしておいて問題ありません。

ちなみに、現在ブログのアドレスにアクセスすると、下の画像のようになっていると思います。

白背景にブログタイトル

ブログへのリンク

ブログのタイトルを、ブログのトップページへ行けるリンクにします。以下のテンプレートタグが、ブログのトップページのアドレスになります。

Pick up: <?php echo home_url(); ?>

以下のように修正します。これで画像のとおりになりました。

編集: header.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> …（省略）… <body> <div id="header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1> </div>

ブラウザのタイトルバーにブログ名表示！

ブログのアドレスが「<例> http://example.com/wordpress/」の場合、<?php echo home_url(); ?> は「http://example.com/wordpress」と出力されます。アドレスの最後に「/ （スラッシュ）」がありません。「http://example.com/wordpress/」のように、最後にスラッシュがあるようにするには <?php echo home_url(/); ?> とします。

ブログの説明文を表示する

ブログのタイトルときたら、次の行にブログの説明文というのが一般的ですね。

Pick up: <?php bloginfo('description'); ?>

このテンプレートタグが、ブログの説明文になります。説明文は「一般設定 > キャッチフレーズ」というところで設定できます。タグを以下のように追加します。

編集: header.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> …（省略）… <body> <div id="header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1> <p><?php bloginfo('description'); ?></p> </div>

これでブログは以下のようになりました（画像）。ブログの説明文を「WordPressをもっと楽しむためのブログです。」と設定したので、そのとおりに置き換えられています。

ブログタイトルと説明文