【WordPress】ウィジェットエリアの新規登録と独自サイドバーの挿入方法

2026年10月21日 2026年10月21日

remy_world

この記事は、ウィジェットエリアを新規登録して、WordPressの管理画面からコンテンツを追加・削除など管理できるようにする方法についてのメモ書きです。

よく使われるウィジェットエリアの場所

エリア	使用例
サイドバー	投稿一覧ページや記事ページの横に表示
ヘッダー	ロゴ下やナビゲーションの上などに表示
フッター	複数カラムで情報やリンクを表示
トップページ	home.php に設置して特定のウィジェットを表示

サイドバー作成手順

functions.phpでウィジェットエリアを新規登録する。
例えば、sidebar.phpでdynamic_sidebar()を実行して出力させる。
読み込みたいファイルでget_sidebar()を実行。
sidebar-2.phpならget_sidebar(2)と、複数選択できる。切り替えることも可能。
style.cssでスタイルを整える。
style.cssに書いても良いですが、これはすべてに共通するので、個別にcssファイルを作って、特定のファイルだけに適用する事もできます。

ウィジェットエリアを登録する

functions.phpに以下を追加します。

※)直接書き込むのはWordPress自体が動作しなくなるリスクがあります。
できればプラグイン（Code Snippets 等）をインストールしてご使用ください。

function my_custom_widgets_init() {
    register_sidebar( array(
        // 🔽 ウィジェット管理画面で表示される名前
        'name'          => 'ブログトップ専用サイドバー',
        'id'            => 'home_sidebar',              // 識別用のID名 (重要)
        // 🔽 ウィジェットの設定ボタンを押すと表示されます
        'description'   => 'ブログ一覧ページ（home.php）のサイドバーに表示されます。',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>', //ウィジェットの前後にHTMLを追加
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );

function my_custom_widgets_init() {
    register_sidebar( array(
        // 🔽 ウィジェット管理画面で表示される名前
        'name'          => 'ブログトップ専用サイドバー',
        'id'            => 'home_sidebar',              // 識別用のID名 (重要)
        // 🔽 ウィジェットの設定ボタンを押すと表示されます
        'description'   => 'ブログ一覧ページ（home.php）のサイドバーに表示されます。',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>', //ウィジェットの前後にHTMLを追加
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );

WordPressのregister_sidebar()関数の引数について。

'name'は管理画面に表示される名前です。自分で分かり易い名前を付けてください。
'id'は識別用のID名で、特定のウィジェットだけデザインを変えたり、JavaScriptで制御したりするすることができます。
before_widgetは、ウィジェット全体を囲む開始タグを指定します。%1$sと%2$sをこの記述通りに書いておくことで、WordPressが自動で固有のIDとクラスを割り振ってくれます。
after_widgetは、ウィジェット全体を囲む閉じタグを指定します。

この段階で既にWordPress管理画面から見ることができます。管理画面から「ブログトップ専用サイドバー」の名称で確認できます。

「外観」→「ウィジェット」を開く

ウィジェットの呼び出し方

dynamic_sidebar()を実行

WordPressのdynamic_sidebar()はウィジェットエリアを表示するために使用する関数です。

テンプレートファイルから直接呼び出すこともできますが、ファイルの数が増えるとコードが重複するので、修正が面倒になります。

ここでは、テンプレートファイルからは、get_sidebar()関数でsidebar.phpファイルを呼び出し、sidebar.php ファイルからはdynamic_sidebar()でウィジェット(’home_sidebar')を呼び出すことにします。

テンプレートファイルからsidebar.phpを呼び出す(get_sidebar())

まずはsidebar.phpを作成します。テンプレートファイルから表示させますが、全てのテンプレートファイルに表示させるのでなく、特定のページのみ表示させることもできます。

sidebar.phpのコード例

①フロントページ(home.php or index.php)の時のみウィジェットを出力させる場合

<aside class="widget-area" role="complementary">
    <?php 
         //home.phpの時のみウィジェットを出力
         if(is_home() || is_front_page() ){
         　  // 登録されていれば、ウィジェットを出力
             if(is_active_sidebar( 'home_sidebar' )){
                dynamic_sidebar( 'home_sidebar' );
             }
         }
    ?>
</aside>

<aside class="widget-area" role="complementary">
    <?php 
         //home.phpの時のみウィジェットを出力
         if(is_home() || is_front_page() ){
         　  // 登録されていれば、ウィジェットを出力
             if(is_active_sidebar( 'home_sidebar' )){
                dynamic_sidebar( 'home_sidebar' );
             }
         }
    ?>
</aside>

②特定のカスタム投稿のみウィジェットを出力する場合

<aside class="widget-area" role="complementary">
    <?php 
		// 特定のカスタム投稿の「記事詳細ページ」のみ
        if(is_singular('<投稿タイプスラッグ名>') ){
            // 登録されていれば、ウィジェットを出力
            if(is_active_sidebar( 'home_sidebar' )){
               dynamic_sidebar( 'home_sidebar' );
            }
            
        }
    ?>
</aside>

<aside class="widget-area" role="complementary">
    <?php 
		// 特定のカスタム投稿の「記事詳細ページ」のみ
        if(is_singular('<投稿タイプスラッグ名>') ){
            // 登録されていれば、ウィジェットを出力
            if(is_active_sidebar( 'home_sidebar' )){
               dynamic_sidebar( 'home_sidebar' );
            }
            
        }
    ?>
</aside>

特定のカスタム投稿からウィジェットを出力する場合

投稿タイプスラッグを、「store-notice」としている場合
【WordPress 】初めてのカスタム投稿タイプの実装-2つのブラグインを連携- のページでサイドバー追加した例です。

※)LightningはBootstrapを使っていますので、特に指定しないと、CSSスタイルは、外部に置かれているCSSファイルよりもBootstapが優先されます。

single-store-notice.phpの一部

<div class="site-body">
    <div class="site-body-container container ">
        <div class="row">
            <div class="col-md-8 site-main main-section " id="main">
                <h1><?php the_title(); ?></h1>
                <img src="<?php echo esc_url(get_field('a_image')); ?>" 
                   class="img-fluid" style="margin-bottom: 20px;"><br>
                <h5>題目： <?php  the_field('a_title'); ?></h5>
                <p><?php echo nl2br(get_field('a_details')); ?></p>
            </div>

             <!-- 🔽 boostrapを使っているのでCSSスタイルは外部ファイルよりもこっちが優先 -->
            <aside class="col-md-4 site-sidebar" id="sidebar">
                <?php get_sidebar(); ?>
            </aside>
            
        </div>
	  </div>
</div>

<div class="site-body">
    <div class="site-body-container container ">
        <div class="row">
            <div class="col-md-8 site-main main-section " id="main">
                <h1><?php the_title(); ?></h1>
                <img src="<?php echo esc_url(get_field('a_image')); ?>" 
                   class="img-fluid" style="margin-bottom: 20px;"><br>
                <h5>題目： <?php  the_field('a_title'); ?></h5>
                <p><?php echo nl2br(get_field('a_details')); ?></p>
            </div>

             <!-- 🔽 boostrapを使っているのでCSSスタイルは外部ファイルよりもこっちが優先 -->
            <aside class="col-md-4 site-sidebar" id="sidebar">
                <?php get_sidebar(); ?>
            </aside>
            
        </div>
	  </div>
</div>

外部のCSSファイルでスタイルを整える場合

外部のCSSファイルで記述する場合、style.cssに書いても良いが、これはすべてに共通しますので、個別にcssファイルを作って、自作のウィジェット専用にCSSを適用させたいところです。

そこで、WordPressのwp_enqueue_scriptsアクションフックを使います。functions.phpに関数を定義しこのフックに登録します。

functions.phpに追加するコード

パス指定にget_stylesheet_directory_uri()関数を使用します。これは現在有効化されているアクティブなテーマのディレクトリURLを返します。子テーマを使用している場合は、子テーマのディレクトリURLを返します。

よく似た関数にget_template_directory_uri()があります。これは常に親テーマのディレクトリURLを返します。
子テーマを使っていても、参照先は親テーマになります。

/* 
   フロントページ(home.php or index.php)だけに適用させる場合
*/
function my_home_page_styles() {
    if ( is_home()|| is_front_page() ) {
        // CSSファイルをキューに追加する
        wp_enqueue_style( 
            'home-style', // スタイルシートのユニークなハンドル名
			      get_stylesheet_directory_uri() . '/css/home-style.css',  
            array(), // 依存スタイルシート（なし）
            false // バージョン
        );
    }
}
// 🔽最後にwp_enqueue_scriptsアクションフックに登録する事を忘れないこと!
add_action( 'wp_enqueue_scripts', 'my_home_page_styles' );

/* 
   フロントページ(home.php or index.php)だけに適用させる場合
*/
function my_home_page_styles() {
    if ( is_home()|| is_front_page() ) {
        // CSSファイルをキューに追加する
        wp_enqueue_style( 
            'home-style', // スタイルシートのユニークなハンドル名
			      get_stylesheet_directory_uri() . '/css/home-style.css',  
            array(), // 依存スタイルシート（なし）
            false // バージョン
        );
    }
}
// 🔽最後にwp_enqueue_scriptsアクションフックに登録する事を忘れないこと!
add_action( 'wp_enqueue_scripts', 'my_home_page_styles' );

ここでは子テーマ直下にcssフォルダを作成し、その中にhome-style.cssという名称で作成しています。

if文でフロントページ(home.php or index.php)だけに適用させている例です。

CSSの当て方ですが、どんなタグが使われているか分からなかったので、ソースページの表示からタグ構成を確認しました。

site-body
├── site-body-container
│   ├── main-section
│   ├── widget-area
│

site-body
├── site-body-container
│   ├── main-section
│   ├── widget-area
│

このタグをベースにCSSを当てていきます。

home-style.cssのコード例

メインセクションとウィジェットとの幅領域を3：1に設定した例です。

.site-body-container{
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.main-section{
    flex: 3;
}

.widget-area {
    flex: 1;
    min-width: 180px;
}

.site-body-container{
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.main-section{
    flex: 3;
}

.widget-area {
    flex: 1;
    min-width: 180px;
}

以上です😁

Follow me!

カテゴリー: widget、Wordpress