サイドバーを自在に操る:sidebar.php の作り方ガイド

sidebar.phpは、検索窓、カテゴリー一覧、最新記事などを表示するエリアです。管理画面の「外観 > ウィジェット」で配置した内容を、テーマ上の好きな場所に反映させる役割を持ちます。

それでは、**「ウィジェット対応のsidebar.phpの作り方」**を記事風にまとめます。


サイドバーを自在に操る:sidebar.php の作り方ガイド

sidebar.phpを作成する最大のメリットは、**「管理画面からドラッグ&ドロップで表示内容を自由に入れ替えられるようになる」**ことです。HTMLを直接書き込むのではなく、WordPressのウィジェット機能を呼び出す形式にするのがプロの作り方です。


1. sidebar.php の基本構造(全体像)

functions.phpで登録したサイドバーを呼び出すための、標準的なコードです。

PHP

<aside id="secondary" class="widget-area">
    <?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
        <ul class="sidebar-list">
            <?php dynamic_sidebar( 'main-sidebar' ); ?>
        </ul>
    <?php else : ?>
        <div class="widget">
            <h2 class="widget-title">サイドバー</h2>
            <p>管理画面からウィジェットを追加してください。</p>
        </div>
    <?php endif; ?>
</aside>

2. 覚えておくべき2つの主要関数

サイドバーの実装には、セットで覚えるべき2つのテンプレートタグがあります。

  • is_active_sidebar( ‘サイドバーID’ ):そのサイドバー(エリア)に、管理画面でウィジェットが一つでも配置されているかどうかを判定します。「中身が空なら、サイドバー自体のHTMLを出力しない」といった制御ができます。
  • dynamic_sidebar( ‘サイドバーID’ ):最重要タグです。 実際に管理画面で設定されたウィジェット(検索、カレンダー、タグクラウドなど)の中身を順番に書き出します。

注意: ここで使う「サイドバーID」は、以前 functions.phpregister_sidebar で設定した id(例:main-sidebar)と完全に一致させる必要があります。


3. 他のファイルからサイドバーを呼び出す

作成した sidebar.php を、記事一覧(index.php)や記事詳細(single.php)で表示させるには、以下の1行を記述します。

PHP

<?php get_sidebar(); ?>

一般的には、コンテンツエリアの直後に配置します。

PHP

<main>
    </main>

<?php get_sidebar(); // ここでsidebar.phpが読み込まれる ?>

4. 複数のサイドバーを使い分ける方法(応用編)

例えば、「ブログ用」と「ショップ用」でサイドバーを分けたい場合は、ファイル名を sidebar-shop.php のように作成し、呼び出す際に名前を指定します。

  • ファイル名:sidebar-shop.php
  • 呼び出し方:<?php get_sidebar( 'shop' ); ?>

このように、用途に合わせて複数のサイドバーを作成することも可能です。


sidebar.php を作る際のポイント

  1. HTML5のセマンティックなタグ:サイドバーは補足的な情報なので、全体を <aside> タグで囲むのがSEOやアクセシビリティの観点から推奨されます。
  2. デザインの柔軟性:functions.php 側の before_widget や before_title で指定したHTMLクラス(例:widget や widget-title)を使ってCSSを当てると、管理画面からどんなウィジェットを追加してもデザインが崩れにくくなります。

次のステップ:フッターと全体の結合

これで「ヘッダー」と「サイドバー」という外枠が整いました!

次は、サイトの締めくくりである footer.php を作り、最後にすべてのパーツを index.php で合体させれば、テーマの骨組みがいよいよ完成します。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人