WordPress サイドバーの編集【表示・非表示・設定・活用方法】

WordPressサイドバー編集方法

更新日:2021年6月5日 筆者:鈴木俊雄@smart_plan_tsFacebook

WordPress サイドバーの編集【表示・非表示・設定・活用方法】

要約

WordPressのサイドバー領域へのウィジェット編集方法、および、活用方法について詳しくまとめてあります。

この記事は、

  • WordPressのサイドバーに表示したいけど…
  • WordPressのサイドバー編集方法が分からない
  • WordPressのサイドバーには何を表示すればいいの?

といったような、お悩みや疑問のある、WordPressの初心者の方へ向けて、WordPressのサイドバー編集方法、および、活用方法をまとめました。

この記事を読むことで、

  • WordPressのサイドバー編集方法が分かります。
  • サイドバーに何を表示すれば良いかが分かります。
  • サイドバーを編集して集客力を高める方法が分かります。

サイドバーの編集は、慣れてしまえば、初心者の方でも簡単です。

サイドバーの編集のやり方ですが、ざっくり言えば、

  • WordPressのダッシュボードメニューの「外観」>「ウィジェット」を選択して、
  • サイドバーに表示させたいウィジェットを選択して、
  • あとは必要に応じて編集して〔保存〕して終わり。

これだけです。(概要イメージは下記例を参照)

WordPressサイドバー編集方法の概要

これだけです……とは言っても、最初はよく分からないと思いますので、後ほど、詳しく説明していきます。

参考

WordPressでホームページを作成したけれど、検索結果に自分のホームページが出てこない…。アクセスが無い…。見込み客リストが獲れない…。といったような場合は、下記がおすすめです。

➡︎パソコン苦手でも、アクセス数を3倍5倍10倍にし、毎月安定的に見込み客を増やし続けていける『【無料】ホームページ集客講座(7つの特典つき)※初心者向け

WordPress サイドバーの編集

この記事『WordPress サイドバーの編集【表示・非表示・設定・活用方法】』では、以下の構成で説明を進めていきます。どこから読んでもらっても構いません。

WordPress サイドバーの編集【表示・非表示・設定・活用方法】

  • WordPress サイドバー編集基礎知識
  • WordPress サイドバー編集画面の表示
  • サイドバーを編集する方法(ウィジェットの追加)
  • サイドバーを編集する方法(ウィジェットの設定)
  • サイドバーのウィジェットを並べ替える方法
  • サイドバーのウィジェットを停止する方法
  • サイドバーのウィジェットを削除する方法
  • サイドバーを編集して集客に活かす方法

操作環境について

説明に使用したバージョンや端末環境は下記の通りです。

  • 動作確認日……2021年6月5日
  • WordPressバージョン……5.7.2
  • テーマ……twenty seventeen
  • 端末……iPad Air(2019年11月モデル)
  • ブラウザ……Safari(iPad用)

注)異なる環境の場合は当記事で説明している記載内容と異なる場合があります。

WordPress サイドバー編集基礎知識

まずは、WordPressサイドバー編集の基礎知識として、以下について、簡単に説明しておきます。

  • カラムとは
  • サイドバーとは
  • WordPress ウィジェットとは
  • WordPress ウィジェット一覧
  • テーマやプラグインによる追加ウィジェット

「いやいや知ってるし」という方は、読み飛ばしてください。

カラムとは

カラムの例を図解で説明

カラムとは、ホームページやブログの1ページ表示を縦にいくつ割るかという指定のことです。

  • 1カラム…分割なし
  • 2カラム…2分割(メイン領域1つサブ領域1つ)
  • 3カラム…3分割(メイン領域1つサブ領域2つ)

WordPressテーマにもよりますが、ページ毎にカラム指定は選択できる場合もあります。

メインコンテンツに集中してもらいたいページの場合は、余計な情報を見せないように1カラムにすると反応を高めることができます。

サイドバーとは

サイドバーとは、カラム分割されている場合の、メイン領域の右または左の部分です。

2カラムの場合は、左右どちらかがサイドバー領域となります。その領域が右側であれば右サイドバー、左側であれば左サイドバーとなります。

