1. テーマ
  2. ウィジェットの使い方と活用例

ウィジェットの使い方と活用例

2015/11/17

WordPressウィジェットを使うと、サイドバーやフッターなどサイト上の一部にさまざまな機能を追加・設定することができます。このページでは、ウィジェットの使い方活用例について紹介します。

WordPress ウィジェットとは

ウィジェットは、シンプルな機能を持たせたプログラムです。「ブログパーツ」と言い換えると分かりやすいでしょうか。例えば、カレンダー・カテゴリー・アーカイブ・サイト内検索・最近の投稿などがよく使われます。

ウィジェットの使い方

ウィジェットを使うには、管理画面メニューの[外観]>[ウィジェット]をクリックします。
管理画面メニューの[外観]>[ウィジェット]

この画面には、利用できるウィジェットや、ウィジェットを設置できる場所などが表示されます。

ウィジェットは、サイドバーに表示させることが多いですが、テーマによってはフッターやメインカラムに設置できるものもあります。例えば、テーマ「Twenty Fifteen」の場合はサイドバーの1カ所のみしかありませんが、テーマ「Twenty Fourteen」では3ヶ所にウィジェットを設置できます。
テーマ「Twenty Fifteen」の場合はサイドバーの1カ所のみ

Twenty Fourteen では3ヶ所にウィジェットを設置できる

ここからは、WordPressのウィジェットの使い方について、テーマ「Twenty Fourteen 1.5」を例にくわしく見ていきましょう。
WordPress標準テーマ「Twenty Fourteen」

ウィジェットの使い方①
ウィジェットの追加

ウィジェットを追加するには、ドラッグ&ドロップ(マウスの左ボタンを押しながら移動させ、移動先で左ボタンを離す)するか、
ドラッグ&ドロップでウィジェット追加

もしくは、ウィジェット名をクリック(①)してメニューを開き、設置場所を選択(②)してから、[ウィジェットを追加]ボタンをクリック(③)します。
ウィジェット名をクリックしてメニューを開き[ウィジェットを追加]ボタンをクリック

ウィジェットの使い方②
ウィジェットのカスタマイズ

追加したウィジェットによっては、サイト上で表示する内容をカスタマイズすることができます。下図は「カテゴリー」ウィジェットの例です。設定後は、[保存]をクリックしましょう。
ウィジェットのカスタマイズ

ウィジェットの使い方③
ウィジェットの削除

左下の[削除]をクリックします。
ウィジェットの削除

ウィジェットの使い方④
ウィジェットの使用停止

ウィジェットを完全に削除するのではなく、設定内容を残したまま使用を停止したい場合は、[使用停止中のウィジェット]にドラッグ&ドロップします。
ウィジェットの使用停止

ウィジェットの使い方⑤
ウィジェットの並べ替え

ウィジェット名をドラッグ&ドロップすると、表示順を並べ替えることができます。
ウィジェットの並べ替え

アクセシビリティモードでウィジェットを設定する

ここまで紹介したウィジェットの使い方は、アクセシビリティモードでも同様の設定ができます。

アクセシビリティモードを有効にする

ウィジェット管理画面上部の[表示オプション]をクリック(①)し、[アクセシビリティモードを有効にする]をクリック(②)します。
アクセシビリティモードを有効にする

アクセシビリティモードを使ったウィジェットの設定

アクセシビリティモードを有効にすると、ウィジェット名の右側に[追加]や[編集]の文字が表示されます。
アクセシビリティモードの追加編集

ここをクリックすると、ウィジェットの各種設定ができる画面が表示されます。
アクセシビリティモードを使ったウィジェットの設定

カスタマイザーでウィジェットを管理する

カスタマイザーは、管理画面メニューの[外観]>[カスタマイズ]から利用できる機能です。
管理画面メニューの[外観]>[カスタマイザー]

[ウィジェット]をクリックすると、カスタマイズや追加場所の選択をすることができます。
管理画面メニューの[カスタマイザー]>[ウィジェット]

カスタマイザーでウィジェットを管理するには
この管理機能は、WordPress バージョン 3.9以降で利用できます。

ウィジェットの活用例

外部サイトで配布されているブログパーツなどを、ウィジェットを使って表示させたい場合は、「テキスト」ウィジェットを利用するといいでしょう。
テキストウィジェット

ブログパーツのコードをコピーし、「テキスト」ウィジェットの[内容]に貼り付け(①)、[保存]をクリック(②)します。
テキストウィジェットの[内容]に貼り付け

ウィジェットを表示できない場合

利用しているテーマで、ウィジェットの利用に必要な設定ができていないかもしれません。くわしい設定方法は、公式マニュアル 管理画面/外観/ウィジェットサイドバーが定義されていないを参照してください。

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。