ブログやメディアサイトでよく見るのがサイドバーですよね。当サイトもメインエリアの右側にCVやサイト内回遊を促進させるためのコンテンツをいくつか設置しています。

WordPressの場合は、このサイドバーに外観 > ウィジェットの各アイテムを表示させるのが一般的なんですよね。当記事では、ウィジェットを反映できるサイドバーの自作方法を3つのステップでご紹介します。

WordPressでサイドバーを自作する方法（3ステップ）

一般的なWordPressのサイドバーの実装は、以下の3ステップで実現可能です。（最低限のテーマフォルダを作成していることが前提です。）

  1. テンプレートファイルの作成（sidebar.php）
  2. 作成したサイドバー用ファイルを呼び出す
  3. ウィジェットをサイドバーに反映

    それでは順番にみていきましょう。

    テンプレートファイルの作成（sidebar.php）

    まずは、サイドバーに表示するコンテンツを記入するためのファイルを用意します。テーマフォルダの「index.php」と同じ階層に「sidebar.php」という名称のファイルを作成して設置します。

    サイドバー用ファイルの設置

    このファイルは、サイドバーに使う基本的なテンプレートファイルの1つになります。なお、複数のサイドバー用にファイルを使い分けたい方は、「sidebar-〇〇.php」という名称で作成してください。（例：sidebar-primary.php）

    次の手順でサイドバーが読み込まれたことを分かりやすくするために「sidebar.php」に以下を記入しておきましょう。

    <?php echo 'これはサイドバーです。'; ?>

    作成したサイドバー用ファイルを呼び出す

    次は、作成したサイドバーのテンプレートファイルを呼び出します。「sidebar.php」を読み込むためには、get_sidebar()を利用します。試しに以下を「index.php」のどこかに記入してみてください。

    <?php get_sidebar(); ?>
    get_sidebar() | Function | WordPress Developer Resources

    サイト上に「これはサイドバーです。」の文言が表示されるようになっていれば成功です。

    なお、「sidebar-〇〇.php」ファイルを呼び出すときは、引数に〇〇部分を指定してください。例えば、「sidebar-primary.php」を読み込むときは、以下の書き方になります。

    <?php get_sidebar( 'primary' ); ?>

    サイドバーにウィジェットを反映させる必要がなければ、ここまでの手順で問題ありません。そのときは「sidebar.php」に表示したいコンテンツを直接書き込みましょう。

    ウィジェットをサイドバーに反映

    WordPressのサイドバーといえば、ウィジェットとの連動ですよね。最後に、外観 > ウィジェットの設定がサイドバーに反映されるよう実装していきます。実際の手順は以下になります。

    1. 管理画面のウィジェットエリアを登録
    2. register_sidebar()のパラメータを調節
    3. ウィジェットエリアの出力

    この具体的な手順は、以下の記事で詳しく解説してますので、参考に作っていただければ反映されるようになるはずです。

    2023.12.04

    WordPressでウィジェットエリアを追加・表示する方法（4ステップで解説）

    WordPress のサイドバーは、外観 > ウィジェットから様々なアイテムを追加してサイト上に表示するのが一般的です。今回ご紹介するのは、以下のウィジェットエリアを追加する方法です。 WordPress5.8以降 WordPress5.8以前 当...

    最終的なサイドバーの形は？

    ここまでWordPressでサイドバーを自作する手順をご紹介しました。これらの手順を踏んだ場合に、どのテンプレートファイルにどう記述するのか気になりますよね。

    以下に最終的なファイルとそれに応じた記述を紹介してますので、参考にしていただれば幸いです。

    index.php：サイドバーを呼び出して表示する

    <?php
// index.phpのお好きな場所に以下を記載
get_sidebar();
?>

    sidebar.php：ウィジェットエリアの出力を行う

    <?php
// ウィジェットエリアの呼び出し
dynamic_sidebar( 'my-widget' );
?>

    functions.php：ウィジェットエリアを登録する

    <?php
// ウィジェットエリアの登録
add_action( 'widgets_init', function(){
  register_sidebar( array(
    'name' => 'ウィジェットエリアの名前',
    'id' => 'my-widget',
    'description' => 'ウィジェットエリアの説明',
    'before_widget' => '<div id="%1$s" class="my-widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="my-widget-title">',
    'after_title' => '</h3>',
  ) );
} );

    まとめ

    今回は、WordPressでサイドバーを自作する方法について解説しました。当記事で紹介した内容をベースにカスタマイズしていけば、大抵のコンテンツには対応できるはずです。

    サイドバー実装後に気になるのは、どんなコンテンツを設置するか？ですよね。以下にサイドバーに設置するオススメのコンテンツをご紹介してますので、ぜひご覧ください。

    2021.06.28

    2021.07.06

    ブログのサイドバーに載せるべきコンテンツとは？ オススメ例を紹介

    ブログのサイドバーに載せるべきコンテンツ例をご紹介します。 「何を載せればいいのか・・・？」と悩むかもしれませんが、サイドバーに掲載するコンテンツの種類は限られています。また、注意すべきポイントも非常に単純で、難しくはありません。 サイドバーのセオリーを理解して実践すれば、ブログのPV（...