WordPressのサイドバーを編集・自作する方法【ブロックエディタ編】

この記事で解決できる悩み

サイトのサイドバーをオシャレにしたい
サイドバーに表示すべきコンテンツって何？
サイドバーの表示／非表示を切り替えたい

このような課題をお持ちの方へ。

WordPress 歴6年で3サイトを運営してきた筆者が、サイドバーのカスタマイズ方法を公開します。

この記事の手順をまねするだけで、プロがデザインしたようなおしゃれなサイドバーが完成しますよ。

コスト不要でかんたんに取り入れられるので、ぜひ参考にしてみてください。

1 サイドバーってなに？
2 サイドバーは表示・非表示を切りかえられる
3 サイドバーをカスタマイズしよう
4 サイドバーに設置できるおすすめの８要素
5 サイドバーコンテンツの位置を変える方法
6 ページごとにサイドバーのコンテンツを切り替える方法
7 エラーになる時の対処法
8 おすすめプラグイン
9 QA

サイドバーってなに？

サイドバーとは、ブログやWebサイトの横に設置される縦長のエリアのこと。

見た目のバランスを整えるだけでなく、読者に役立つ情報を補足できる便利なスペースとして活用されています。

たとえば、次のようなコンテンツを自由に配置できます。

検索ボックス
プロフィール
カテゴリ一覧
人気記事や新着記事

これらをうまく取り入れることで、サイトのデザイン性が高まるだけでなく、ユーザの使いやすさ・滞在時間の向上にもつながります。

サイドバーは表示・非表示を切りかえられる

サイドバーは必ず設置しなければい訳ではありません。

なので、サイトの目的やレイアウトの好みに合わせて、「表示する・しない」は自由に選んでOKです！

表示／非表示を切り替える方法は、利用しているWordPressテーマによって異なるので、

「テーマ名サイドバー非表示」「テーマ名サイドバー表示」とかで検索してみてください。

サイドバーの表示・非表示を切り替える方法はこちら！

サイドバーをカスタマイズしよう

WordPressでは、サイドバーに表示する内容を自由に編集・カスタマイズできます。

ここからは、サイドバーにコンテンツを追加する際の手順をお伝えしていきます。

では、さっそく始めていきましょう！

STEP

ウィジェット設定画面を開く

WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。

ウィジェット設定画面が表示されるので、ここでサイドバーをカスタマイズしていきましょう。

ポイント！

ウィジェット設定画面には以下の2種類があり、ご利用の環境によって「いずれかのフォーマット」で表示されます。

この記事では「ブロックウィジェット」形式を前提に、手順を解説していきます。

「クラシックウィジェット」の設定方法については、次の記事で解説しているのでこちらをチェックしてください。

【クラシックウィジェット編】サイドバーのカスタマイズ方法はこちら！

STEP

サイドバーにコンテンツを追加する

ウィジェット設定画面が表示されたら「サイドバーウィジェット※」の＋ボタンをクリックします。

※ WordPress テーマによってウィジェット名が異なります。サイドバーっぽいウィジェットを探してみてください。

「すべて表示」を押すとコンテンツ追加メニューが出てくるので、追加したいブロックパーツを選んで配置します。

今回は例として「検索ボックス」を追加してみます。

以下のように、コンテンツを追加できたらボタンを押して、変更を確定しましょう。

これだけで完了です。

次の章では、サイドバーに設置できるコンテンツや、それぞれの設定方法について解説していきます。

サイドバーに設置できるおすすめの８要素

ここからは、サイドバーにどんなコンテンツを設置できるのか、またそれぞれの基本的な設定方法についてご紹介していきます。

設置できるおすすめコンテンツは、以下の8項目です。

検索ボックス
プロフィール
カテゴリタグ
広告バナー
人気記事
おすすめ記事
新着記事
関連記事
記事の目次
SNS 投稿

それでは、ひとつずつを見ていきましょう。

「検索ボックス」を表示する

検索ボックスを設置すると、読者がブログ内の知りたい情報に素早くアクセスできるようになります。

WordPressの標準機能に備わっているので、以下の手順を見ながら一緒に設定してください。

「プロフィール」を表示する

サイドバーにプロフィールを設置すると、「このブログはどんな人が運営しているのか」が読者に伝わりやすくなります。

運営者の「人柄」や「権威性」が伝わることで、記事への信頼感もアップしますよ。

おしゃれなプロフィール欄をかんたんに設置できる方法をご紹介するので、手順を見ながら一緒にやってみましょう！

「カテゴリタグ」を表示する

「カテゴリー」や「タグ」は、ブログのナビゲーションのような役割があります。

サイドバーに設置することで、読者が自分の知りたい情報にアクセスしやすくなり、サイトの回遊率アップにもつながりますよ。

それでは、さっそく設定方法を見ていきましょう！

「広告バナー」を表示する

ブログのサイドバーは、読者が記事を読んでいるあいだも常に目に入る場所です。

そのため、ここに「広告バナー」を設置することで、クリックされる可能性が高まり収益アップが期待できます。

