【WordPress】サイドバーにウィジェットを設置する方法【コード解説】

2021/06/02 2023/02/11

今回は、WordPressでサイドバーにウィジェットを設置する方法を解説していきます。

【WordPress】サイドバーにウィジェットを設置する方法

1.WordPressの管理画面にログインして「外観 → ウィジェット」に移動

2.「サイドバー」にウィジェットを設置する

これで完了です。👍 pic.twitter.com/eoV28WRC5m

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) December 9, 2022

サイドバーにウィジェットを設置したいけど、やり方がわからない・・・

今使っているテーマがサイドバーに対応していないので、自分で追加したい

という方は、本記事が参考になるかと思います。

Contents

【WordPress】サイドバーにウィジェットを設置する方法【コード解説】

【WordPress】サイドバーにウィジェットを設置する方法【コード解説】

具体的な手順は、下記のとおりです。

sidebar.phpを作る
サイトの各ページに作ったサイドバーを表示させる
サイドバー用のウィジェットエリアを作成する
サイドバーにウィジェットを設置する

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

sidebar.phpを作る

まずは、サイドバーを作っていきます。

やり方としては、「sidebar.php」ファイルを新たに作成して、サイドバーのコードを書いていく感じです。

「sidebar.php」の全コードは、下記のとおりです。

<div>
　<aside id="sidebar" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
　　<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
　　　<?php dynamic_sidebar( 'sidebar' ); ?>
　　<?php endif; ?>
　</aside>
</div>

<?php dynamic_sidebar( ‘sidebar’ ); ?>　→　後ほど説明しますが、ここにWordPress管理画面で設置したウィジェットが出力されます。

「sidebar.php」を作成したら、テーマディレクトリの直下にファイルを入れておきましょう。

ディレクトリ例：simple-wp-theme.com/wp-content/themes/simple/ここに入れる

ファイルのアップロードは、「FileZilla」や「FFFTP」などのFTPソフトを使えばOKです。

FileZilla：https://filezilla-project.org/

FFFTP：　https://forest.watch.impress.co.jp/library/software/ffftp/

サイトの各ページに作ったサイドバーを表示させる

作ったサイドバーを表示させるには、各ページのテンプレートファイルにコードを追加する必要があります。

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

WordPressのテンプレートファイルは、↑のような感じです。

上記のファイルに対して、サイドバーを表示させたいところに↓のコードを追加します。

<?php get_sidebar(); ?>

get_sidebar()は、WordPressの関数で「sidebar.phpを読み込む」というものになります。そのため、この1行を書いたところにサイドバーが表示される・・・という感じになります。

サイドバー用のウィジェットエリアを作成する

ここまでで、サイドバーを作って表示させるところまではできました。

ただ、サイドバーにウィジェットを設置するには、「サイドバー用のウィジェットエリア」を作成する必要があります。

とはいえ、やることは簡単で、テーマディレクトリ直下にある「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管理画面の「外観→ウィジェット」のページに、ウィジェットエリアが追加されます。