ウィジェットエリアなサイドバー


いよいよサイドバーです。サイドバーといえばウィジェットエリアなワケですが、こういうのは html じゃどうにもなりません。php な感じの作業になります。ってもコピペですけどね。

まずテーマフォルダ内に functions.php というファイルをつくります。テキストファイルを新規作成して名前変更で OK。ファイルが出来たら中身を

<?php
register_sidebars();
?>

として保存します。先頭と末尾の空行はトラブルの元なので、注意。これでダイナミックサイドバーを使う準備が出来ました。スイッチをオンにした感じです。

次は index.php に戻ってサイドバーの部分を

<div id="side">
<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<!-- ここからウィジェットが有効じゃないときの処理 -->
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
<li id="categories"><h2><?php _e('Categories:'); ?></h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<!-- ここまで -->
<?php endif; ?>
</ul>
</div><!-- side -->

とします。これで管理画面からウィジェットが使えるようになります。

途中のウィジェットが有効じゃないときの処理は、とりあえずページの一覧とカテゴリーの一覧を出力するようにしています。今どきウィジェットが使えないくらい古い WordPress を使うことはないでしょうし、ウィジェットはすぐに設定するでしょうから、がっつり削って

<div id="side">
<ul id="sidebar">
<?php dynamic_sidebar() ?>
</ul>
</div><!-- side -->

でもいいと思うんですが、コンサバにちゃんとやっておきましょう。

サイドバーというかウィジェットエリアは複数設置することが出来ます。もし2つ設置したいときは functions.php の register_sidebars() を register_sidebars(2) にしてテンプレート内の dynamic_sidebar() の どちらかを dynamic_sidebar(2) にします。

さらにサイドバーの区別を数字じゃなくて名前にしたり出力される内容をくくっているタグを変更出来たりもしますので、くわしくはやっぱり Codex をどうぞ。

関数リファレンス/register sidebars – WordPress Codex 日本語版

Function Reference/dynamic sidebar « WordPress Codex(日本語未訳)

あ、あとせっかく(?) functions.php を作ったので

if ( ! isset( $content_width ) )
$content_width = 600;

も追加しておきましょう。数字の部分はメインコンテンツ表示部の幅です。横幅いくつの写真まで大丈夫?ってことです。なので最終的に functions.php の中身は

<?php
register_sidebars(2);
if ( ! isset( $content_width ) )
$content_width = 600;
?>

になりました。あ、サイドバーの数はもちろんお好みで。

次はコメント機能を表示させます。

05widgetsarea


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です