1. TOP
  2. ワードプレスのサイドバー(ウィジェット)の編集方法

ワードプレスのサイドバー(ウィジェット)の編集方法

 2017/02/11 Wordpress設定・全般  

ワードプレスを活用していて、サイドバーやフッターのデザイン・配置をどうにかしたいと思うことはありませんか?

サイドバーやフッターは「ウィジェット」呼ばれる機能を使って簡単に編集することができます。

今回の記事ではウィジェット機能を使って、特にサイドバーの編集をする方法をお伝えしていきます。

また、サイドバーに装飾を施すためのプラグインもこの記事の中で紹介しますので、ぜひ最後までご覧ください。

ウィジェットとは?

ところで、ワードプレスにおける「ウィジェット機能」とはどのようなものか?というと、簡単にいうと、

「パズルのようにサイドバーに追加したいピースを埋め合わせていく機能」

だと思ってください。

ウィジェットの機能とは簡単にうと、パズルのようなもの

パズルを手で埋めていくように簡単に「カテゴリ」「新着記事」、「画像リンク」をサイドバーに表示させることができます。

ウィジェット機能を使ったビフォーアフター

他にもあなたが以下のような情報をサイドバーに追加したい場合も簡単に追加することができます。

  • 写真
  • リンク
  • メルマガ登録フォーム
  • ランディングページへの導線
  • 記事の紹介

ウィジェットの編集をする画面はどこ?

では早速ウィジェットの編集画面に移ってみましょう。

ウィジェットの編集画面は「外観」「ウィジェット」をクリックすると出てきます。

ウィジェットの編集画面を選択する

以下のような画面でサイドバーの編集を行なっていきます。

サイドバーの編集画面

ウィジェットを追加する方法

これからサイドバーに様々な情報を追加していきます。

まず、大まかな追加方法ですが、以下の図における「利用できるウィジェット」から「サイドバー」という欄にドラッグ&ドロップでウィジェットを動かします。

ウィジェット機能を使ってみよう

必要なウィジェットを動かします。

ドラッグ&ドロップ

これが基本的なウィジェトの追加方法となります。

ウィジェットの機能や役割については、「利用できるウィジェット」の各ウィジェットの下に記載されているので、そちらを確認してみてください。

タブが閉じている場合

もし以下の図のように、ウィジェットを追加するためのタブが閉じている場合は「▼」をクリックして

タブが閉じているときのウィジェット追加方法

タブを開いてから、上記のウィジェット追加を行いましょう。

タブを開く

ドラッグ&ドロップできない場合

また、何かしらのエラーやバグで仮にドラッグ&ドロップできない場合は、各ウィジェットをクリックします。

すると、以下のような画面になるので、ウィジェットの追加先を選択し「ウィジェットを追加」をクリックしましょう。

ドラッグ&ドロップできない時のウィジェットの追加方法

ウィジェットを編集する方法

次に追加したウィジェットのうち、特に重要な「最近の投稿」「検索」、「カテゴリ」の編集方法、またサイドバーに自由自在に装飾できるプラグインの使い方もお伝えします。

追加したウィジェットは、それぞれの項目をクリックすると編集できます。

ウィジェットの編集方法

カテゴリの編集方法

カテゴリの編集では、記事カテゴリの表示方法を編集することができます。

タイトルにはカテゴリと記載し、

  • ドロップダウン表示
  • 投稿数を表示
  • 階層を表示

それぞれ表示したい項目があれば、チェックを入れます。

カテゴリの編集方法

「保存」を押せば編集完了となります。

※タイトルは空白にしておけば非表示にすることができます。

関連:ワードプレスのカテゴリー設定の方法

関連:カテゴリの順番を並び替えるプラグインの使い方

最近の投稿の編集方法

次に「最近の投稿」の編集方法となります。

ここでもタイトルを記載し、

  • 表示する投稿記事数
  • 投稿日の表示/非表示

を決めたら、「保存」をクリックして、編集完了となります。

最近の投稿の編集方法

※タイトルは空白にしておけば非表示にすることができます。

検索の編集方法

「検索」の編集はいたって簡単です。

タイトルを入力するかどうかだけです。

多くのブログでは検索ボックスにわざわざタイトルを記載しておかなくても、利用方法はわかるので記載していません。

なので、タイトルも空白のままで大丈夫です。

自由自在にデザインしたいときは

最後に自由自在な装飾をサイドバーに施す方法です。

一般的には初期から入っている「テキスト」を活用するのですが、htmlを記述できないと「テキスト」は扱えません。

テキストの編集方法はオススメしないので教えません

そこで当サイトでは、サイドバーに自由なデザインをするために以下のプラグインをインストールすることをお勧めしています。

Black Studio TinyMCE Widget

「Black Studio TinyMCE Widget」というプラグインです。

このプラグインを使うと、簡単にサイドバーに自由なデザインをすることができます。

以下の記事でインストール方法と使用方法をお伝えしているので読んでみてください。

サイドバーを自由自在にデザインできるプラグイン「Black Studio TinyMCE Widget」の使い方

ウィジェットを削除する方法

次にウィジェットを削除する方法です。

不要なウィジェットを削除するには、以下のように適用中の各ウィジェットをクリックし、「削除」を押すだけです。

ウィジェットの削除方法

ウィジェットを一時停止にする方法

今は不要だけど、今後また使うかもしれないウィジェットがもしもあれば、削除するのは勿体無いですよね。

そこで、ウィジェットを削除せずに一時停止する方法があります。

「サイドバー」のウィジェットをページ最下部の「使用停止中のウィジェット」にドラッグ&ドロップするだけです。

ウィジェットの一時停止方法

再利用した時には、ここからウィジェットを追加してください。

まとめ

サイドバーの編集や装飾の方法はたくさんありますが、今回の記事では特に基本的なことをお伝えしました。

もちろん、もっと高度なことをしようと思えばやり方は無数にあるのですが、まずはこの記事の内容をできるようになってみてください。

以下の記事ではサイドバーの中に、より高度な装飾をするための方法を紹介しています。ぜひご覧ください。

サイドバーにFacebookの「いいね!」ボタンとタイムラインを埋め込む方法

サイドバーを自由自在にデザインする方法

サイドバーに人気記事を表示させる方法


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする

関連記事

  • ワードプレスのテーマをインストールする2つの方法

  • ワードプレスの内部SEO対策!劇的な成果を出す「たった7つの設定」

  • ワードプレステーマを変更する方法

  • たった3分でワードプレスのトップ画像(ヘッダー)を設定・変更する方法

  • ワードプレスの固定ページをトップページに設定する方法+注意点

  • プラグインを使ってワードプレスのブログ記事にYoutube動画を埋め込む方法