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

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

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

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

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

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

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

テンプレートファイルの作成（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のサイドバーといえば、ウィジェットとの連動ですよね。最後に、外観 > ウィジェットの設定がサイドバーに反映されるよう実装していきます。実際の手順は以下になります。

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

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

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>',
  ) );
} );