さらに、記事の流れを妨げることなく自然に表示できるので、読者にとってもストレスが少ない！

「収益性」と「読者の読みやすさ」を両立できる、非常に効果的な要素と言えるでしょう。

では、さっそく設定手順をみていきましょう。

「人気記事」を表示する

あなたのブログの中でも、よく読まれている記事は「内容がわかりやすい」「読者に評価されている」ものが多いはず。

そんな人気記事をサイドバーに表示することで、多くの人に読んでもらいやすくなり、読者の満足度アップや、ブログ全体の評価向上にもつながります。

そこでおすすめなのが「WordPress Popular Posts」プラグイン。

このプラグインは、記事ごとのアクセス数を自動で集計し、人気記事をランキング形式で表示してくれます。

手動での更新や管理が不要なので、初心者の方でも安心して使えますよ。それでは、実際の設定手順を見ていきましょう！

タップして設定手順を見る

STEP

プラグインを追加する

WordPress管理画面にアクセスして「プラグイン」＞「新規プラグインを追加」を選択します。

「WordPress Popular Posts」を検索してインストールしてください。

インストールが終わるとボタンが出てきます。クリックして有効化しましょう。

STEP

プラグインの設定画面を開く

みんさんのブログ環境に合わせて、プラグインを設定していきましょう。

WordPress 左メニューの「設定」＞「WordPress Popular Posts」をクリックしてください。

すると「WordPress Popular Posts」設定画面が表示されます。

「WordPress Popular Posts」の設定については、別の記事にまとめています。

オススメの設定や、各項目の詳細についてわかりやすく解説しているので、あわせてご確認ください。

STEP

ウィジェット設定画面を開く

WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。

STEP

サイドバーにコンテンツを追加する

「サイドバーウィジェット※」の＋ボタンをクリックして「カスタムHTML」を選択します。

※ WordPress テーマによってウィジェット名が異なります。サイドバーっぽいウィジェットを探してみてください。

「カスタムHTML」の入力欄が追加されたら、つぎのコードを入力してください。

HTML コード

もう一度＋ボタンをクリックして「WordPress Popular Posts」を選択します。

STEP

人気記事リストの表示設定

サイドバーウィジェットに「WordPress Popular Posts」コンテンツが追加されます。

ここでもいくつか設定が必要になります。

以下に「おすすめの設定値」を載せいるので、まねして設定してみてください！

おすすめの設定

① Title：ー（空白）
② Limit：５
③ Sort posts by：Total views
④ Time Range：Last 7 days
⑤ Display only posts published within the selected Time Range：チェック
⑥ Post type(s)：post
⑦ Post ID(s) to exclude：ー（空白）
⑧ Author ID(s)：ー（空白）
⑨ カテゴリー (category)：ー（空白）
⑩ タグ (post_tag)：ー（空白）
⑪ Posts settings：Desplay post thumbnail
・Set size manually
・THUMBNAIL WIDTH：75
・THUMBNAIL HEIGHT：75
⑫ Stats Tag settings：チェックなし
⑬ Use custom HTML Markup：チェック
・BEFORE TITLE：<h2>
・AFTER TITLE：</h2>
・BEFORE POPULAR POSTS：<ul class "wpp-list wpp-cards-compact">
・AFTER POPULAR POSTS：</ul>
・POST HTML MARKUO：<li class="{current_class}">{thumb_img}<div class = "wpp-item-data"><div class = "taxonomies"{taxonomy}></div>{title}</div></li>
⑭ Theme：Cards Compact

上記は、過去1週間のアクセス数をもとに、人気記事 TOP5 を表示するものです。もちろん、設定値を変えれば「表示記事数」や「集計期間」など自由にカスタマイズできますよ。

最後にボタンを押して、変更を確定します。

設定したらサイドバーに「人気記事のリスト一覧」が表示されるので、確認してみてください。

「人気記事」の設定方法は以上で完了です！

「おすすめ記事」を表示する

読者を「読んでほしい記事」へと誘導したい場合は「おすすめ記事」を設置すると効果的。

「Content Views」プラグインを活用すれば、表示したい記事を自分で選んでサイドバーに設置できます。

以下の手順をみながら、一緒に設定していきましょう！

タップして設定手順を見る

STEP

プラグインを追加する

WordPress管理画面にアクセスして「プラグイン」＞「新規プラグインを追加」を選択します。

「Content Views」を検索してインストールしてください。

インストールが終わるとボタンが出てきます。クリックして有効化しましょう。

STEP

プラグインの設定画面を開く

つぎは、みなさんの環境に合わせて「Content Views」を設定していきます。

WordPress 左メニューの「Content Views 」＞「Add New」をクリック。

「Content Views 」の設定画面が表示されます。

「おすすめ記事」として表示するページや、表示件数など、ご自身のブログに合わせて自由に設定してみましょう！

なお、推奨の設定や各項目の詳細については、以下の記事でわかりやすく解説しているので、こちらもあわせてご確認ください。