3カラムの場合は、両サイドがサイドバー領域になります。

1カラム(サイドバーなし)の場合も含めて、イメージ図を下記に載せておきます。

サイドバー無しの図例
サイドバー右の図例
サイドバー左の図例
サイドバー左右両方の図例

スマホ表示の場合はサイド(横)ではなく、メイン領域の次(下)にサイドバーに設定した内容が表示されます。以下のようなイメージです。

スマホでのサイドバー表示イメージ例を図で説明

もし、サイドバーが横のままで、パソコン表示がギューっと縮まってスマホに表示される場合は、かなり古い仕様で作成されたサイトです。修正を検討してください。(下記のイメージ図例を参照)

スマホのサイドバー表示がNGケースのイメージ図例

WordPressのレスポンシブデザイン対応のテーマであれば、何もしなくても、上記のNG表示にはなりません。

WordPress ウィジェットとは

ウィジェットとは、サイドバーに設置できる部品や機能のようなものです。たとえば、リンク付き画像(バナー)や、ブログのカテゴリー一覧や、最近の投稿一覧、などといったような個別の単体機能部品のことです。

WordPress ウィジェット一覧

以下はWordPressデフォルトで用意されているウィジェットの一覧です。

  • RSS……任意のRSS/Atomフィードからのエントリー。
  • アーカイブ……投稿の月別アーカイブ(月別ページへリンク)。
  • カスタHTML……任意のHTMLコード。
  • カテゴリー★……カテゴリーリストやドロップダウン(カテゴリーページへリンク)。
  • カレンダー……サイトの投稿カレンダー(日付別ページへリンク)。
  • ギャラリー……画像ギャラリーを表示します。
  • タグクラウド……よく使用されているタグの表示(タグ別ページへリンク)。
  • テキスト★……任意のテキスト(画像やリンクも可能)。
  • ナビゲーションメニュー……サイドバーにナビゲーションメニューを追加。
  • メタ情報……WordPressログイン画面へのリンクなど。
  • 動画……メディアライブラリ内から、または YouTubeなどからの動画を表示。
  • 固定ページ……サイトの固定ページ一覧。
  • 最近のコメント……このサイトの最近のコメント。
  • 最近の投稿★……このサイトの最近の投稿。
  • 検索★……サイト内検索フォーム。
  • 画像……画像の表示(リンクは貼れない)。
  • 音声……音声プレーヤーを表示。

使うウィジェットは、お好みで良いのですが、あまり、サイドバーをごちゃごちゃさせるのは訪問者にとってマイナスです。

一般的によく使われているウィジェットは太字★印付きのウィジェットです。サイドバーに設定するウィジェットは、必要最低限にしてください。

テーマやプラグインによる追加ウィジェット

WordPressのテーマや追加するプラグインによっては、独自のウィジェットが増えたりする場合があります。

たとえば、今ご覧になっているこのサイトは、WordPressテーマにLightningというテーマを使用しています。同時にLightningテーマとセットの専用プラグインもインストールして有効化しています。

すると、以下のように、ウィジェット設定領域が増え、かつ、設定できるウィジェットも増えます。

サイドバー領域やウィジェットがテーマやプラグインによって増える例

テーマやプラグインによる独自のウィジェットについては、ご自身で使用しているWordPressテーマやプラグインの説明に従ってください。

WordPress サイドバー編集画面の表示

それでは、WordPressのサイドバーの編集の具体的な説明に入っていきます。まずは、WordPressサイドバー編集画面(ウィジェット編集画面)の表示です。

WordPressサイドバー編集画面(ウィジェット編集画面)の表示は、WordPressの管理画面のダッシュボードメニューから「外観」>「ウィジェット」で表示することができます。

WordPress サイドバー編集画面の表示操作例

右側にウィジェットを設定できる領域、左側に利用できるウィジェットが表示されます。

サイドバーを編集する方法(ウィジェットの追加)

ウィジェットをサイドバーに追加するには、左側の「利用できるウィジェット」の中から追加したいものを選択します。(下記の例では“カテゴリー”というウィジェットを選択)

次にウィジェットを追加する領域を選択します。

最後に〔ウィジェットを追加〕を押します。

