WordPress ウィジェットの追加と編集方法

20160510-184
  • このエントリーをはてなブックマークに追加

WordPressのテーマをインストールしたら、次にやっておきたいのがウィジェットの設定だ。

ウィジェットの設定方法をマスターすると、サイトのサイドバーやフッターなどの要素をかなり自由に変更することができるようになる。

そこで、ここでは、ウィジェットの

  • 追加
  • 編集
  • 並び替え
  • 停止
  • 削除

の方法を分かりやすく解説する。また、最後におススメのウィジェットと、それらの設定方法もご紹介するので最後までしっかりと読んで欲しい。


このページでは、WordPress のデフォルトテーマの一つ ” Twenty Twelve “を例として解説する。テンプレートによって編集できる領域の数や種類は使用するテンプレートによって異なるが操作方法は全て同じなので安心して読み進めて欲しい。

1.WordPress ウィジェットとは

ウィジェットとは、主にサイトのサイドバーを簡単に編集できる便利な機能のことだ。

例えば、WordPress をインストールしたばかりの状態では、サイドバーはシンプルなものになっているが、ウィジェットを編集すると、人気記事一覧を表示したり、 Facebook の LikeBox を追加したり、カテゴリーを表示したりなどサイドバーの表示を自由に変更することができる。

wordpress-widget-setting-110

このように、ウィジェットを使うと、初心者の方でも思い通りのサイドバーを簡単に作ることができるようになる。

テンプレートによって異なるが、ウィジェットで編集できるのはサイドバーだけではない。フッターや記事下のCTAもウィジェットで設定できるようになっているテンプレートもある。中には10種類以上のボックスがあるテンプレートなどもあるし、php の知識があればオリジナルのウィジェットエリアを作成したりもできる。

ここでご紹介するウィジェットの基本操作を抑えておけば、どのようなテンプレートでも設定できるようになる。

それでは早速ウィジェットの設定方法を覚えていこう。  

2.ウィジェットの設定画面へアクセス方法

まずは、ウィジェットの設定画面にアクセスしよう。

WordPress の管理画面の左メニューから「外観 → ウィジェット」とクリックするとアクセスすることができる。

wordpress-widget-setting-3

ご覧のように、 Twenty Twelve には、メインサイドバーとフロントページウィジェットエリア二種の計3つのボックスが存在する。

wordpress-widget-setting-61

メインサイドバーはブログのサイドバーを編集するもので、フロントページウィジェットエリア1&2は固定ページをフロントページに指定した時にサイト下部のメニューを充実させたい場合に使用するものだ。

ここではメインサイドバーを例に解説していく。後者の2つに関しては、『固定ページをフロントページに指定してサイト型表示にする方法』で詳しく解説しているので確認して欲しい。

3.ウィジェットの追加方法

それでは早速ウィジェットを追加していこう。

ウィジェットを追加するには、左側の「利用できるウィジェット」の中から表示したいものを選んで、右側のボックスの中に、ドラッグ & ドロップすればよい。

wordpress-widget-setting-4

ウィジェットを任意のボックスにドラッグ & ドロップをすると、そのウィジェットが追加され編集ができるようになる。(※編集方法に関しては後述。)

wordpress-widget-setting-5

ウィジェットの追加はこれだけだが、いくつか注意点をご紹介するのでご説明しておこう。

3−1.ボックスが閉じている場合の対処法

ウィジェットを追加する際に、図のようにボックスが閉じている場合がある。

wordpress-widget-setting-72

その時は、ボックスの右側の▼ボタンをクリックすれば下図のようにボックスが開く。

wordpress-widget-setting-81

ウィジェットの追加は、このように該当するボックスを開いてから行おう。

3−2.ドラッグ & ドロップができない場合の対処法

ごく稀にドラッグ&ドロップができないという方もいる。その場合は、WordPresss 公式サイトの『問題解決のためのチェックリスト』の中のトラブルシューティングの基本に書かれている部分を確認してみよう。

どうしても解決しない場合は、ドラッグ & ドロップ以外の方法でウィジェットを追加することもできる。追加したいウィジェットをクリックして、追加したいボックスを選び、「ウィジェットを追加」をクリックしよう。

wordpress-widget-setting-21

しかし、ドラッグ & ドロップができないと後述するウィジェットの並び替えが出来ないなど、何かと不便なので必ず解決しておこう。

3−3.デフォルトで設定できるウィジェットに関して

デフォルトで利用できるウィジェットの詳細は以下の表にまとめたので確認しておこう。

◎ と ○ のついているものは必須のウィジェットだと言える。△ は人によっては使うが必須ではない。× に関しては使い勝手が悪く、それがあることによってユーザビリティが改善されるものではないので使う機会はほぼないと言ってよいだろう。

