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

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

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

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

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

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

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

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

サイドバーってなに？

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

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

サイドバーには、以下のようなコンテンツを自由に設定できますよ。

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

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

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

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

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

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

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

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

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

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

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

STEP

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

WordPress 管理画面を開いて「外観」＞「ウィジェット」をクリックします。

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

ポイント！

ウィジェット設定画面には以下の2種類があり、使っているWordPressのバージョンやテーマによって、いずれかの形式で表示されます。

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

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

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

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」プラグインを活用すると、ページ単位での表示制御が可能になります。

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

エラーになる時の対処法

プラグインを追加して、ウィジェットを設定しようとすると

「‥‥」ブロッエラーの影響を受けており、正しく機能しない可能性があります。

といったエラーメッセージが出てくることがあります。

このエラーは、追加したプラグインが「ブロックウィジェット」に対応していないことが主な原因です。

WordPressのバージョンアップによって、ウィジェットの仕様が「クラシックウィジェット」から「ブロックジェット」へと変更したんですが、まだ新しい形式のウィジェットに対応できんていなプラグインが多いのが実態なんですよね…

ウィジェットがちゃんと動作すればそのままでも問題ありませんが、エラーメッセージが気になる場合や不安な場合は、「クラシックウィジェット」に戻すのがおすすめです。

無料のプラグイン「Classic Widgets」をインストールすることで、簡単にクラシック形式へ切り替えられますよ。

クラシックウィジットへの変換手順

WordPress 管理画面にログインする
メニューから「プラグイン＞新規プラグインを追加」をクリック
プラグイン追加画面で「Classic Widgets」を検索
「Classic Widgets」をインストール＆有効化

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

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

【補足】おしゃれなサイトに共通する3つの特徴

サイドバーだけでなく、サイト全体のデザインの完成度を高めたいですよね。

実は、おしゃれなブログサイトには共通する3つのポイントがあります。

色彩・デザインに統一感がある
デザインがシンプルで見やすい
画像やイラストがおしゃれ

これらを意識するだけで、初心者でも簡単に“おしゃれなブログ”を作れますよ。

特別なデザインスキルがなくても、ちょっとした工夫で見栄えはグッと良くなります。

もっと詳しいテクニックや具体的なデザインのコツは、下記の記事で紹介しています。

「おしゃれなサイトを作りたい！」という方は、ぜひチェックしてみてください。

おしゃれなブログを作るための16個の法則はこちら！

QA

最後にサイドバーに関するよくある質問をまとめました。

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

Ａ一番多い原因は、WordPressテーマの設定によるものです。。

多くのテーマでは、ページのレイアウトを以下のように切り替えられるようになっています。

1カラム（サイドバーなし）
2カラム（サイドバーあり）

サイドバーを表示したい場合は「2カラム」に設定する必要しなければいけません。

テーマによって設定方法が異なるので「テーマ名サイドバー非表示」「テーマ名サイドバー表示」とかで検索して確認してみてください。

テーマの設定を変更してもサイドバーが表示されない場合、次のような原因が考えられます。

問題	対処法
プラグインの干渉	他のプラグインが影響してサイドバーが正しく表示されないことがあります。一度プラグインを停止して、表示が改善されるか確認してみましょう。
変更が保存されていない	ウィジェットを編集したあと「保存」ボタンを押し忘れると反映されません。変更後はかならず保存するようにしましょう。
HTMLコードのミス	ウィジェットでHTMLを使ってカスタマイズしている場合、タグの閉じ忘れやスペルミスがあると正しく表示されません。コードに誤りがないかチェックしてみてください。

Ｑサイドバーは絶対に必要なんですか？+

Ａ絶対に必要というわけではありませんが、設置することで得られるメリットは多いです。

サイドバーの有無が、SEO（検索エンジンの評価）に直接影響することは基本的にありません。

ですが、ブログ全体のデザイン性や、回遊率を高めるためにサイドバーを活用したほうが効果的です。

〇：サイドバーのメリット

「広告」を設置でき、収益アップにつながりやすい
「おすすめ記事」を設置すると、他の記事を読んでもらいやすい
サイト全体のデザイン性が高まる

×：サイドバーのデメリット

初めての場合は設置に手間がかかる
スマホで表示したときに、本文下に回り込んで表示されてしまう
サイドバーのデザインが悪いとサイト全体が低品質に見えてしまう

Ｑサイドバーには何を表示するべき？+

Ａ表示するべきコンテンツは何を重視するかによって変わります。

サイドバーに表示する内容には、それぞれ目的や役割があります。

自分が何を重視したいのかを考えながら、最適なコンテンツを選んでください。

重視したいポイント	おすすめのコンテンツ
マネタイズを強化したい	バナー広告、宣伝広告、収益記事への導線
特定の記事へ誘導したい	おすすめ記事、特集記事リンク、ランキング
回遊率を高めたい	関連記事、最近の投稿、カテゴリ、タグ一覧
使いやすさを向上させたい	検索ボックス、目次、人気記事、お問い合わせのリンク
信頼性や権威性を高めたい	プロフィール、SNSの投稿、SNSへのリンク