STEP

適用コードをコピーする

設定が完了したら、設定画面の上側に「適用コード」が表示されます。こいつをコピーしてください。

STEP

ウィジェット設定画面を開く

WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。

STEP

サイドバーにコンテンツを追加する

「サイドバーウィジェット※」の＋ボタンをクリックして「カスタムHTML」を選択します。

※ WordPress テーマによってウィジェット名が異なります。サイドバーっぽいウィジェットを探してみてください。

「カスタムHTML」の入力欄が追加されたら、つぎのコードを入力してください。

HTML コード

<div style="border-bottom: solid; font-weight: bold;">おすすめ記事</div>

もう一度＋ボタンをクリックして「カスタムHTML」を選択します。

さきほどの STEP３でコピーした IDを貼り付けてボタンを押します。

サイドバーに「おすすめ記事」が表示されていることを確認してください。

以上で「おすすめ記事」の設置は完了です！

「新着記事」を表示する

最新情報をさりげなくアピールしたい場合は、サイドバーに「新着記事」の一覧をリスト表示すると効果的です。

また、定期的に更新されている印象も与えられるので、「このブログ、ちゃんと動いてるんだな」と信頼感にもつながります。

設定もとってもシンプルなので、ぜひ一緒にやってみましょう！

「目次（もくじ）」を表示する

記事が長くなると、読者は「今どのあたり？」「あとどれくらい続くのかな？」と迷いやすくなってしまいますよね。

そんな時に効果的なのが、サイドバーへの「もくじ（目次）」の設置です。

目次があると、記事全体の流れがパッと見でわかり、読みたい部分にもすぐジャンプできるように！

さらに目次をサイドバーを『固定表示』すると、スクロールしても常に目に入る状態をキープでき、利便性がグッと高まりますよ。

プラグイン「Table of Contents Plus」を使えばすぐに導入できるので、以下の手順をみながらやってみてください。

サイドバーコンテンツの位置を変える方法

ここからは、サイドバー上の「コンテンツ」の配置を入れ替える方法をご紹介します。

STEP

ウィジェット設定画面を開く

WordPress 左メニューから「外観」＞「ウィジェット」を選択してください。

ウィジェットの編集画面が開くので、ここでサイドバーの配置を変更していきます。

移動したいブロックを選択して「移動ボタン」を押してください。

配置を入れ替えたら、ボタンを押して変更を確定しましょう。

これで完了。コンテンツが入れ替わっていることを確認してください。

ページごとにサイドバーのコンテンツを切り替える方法

プロフィールや人気記事など、サイドバーにはさまざまなコンテンツ要素を配置できますが、

「この記事には表示したくない…」「固定ページだけ表示したい！」

といったように、ページごとにウィジェットの表示・非表示を切り替えたい場面もあると思います。

そんなときは「Widget Options」プラグインを活用すると、ページ単位での表示制御が可能になります。

以下の手順を見ながら、一緒に設定してみましょう。

エラーになる時の対処法

＜画像＞
プラグインを追加して、ウィジェットを追加しようとするとエラーメッセージが出てくることがあります。

QA

サイドバーに関するよくある質問をまとめました。
すべて初心者の方が悩みやすいところなので、ぜひ参考にしてください。

サイドバーが表示されない原因はなに？

サイドバーが表示されない主な原因は WordPress テーマの設定を「サイドバー非表示（１カラム表示）」にしていることがほとんど。
サイドバーを表示（２カラム表示）するよう、設定を変更する必要があります。
まずはテーマの設定を確認してください。
※テーマごとに設定の確認方法が異なります。ご利用のテーマのやり方をご参照ください。

check

Affinger で設定する場合
⇒ 参考：https://seashell-spa.com/affinger6-wordpress-scroll/
Cocoon で設定する場合
⇒ 参考：https://kenjineer0224.com/cocoon-sidebar-contents-follow/
SWELL で設定する場合
⇒ 参考：https://swell-theme.com/function/3373/

上記を実施しても問題ない場合は、つぎの原因が考えられます。
１．変更が保存できてない。
⇒ 対処法：「外観＞ウィジェット」でウィジェット編集画面を開き、カスタマイズが反映されているかを確認してください。ウィジェット変更後はかならず「更新」ボタンを押しましょう。
２．HTMLコードが間違っている
⇒ 対処法：カスタマイズに HTMLコードを用いた場合、そのコードが間違っていたら当然コンテンツは表示されません。正しい HTMLコードに修正してください。
３．プラグインが干渉してる
⇒ 対処法：干渉しているプラグインを無効化してください。

サイドバーって必要なの？

結論：サイドバーはあった方が良い
サイドバーの有無がSEO評価に直接的な影響を与えることはありません。
ただ、サイトの「デザイン性」や「回遊率」に対する影響力は大きいので、サイドバーは入れておいた方が無難でしょう。
以下のメリットやデメリットを見てみて、サイドバーを設置するかどうかを判断してください。

サイドバーを設置するメリット