WordPress テーマの詳説:第二章

ステップ4 フッター

フッター要素はヘッダーほど重要ではないが、視覚的にウェブページの終端になっている。また、著作権その他、すべてのページに必要な情報を置く場所に適している。

では footer.php のコードを見てみよう。

<div id=“footer”>
<hr />
<p>
<?php bloginfo(‘name’); ?> is proudly powered by
<a xhref=“http:/.org”>WordPress</a>
<br /><a xhref=“feed:<?php bloginfo(’rss2_url’); ?>”>Entries (RSS)</a>
and <a xhref=“feed:<?php bloginfo(’comments_rss2_url’); ?>”>Comments (RSS)</a>.
<!– <?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. –>
</p>
</div>
</div>

<!– Gorgeous design by Michael Heilemann – http://binarybonsai.com/kubrick/ –>
<?php /* “Just what do you think you’re doing Dave?” */ ?>

<?php do_action(‘wp_footer’); ?>

</body>
</html>

それほど多くのコードがあるわけではない。すべてが footer 要素内に囲まれていて、header.php で始まっている page 要素を閉じる div もある。このフッター要素に続くのは PHP 関数の呼び出しだ:

<?php do_action(‘wp_footer’); ?>

これによりプラグインが独自のデータをここに挿入することができる。

またフッター要素内の次に気づいたことだろう:

<!– <?php echo $wpdb->num_queries; ?> queries. < ?php timer_stop(1); ?> seconds. –>

<!– と –> に囲まれているのはすべて HTML のコメントで、ブラウザはこれを表示しない。しかし HTML は実行されるので、HTML のコードをのぞいてみると一番最後の方にいくつかの統計情報が埋め込まれているのがわかるだろう。

<!-- 17 queries. 0.187 seconds. -->

これは単に WordPress のデータベースの活動に関する情報だ。この情報をユーザに見えるようにしたいのならこのコメントタグを取り除けばよい。

フッターの変更

今のところフッターは次のようなものだ:

UrbanGiraffe is proudly powered by WordPress
Entries (RSS) and Comments (RSS).

ここには好きなものを入れることができる。ここでは著作権の情報をいくつか表示するよう変更してみる。 WordPress のプラグインである WP-CC を使用しているのなら、代わりにこのプラグインの関数呼び出しを入れることもできる。

<div id=“footer”>
<hr />
<p>
<?php bloginfo(‘name’); ?> is proudly powered by
<a xhref=“http:/.org”>WordPress</a>
<br />Copyright © John Godley – <a xhref=“feed:<?php bloginfo(’rss2_url’); ?>”>Entries (RSS)</a>
and <a xhref=“feed:<?php bloginfo(’comments_rss2_url’); ?>”>Comments (RSS)</a>.
</p>
</div>

ではヘッダーのスタイルと合うようにフッターのスタイルをいくつか変えてみよう。

Option オプション1 – 全幅のフッター

これは最初のヘッダーオプションにあわせたフッターだ。

#footer
{
background-color: #F6C760;
clear: both;
padding: 20px 20px 20px 7.5%;
margin-top: 2em;
height: 3em;
color: #804A0F;
}

特に目新しいことはしていないので説明は不要だろう。全幅のフッターは全幅のヘッダーにマッチする。

Option オプション2 – コンテンツ幅のフッター

次が2番目のヘッダーオプションにあわせたフッターだ。

#footer
{
margin: 2em auto;
clear: both;
text-align: center;
width: 85%;
height: 3em;
color: #804A0F;
padding-top: 10px;
padding-bottom: 10px;
background-color: #F6C760;
}

Preview

これも説明は不要だろう。このフッターはヘッダーの幅とマッチしていて、テキストは中央に置かれる。

Option オプション3 – お洒落なフッター

次が3番目のヘッダーオプションに合わせたフッターだ。

#footer
{
clear: both;
margin: 50px 200px 20px 0;
color: #804A0F;
background-color: #F6E4CA;
border: 1px solid #F2D5AC;
padding: 15px;
text-align: right;
}

Preview

これには少し味付けをした。タイトルよりも軽い影をつけたのでうまく収まっているだろう。またヘッダーとは逆にオフセットを施し、テキストを右寄せにした。

「WordPress テーマの詳説:第二章」への1件のフィードバック

コメントは停止中です。