ウィジェット名 機能
× RSS RSSリーダーを使用しているユーザー向けのウィジェット。記事のタイトルリンクだけでなく、記事作成者や概要も表示できる。
△ アーカイブ 過去に公開した記事を月別で一覧表示できる。
△ カスタムメニュー 管理画面の「外観 → メニュー」で作成したオリジナルのリンク一覧が表示できる。
△ カテゴリー コンテンツのカテゴリー一覧のリンクが表示できる。
× カレンダー コンテンツを公開した日にちのリンクがカレンダーで表示できる。
× タグクラウド タグを設定したコンテンツのリンクを表示できる。タグの使用頻度が高いと文字フォントが大きい。
× メタ情報 管理画面のログインやWordPress公式サイトのリンクなどサイト管理者ようのリンクが表示できる。
テキスト 一番使用頻度の高いウィジェット。FacebookのLikeBoxの設置やソーシャルボタンのバナー設置などで使用できる。
△ 固定ページ 固定ページ一覧のリンクが表示できる。
△ 最近のコメント 直近でユーザーのコメントが投稿された記事の一覧のリンクが表示できる。
最近の投稿 直近に公開したコンテンツのリンクを表示できる。
検索 コンテンツをキーワードで検索できる。記事数が多いサイトで利用すると活用する。

操作になれるためにも、ぜひ一通り試してみて欲しい。

4.ウィジェットの編集方法

ウィジェットを追加したら、そのウィジェットを編集していこう。

ウィジェットを編集するには、まず編集したいウィジェットを選んで、右側の三角ボタンをクリックしよう。

wordpress-widget-setting-10

そして、下図のように所定の項目を入力した後に「保存」をクリックしよう。

wordpress-widget-setting-111

これで設定が反映されるので実際の表示を確認しよう。

wordpress-widget-setting-12

なお、編集する項目はウィジェットメニューによって異なる。ここでは代表的な、

  • テキストウィジェット
  • 検索ウィジェット
  • 最近の投稿ウィジェット

の3つを解説しておく。他のウィジェットも似たようなもので、この3つを抑えておけば、問題なく設定できるようになるので安心して欲しい。

4−1.テキストウィジェットの編集

テキストウィジェットは非常に良く使うものなので使いこなせるようになっておこう。上の例でもお見せしているが、テキストウィジェットの設定項目は下図の2つだけだ。

wordpress-widget-setting-13

タイトルを入力して、その下の入力欄には表示したい内容を HTML で書き込もう。

HTML が苦手な方は、下図のように一度「投稿機能」のビジュアルエディタで表示したい内容を作成後、テキストボタンを押して表示される HTML を貼付けると簡単だ。

wordpress-widget-setting-23

注:
サイドバーに Facebook のLikeBox や RSS利用者用の Feedly を表示したりする場合もテキストウィジェットを使う。しかし、これらは HTML に不慣れな方には難しく設定が難しく感じるかもしれない。『WordPress に Facebook の LikeBox を設置する方法』『WordPressのサイドバーにRSS購読ボタンを設置する方法』で細かく具体的に解説しているので、その通りに設定してみよう。

4−2.検索ウィジェットの編集

検索ウィジェットはタイトルを入力するだけだ。

wordpress-widget-setting-15

タイトルを空白にして、右サイドバーの見出しを非表示にすることもできる。

4−3.最近の投稿ウィジェットの編集

最近の投稿ウィジェットは、タイトルを入力して表示する投稿数や、投稿日の表示の ON•OFF を選択するだけだ。

wordpress-widget-setting-16

このようにウィジェットの編集は、とても簡単なので、使っていればすぐに慣れるだろう。

5.ウィジェットの並べ替え方法

 編集したウィジェットは、下図のように表示の順番を並べ替えることができる。

wordpress-widget-setting-17

方法は簡単で、それぞれのウィジェットをドラッグ & ドロップして表示したい順番に並べ替えるだけだ。

wordpress-widget-setting-18

これで並び替えは完了だ。

6.ウィジェットの停止方法

次に、一度設定したウィジェットを停止する方法を抑えておこう。

停止するにはウィジェットを選んで、「使用停止中のウィジェット」のドラッグ & ドロップすれば良い。

wordpress-widget-setting-19

覚えておいて欲しいのは、使用停止中のウィジェットに移すと、設定した内容はそのまま保存されるということだ。

従って、もう一度、そのウィジェットを有効化したければボックス内に戻すだけなので非常に便利だ。

7.ウィジェットの削除方法

ウィジェットを削除するには、削除したいウィジェットを選んで右側の▼ボタンをクリックして開き、左下の「削除」ボタンをクリックすれば良い。

wordpress-widget-setting-20

削除は、停止と違って作成したウィジェットの内容も全て消えてしまうので注意しよう。

 

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから