【WordPress】新しいウィジェットエリアを作成・追加する方法【コード解説】

今回は、WordPressでウィジェットエリアを新たに作成して追加する方法について解説していきます。

新しいウィジェットエリアを作りたいけど、やり方がわからない・・・

ウィジェットを設置したいけど、ウィジェットエリアがなくて設置できない

使っているテーマのウィジェットエリアが少ない

という方は、本記事が参考になるはずです。

また、記事後半では、WordPressテーマ「SIMPLE」で使用できるウィジェットエリアの一覧を紹介しています。

【WordPress】新しいウィジェットエリアを作成・追加する方法【コード解説】

ウィジェットエリアを作成する具体的な手順は、下記のとおりです。

1. functions.phpにコードを追加して、ウィジェットエリアを登録する
2. ウィジェットを表示させたい場所にコードを追加する

順番に解説していきます。

functions.phpにコードを追加して、ウィジェットエリアを登録する

functions.phpなどのテーマファイルは、WordPress管理画面の「外観→テーマファイルエディター」から編集できます。

functions.phpに追加するコードは、下記の通り。

//新しいウィジェットエリアを登録する

register_sidebar( array(
	'name' => 'サイドバー',
	'id' => 'sidebar',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

↑のコードを追加すると、WordPress管理画面の外観→ウィジェットに「サイドバー」という名前のウィジェットエリアが追加されます。

ウィジェットを表示させたい場所にコードを追加する

新しいウィジェットエリアを追加したら、次はそのウィジェットエリアに設置したウィジェットを、サイトのどこに表示させるか？を決めます。

投稿記事内に設置したいのか、固定ページに設置するのか、トップページに表示したいのかなど・・・ウィジェットをどこに表示したいかによって、編集するファイルは変わってきます。

• 投稿ページ
  →　single.php
• 固定ページ
  →　page.php
• アーカイブページ
  →　archive.php
• 検索ページ
  →　search.php
• 404エラーページ
  →　404.php
• カテゴリーページ
  →　archive.php
• タグページ
  →　archive.php

とはいえ、難しく考える必要はなく、投稿ページにウィジェットを表示したいなら「single.php」を編集すればOKです。

編集するファイルが決まったら、表示させたい位置に下記のコードを追加します。

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
　<?php dynamic_sidebar( 'sidebar' ); ?>
<?php endif; ?>

dynamic_sidebar( ‘sidebar’ );　→この部分にWordPress管理画面で追加したウィジェットが出力される感じになります。

以上になります。本記事を参考にして、ウィジェットエリアを追加してみてください。

テーマ「SIMPLE」のウィジェットエリア一覧

おまけとして、WordPressテーマ「SIMPLE」で使用できるウィジェットエリアの一覧を紹介していこうと思います。

WordPressテーマ「SIMPLE」でウィジェットを表示できる場所は、全部で19箇所あります。

1. サイドバー
2. サイドバー下（広告用）
3. PC用サイドバー下追尾コンテンツ
4. PC用サイドバー下追尾広告
5. ハンバーガーメニュー最上部（広告用）
6. ハンバーガーメニュー最下部（広告用）
7. ハンバーガーメニュー
8. サイトトップページ上部
9. サイトトップページ下部
10. 記事上部
11. 記事アイキャッチ下部（広告用）
12. h2見出しの上（広告用）
13. 記事下部（広告用）
14. 記事下部CTA（広告用）
15. 記事下部
16. 関連記事下部（広告用）
17. フッター左
18. フッター中央
19. フッター右

順番に紹介していきます。

サイドバー

スマートフォンでは記事の下、PC・タブレットでは記事の横に表示されるウィジェットエリアです。

サイドバー下（広告用）

サイドバーウィジェットの下に表示する広告用のエリアです。

PC用サイドバー下追尾コンテンツ

サイドバーウィジェットの下に表示される追尾コンテンツエリアです。ここに設置したウィジェットは、PC表示のとき画面スクロールに合わせて一緒に動きます。

PC用サイドバー下追尾広告

サイドバーウィジェットの下に表示される広告用の追尾コンテンツエリアです。ここに広告を設置すると、PC表示のとき画面スクロールに合わせて広告が動きます。

ハンバーガーメニュー最上部（広告用）

ハンバーガーメニュー最上部に表示される広告用のエリアです。

ハンバーガーメニュー最下部（広告用）

ハンバーガーメニュー最下部に表示される広告用のウィジェットエリアです。

ハンバーガーメニュー

ハンバーガーメニューに表示されるウィジェットエリアです。

サイトトップページ上部

サイトトップページの上部に表示されるウィジェットエリアです。

サイトトップページ下部

サイトトップページの下部に表示されるウィジェットエリアです。

記事上部

記事の上部に表示されるウィジェットエリアです。

記事アイキャッチ下部（広告用）

記事アイキャッチの下に表示される広告用のウィジェットエリアです。

h2見出しの上（広告用）

記事内の最初のh2見出しの上に表示される広告用のウィジェットエリアです。

記事下部（広告用）

記事の下部に表示される広告用のウィジェットエリアです。

記事下部CTA

記事の下部に表示されるCTA用のウィジェットエリアです。

記事下部

記事の下部に表示されるウィジェットエリアです。

関連記事下部（広告用）

関連記事の下に表示される広告用のウィジェットエリアです。

フッター左

スマートフォンではフッター上部、PC、タブレットではフッター左に表示されるウィジェットエリアです。

フッター中央

フッター中央に表示されるウィジェットエリアです。

フッター右

スマートフォンではフッター下部、PC、タブレットではフッター右に表示されるウィジェットエリアです。