ステップ４ フッター
フッター要素はヘッダーほど重要ではないが、視覚的にウェブページの終端になっている。また、著作権その他、すべてのページに必要な情報を置く場所に適している。
では 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 関数の呼び出しだ：
これによりプラグインが独自のデータをここに挿入することができる。
またフッター要素内の次に気づいたことだろう：
<!– と –> に囲まれているのはすべて HTML のコメントで、ブラウザはこれを表示しない。しかし HTML は実行されるので、HTML のコードをのぞいてみると一番最後の方にいくつかの統計情報が埋め込まれているのがわかるだろう。
<!-- 17 queries. 0.187 seconds. -->
これは単に WordPress のデータベースの活動に関する情報だ。この情報をユーザに見えるようにしたいのならこのコメントタグを取り除けばよい。
フッターの変更
今のところフッターは次のようなものだ：
UrbanGiraffe is proudly powered by WordPress Entries (RSS) and Comments (RSS).
ここには好きなものを入れることができる。ここでは著作権の情報をいくつか表示するよう変更してみる。 WordPress のプラグインである WP-CC を使用しているのなら、代わりにこのプラグインの関数呼び出しを入れることもできる。
<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>
ではヘッダーのスタイルと合うようにフッターのスタイルをいくつか変えてみよう。
オプション１ – 全幅のフッター
これは最初のヘッダーオプションにあわせたフッターだ。
{
background-color: #F6C760;
clear: both;
padding: 20px 20px 20px 7.5%;
margin-top: 2em;
height: 3em;
color: #804A0F;
}
特に目新しいことはしていないので説明は不要だろう。全幅のフッターは全幅のヘッダーにマッチする。
オプション２ – コンテンツ幅のフッター
次が２番目のヘッダーオプションにあわせたフッターだ。
{
margin: 2em auto;
clear: both;
text-align: center;
width: 85%;
height: 3em;
color: #804A0F;
padding-top: 10px;
padding-bottom: 10px;
background-color: #F6C760;
}
これも説明は不要だろう。このフッターはヘッダーの幅とマッチしていて、テキストは中央に置かれる。
オプション３ – お洒落なフッター
次が３番目のヘッダーオプションに合わせたフッターだ。
{
clear: both;
margin: 50px 200px 20px 0;
color: #804A0F;
background-color: #F6E4CA;
border: 1px solid #F2D5AC;
padding: 15px;
text-align: right;
}
これには少し味付けをした。タイトルよりも軽い影をつけたのでうまく収まっているだろう。またヘッダーとは逆にオフセットを施し、テキストを右寄せにした。
「WordPress テーマの詳説：第二章」への1件のフィードバック
コメントは停止中です。