これで、右側の領域に選択したウィジェットが追加されます。(ドラッグ&ドロップでも追加できます※端末やテーマによってできない場合あり)

※ 右側のウィジェットの設定領域は▼▲で開閉できるようになっています。

サイドバーを編集する方法(ウィジェットの設定)

ウィジェットの中の詳細設定は、ウィジェットによって異なります。ここでは、一般的によく使う、以下のウィジェットについて説明していきます。

  • カテゴリーウィジェット……カテゴリーリストやドロップダウン(カテゴリーページへリンク)。
  • テキストウィジェット……任意のテキスト(画像やリンクも可能)。
  • 最近の投稿ウィジェット……このサイトの最近の投稿。
  • 検索ウィジェット……サイト内検索フォーム。

カテゴリーウィジェットの編集

カテゴリーウィジェットは、訪問者にとってのガイドとなるので、ブログ運営などをしている場合は設定しておいた方が訪問者に親切です。

カテゴリーウィジェットの編集手順

① カテゴリーウィジェットをサイドバーに追加します。

② タイトルを入力します。

③ 望む表示方法にチェックを入れます。

④ 最後に〔保存〕を押します。

カテゴリーウィジェットの編集手順操作例

カテゴリーウィジェットのサイドバー表示イメージ

上記の手順を行った場合のカテゴリーウィジェットのサイドバーへの表示イメージは下記の通りです。

テキストウィジェットの編集後の表示イメージ例

テキストウィジェットの編集

テキストウィジェットはテキスト、画像、リンク、などが設定できるミニ固定ページのようなものです。必要に応じて自由に編集して設定してください。

たとえば、画像を貼って、リンクを設定すればバナー画像がサイドバーに表示されるようになります。

テキストウィジェットの編集手順

① テキストウィジェットをサイドバーに追加します。

② タイトルを入力します。

③ ビジュアルエディタに自由に記述します。

④ 最後に〔保存〕を押します。

テキストウィジェットの編集手順操作例

テキストウィジェットのサイドバー表示イメージ

上記の手順を行った場合のテキストウィジェットのサイドバーへの表示イメージは下記の通りです。

テキストウィジェットをサイドバーに編集した場合の表示例

最近の投稿ウィジェットの編集

更新が止まっているホームページをよく見かけますが、普通に信用度が落ちます。現在活動中の意味も含めて、最近の投稿がわかるようにしておくと良いでしょう。

最近の投稿ウィジェットの編集手順

① 最近の投稿ウィジェットをサイドバーに追加します。

② タイトルを入力します。

③ 表示する投稿数を指定します。

④ 最後に〔保存〕を押します。

最近の投稿ウィジェットの編集手順操作例

最近の投稿ウィジェットのサイドバー表示イメージ

上記の手順を行った場合の最近の投稿ウィジェットのサイドバーへの表示イメージは下記の通りです。

サイドバーに最近の投稿ウィジェットが表示された例

検索ウィジェットの編集

訪問者にとって、サイト内検索ができるのは便利です。PV(ページビュー)の増加にも多少関連してきます。設定しておきましょう。

検索ウィジェットの編集手順

① 検索ウィジェットをサイドバーに追加します。

② タイトルを設定します。

③ 最後に〔保存〕を押します。(タイトルを入れない場合は保存ボタンは有効になりませんが、そのままで大丈夫です。)

検索ウィジェットを編集する手順操作例

検索ウィジェットのサイドバー表示イメージ

上記の手順を行った場合の検索ウィジェットのサイドバーへの表示イメージは下記の通りです。

サイドバーに検索ウィジェットが表示された例

その他ウィジェットの編集

ウィジェットによって、細かい部分は、それぞれ編集内容が異なります。

ですが、仮に編集や設定をミスしても、ウィジェットは簡単に修正・削除できますし、WordPressの運用に致命的な支障が出ることは基本的にはありません。

なので、その他、気になるウィジェットや、他のテーマやプラグインで追加されるウィジェットがあれば、実験や遊び気分で、試してみても大丈夫です。(私もそうやって覚えました)

サイドバーのウィジェットを並べ替える方法

サイドバー上のウィジェットの表示を並べ変えたい場合は、右側の設定領域内で、移動させたいウィジェットをドラッグ&ドロップで移動させるだけです(iPadの場合は長押しして移動)。

サイドバーのウィジェットを並べ替える操作例

注)端末によっては、稀にできない場合もあります(スマホで操作時など)。

サイドバーのウィジェットを停止する方法

サイドバーからウィジェットを外したい場合で、かつ、そのウィジェットの設定内容を保持しておきたい場合は、左下の「使用停止中のウィジェット」にドラッグ&ドロップで移動させるだけです(iPadの場合は長押しして移動)。

サイドバーのウィジェットを停止する操作例

これにより、サイドバーに表示されていたウィジェットは非表示となります。

注)端末によっては、稀にできない場合もあります(スマホで操作時など)。

サイドバーのウィジェットを削除する方法

サイドバーからウィジェットを外したい場合は〔削除〕を選択するだけです。ウィジェットをサイドバー領域から削除すると、一旦、「使用停止中のウィジェット」に入ります。保存が不用な場合はそこで再度削除を行ってください。

サイドバーのウィジェットを削除する手順操作例

サイドバーを編集して集客に活かす方法

サイドバーを集客(=見込み客リストの獲得)に活かすことを考えていきましょう。

シンプルに目立つ

まず、ごちゃごちゃと余計なものはサイドバーに編集しないようにしてください。色々と見せたいのかもしれませんが、逆効果です。

ポータルサイト(たとえばYahooなど)のようなサイトにしたいのなら別ですが、集客目的のホームページやブログといったビジネスサイトではシンプルが一番です。

ごちゃごちゃしたサイドバー編集例

ごちゃごちゃしたサイドバー編集例

基本的には、訪問者が必要としているウィジェットと、あなたがアピールしたい1つか2つ(できれば1つ)の情報のみでサイドバーの構成を考えてください。

見込み客リスト登録ページ(LP)への誘導

見込み客リスト登録用のページ、別名、ランディングページ(LP)とも言われるページは、あなたのホームページやブログ内に用意できていますか?

ホームページやブログの大きな目的の1つは、この見込み客リスト登録ページから見込み客を獲得していくことです。

バナー用の画像を用意しておき、テキストウィジェットを使って、画像+見込み客リスト登録ページへのリンク、および必要に応じて簡単なキャッチコピーや誘導文を指定し、サイドバーに表示させておきましょう。

シンプルに目立つ & LP誘導 を重視したサイドバー編集例

シンプルなサイドバー編集例

メルマガ登録はコチラ……といったような何もメリットが伝わらない誘導はNGです。必ず登録したら得られるベネフィット(利益)が簡単に分かるようにしておいてください。

まとめ(WordPress サイドバーの編集方法)

一度、設定しまえば、あまりサイドバーを編集することはないかもしれません。ですが、最後に説明した見込み客リスト登録ページへの誘導バナーなどは、わりと頻繁に改善する必要があります(一発で反応の取れるバナーにはならないので)。

なので、遊び気分でも良いので、サイドバーの編集には慣れておきましょう。

参考)

本記事では、サイドバーと集客について少し説明しましたが、ホームページやブログから見込み客を集客していきたいという初心者の方は、以下も参考にしてください。

➡︎パソコン苦手でも、アクセス数を3倍5倍10倍にし、毎月安定的に見込み客を増やし続けていける『【無料】ホームページ集客講座(7つの特典つき)※初心者向け』

関連記事

WordPressについて何か分からないことがある場合は、WordPressサポートフォーラムで問題点や質問を検索してみてください。

➡︎WordPressサポートフォーラム

ホームページやブログの全体的な構成については、以下の記事を参考にしてください。

➡︎WEBサイト構成の基本と考え方【初心者向けにサクっと解説!】

➡︎ホームページを構成する各パーツの名称と役割【図解:保存版】

➡︎ホームページ構成図テンプレート【7パターン全てダウンロード可!】

➡︎コーポレートサイトの構成要素と役割【4パターンを解説!】

各種WordPressの編集や設定については、以下からお探しください(妥当な記事が無かったらゴメンなさい)。

➡︎ホームページ自作入門おすすめ記事コンテンツ集