WordPress ウィジェットとは 使い方・設定方法

本記事は広告が含まれる場合があります WordPress

【WordPressウィジェットとは】ウィジェットの使い方を徹底解説

本記事では、WordPress(ワードプレス)初心者の方を対象に、WordPressのウィジェットの使い方について説明していきます。

ウィジェットの使い方が分かるようになると、WordPressのカスタマイズの幅が広がります。

■【WordPressウィジェットとは】ウィジェットの使い方(動画解説版)

 

 

WordPressのウィジェットとは

WordPressのウィジェットとはブログパーツのこと

WordPressのウィジェットとは、ブログパーツ(部品)のことです。WordPressでは、画像やテキスト、検索窓や投稿一覧など任意のウィジェット(ブログパーツ)をサイドバーやフッターなどに追加することができます。

ワードプレスのウィジェット機能の説明
 

■ウィジェットを利用して、サイドバーにお問い合わせや最近の投稿を表示させている例
ウィジェットを利用して、サイドバーにお問い合わせや最近の投稿を表示させている例
 

ウィジェットの設定は、WordPressの管理画面>外観>ウィジェットで設定できます。サイドバーやフッターにバナー(画像)を追加したり、テキストやおすすめ記事一覧などを表示することができます。
ブロックウィジェットの表示画面
 

ウィジェットの一般的な意味

ネットでウィジェットの意味を調べると、「パソコンのデスクトップやWebページなどで動作する小さなアプリケーションのこと」と解説されていますが、ブログのパーツ(部品)が理解しやすいでしょう。

パソコンのデスクトップやWebページなどで動作する小さなアプリケーションのこと。カレンダーや電卓、音楽プレイヤーなどのアクセサリー類やRSSリーダー、検索ボックスなどがある。Yahoo!のYahoo!ウィジェット、Mac OS Xに付属のDashboardなどがある。WindowsやGoogleでは、ガジェットと呼ばれている。ブログのサイドバーに追加するウィジェットは、ブログパーツと呼ばれる。
(ウィジェットとは - コトバンクより引用)

 

ブロックウィジェットとクラシックウィジェット

WordPerssのウィジェット画面は、ブロックウィジェットという新しいウィジェット画面と、クラシックウィジェットという従来版の2つの設定画面があります。

2023年6月時点で多くのテーマがブロックウィジェットという新しい方のウィジェット画面になっていますが、SwellやCocoon、Affinger6など有名テーマでも従来版のクラシックウィジェットが採用されていたり、ご利用の環境によって設定画面が変わるため注意しましょう。
 

■ブロックウィジェット(WP5.8以降)
ブロックウィジェットの表示画面

■従来版クラシックウィジェット
ワードプレスのウィジェット画面。任意のウィジェットを 任意のエリアに配置していきます。

本記事では、新しい方のブロックウィジェットの使い方と従来のクラシックウィジェットの両方を下記に解説していますので、ご自身の環境に合わせて参考にしてください。

 

ウィジェットの設定方法(外観>ウィジェット)

【最新ブロックウィジェット版】ウィジェットの使い方

まずは新しい方のブロックウィジェット版での使い方を解説します。
 

ウィジェットは外観>ウィジェットから設定します。
外観>ウィジェットをクリックします。
 

ウィジェット画面が開くと、ウィジェットを配置できるエリアが以下のように表示されます。配置エリアはご利用のテーマによって変わります。
ウィジェットが配置できるエリア
 

ブロックウィジェットでは、固定ページの編集画面と同じようにブロックを追加して設定できます。任意の配置エリアを選択して「+(ブロックを追加)」から好きなウィジェットを追加していくことができます。
サイドバー(共通上部)に好きなウィジェットを追加している例
 

ウィジェット追加後に、ウィジェット>更新ボタンをクリックして保存します。
ウィジェット>更新ボタンをクリックして保存
 

サイトを開いて、サイドバーを確認すると追加したウィジェットが表示されていることが確認できればOKです。
ウィジェットが追加されました。
 

◾️(参考)サイドバー(トップページ)に「カレンダー」と「最新の投稿」ウィジェットを追加している例

配置エリアはサイドバー(トップページ)とかフッター(xxx)とか色々なものがあるんですね

なお、ウィジェット配置エリアの名称や種類は、適用しているテーマによって異なります。「サイドバー」一つだけの場合もあれば、上記例のようにサイドバー(xxx)のほかにフッターにもウィジェットを配置することができるようになっている場合もあります。

 

 

【従来クラシックウィジェット版】ウィジェットの使い方

テーマによっては、デフォルトでブロックウィジェットではなく、従来のクラシックウィジェットを採用している場合があります。

ワードプレスのウィジェット画面。任意のウィジェットを 任意のエリアに配置していきます。
 

外観>ウィジェットをクリックします。
外観>ウィジェットをクリックします。

クラシックウィジェットの設定画面が開くと、左側に利用できるウィジェット(ブログパーツ)、右側に配置エリアが表示されます。従来版クラシックウィジェットの画面

クラシックウィジェットでは、任意のウィジェットタイプを選択して、好きな箇所にドラッグ&ドロップすることでウィジェット(ブログパーツ)が追加できます。クラシックウィジェットのウィジェット(ブログパーツ)追加方法

下記はテキストタイプのウィジェットです。テキストウィジェットの場合は、お好みのタイトルと本文を設定し、「保存」をクリックします。テキストウィジェットの設定画面

以上で、トップページのサイドバーにテキストウィジェットが追加されます。
テキストウィジェットの表示例

■クラシックウィジェット追加の流れ

 

従来版のクラシックウィジェットに戻したい場合

ご利用のテーマがブロックウィジェットの画面になっているが、何らかの理由で従来版のクラシックウィジェットに戻したい場合、プラグイン「Classic WIdgets」を利用して、ブロックウィジェットからクラシックウィジェットに戻すことができます。

詳細手順は下記をご参照ください。
【Classic Widgets】ウィジェット画面を戻すWordPressプラグイン

 

WordPress初期状態で用意されているクラシックウィジェット

WordPress初期状態で用意されているウィジェットは下記の通りです。

以下では、クラシックウィジェットの画面でおすすめのウィジェットを紹介していますが、ブロックエディターでも同様のウィジェット(あるいは代替となるブロック)が使用できます。

ウィジェット名 説明
RSS 特定のWebサイトのRSS(新着情報)の取得・表示ができるウィジェット
アーカイブ 投稿の月別アーカイブを表示できるウィジェット
カスタムHTML 任意のHTMLコードを記述できるウィジェット
カテゴリー カテゴリーリストできるウィジェット(ドロップダウン形式での表示や階層の表示が可能。)
カレンダー サイトの投稿カレンダーを表示できるウィジェット
ギャラリー ギャラリーを表示できるウィジェット
タグクラウド タグの一覧を表示できるウィジェット
テキスト

(※ブロックウィジェットでは「段落ブロック」でテキストが追加できます。)

任意のテキストを記述できるウィジェット
ナビゲーションメニュー ナビゲーションメニューを表示できるウィジェット
メタ情報 ログイン、RSS、WordPress.orgへのリンクの表示ができるウィジェット
動画 メディアライブラリ内から、またはYouTube・Vimeo・その他のプロバイダから動画を表示できるウィジェット
固定ページ 固定ページの一覧を表示できるウィジェット
最近の投稿 直近の投稿一覧を表示できるウィジェット
検索 サイト内検索フォームを追加できるウィジェット

 

テキストウィジェット

ワードプレスウィジェット テキスト

「テキスト」ウィジェットは非常によく使う機能です。テキストウィジェットを利用すると、任意の文字や画像、バナーリンクなどを表示することができます。

検索ウィジェット

ワードプレスウィジェット 検索

「検索」ウィジェットを利用すると、手軽にサイト内検索機能を追加することができます。

カテゴリウィジェット

ワードプレスウィジェット カテゴリ

「カテゴリ」ウィジェットを利用すると、投稿のカテゴリ一覧を表示することができます。

 
 

ウィジェットを増やせるプラグイン

ブロックウィジェット・クラシックウィジェットともに、WordPressではプラグインを追加することで後から色々なウィジェットを追加することができます

今回は、「VK All in One Expansion Unit」と「WordPress Popular Posts」という二つのプラグインを例にウィジェットを追加する方法をご紹介します。
 

1. VK All in One Expansion Unit

1つ目は、「VK All in One Expansion Unit」です。同じ開発元の「Lightning」というテーマをご利用の場合はインストール推奨です。
VK All in one Expansion Unit
 

VK All in One Expansion Unit(以下、ExUnitと言う。)をインストール・有効化すると、以下のウィジェットが利用できるようになります。
VK ExUnitで使えるウィジェットブロック

◾️ExUnitで使えるようになるウィジェット

  • VK 固定ページ本文
  • VK Twitter
  • VK バナー
  • VK ボタン
  • VK 子ページのリスト
  • VK お問い合わせボタン
  • VK お問い合わせセクション
  • VK CTA
  • VK FB Page Plugin
  • VK 最近の投稿
  • VK アーカイブリスト
  • VK カテゴリー/カスタム分類リスト
  • VK 3PR エリア
  • VK PR Blocks
  • VK プロフィール

 

例1)「VK 最近の投稿」で最新記事一覧を表示する

「VK 最近の投稿」ウィジェットを利用すると最新記事一覧を表示できます。

WordPressが初期状態で持っているウィジェット「最近の投稿」とは違い、デフォルトのサムネイル画像を設定したり、表示させたい記事タイプの選択(投稿・固定ページ・カスタム投稿)ができます。

外観>ウィジェットから、任意の配置エリアに「VK 最近の投稿」を追加します。追加したいエリアで「+(ブロックを追加)」をクリックし「VK 最近の投稿」を選択する

通常の投稿一覧を表示したい場合はデフォルト設定のまま「更新」をクリックします。「VK 最近の投稿」の設定画面

(「表示したい記事タイプ」を変更することで、カスタム投稿の一覧が表示されます。)

以上で、サイドバー上部に、最新の投稿記事一覧が表示されました。

サイドバー上部に最近の投稿が表示されている

例2)「VK お問い合わせセクション」でお問い合わせ情報を表示する

「VK お問い合わせセクション」を利用すると、お問い合わせの電話番号やリンクを簡単に設定することができます。

なお、表示させたいお問い合わせ情報はあらかじめ「ExUnit>メイン設定」の「連絡先情報」箇所で設定しておく必要があります。

「ExUnit>メイン設定」の「連絡先情報」の設定例

「外観>ウィジェット」を開き、「サイドバー(共通上部)」エリアに「VK お問い合わせセクション」を追加します。「VK お問い合わせセクション」をクリック

「電話番号とメールの形式を縦並びにします」にチェックを入れる

以上でサイドバーにお問い合わせ情報が表示されました。サイドバー上部にお問い合わせ情報が表示されている

なお、VK ExUnitのくわしい使い方は「VK All in one Expansion Unitの使い方【LightningプラグインEXUnit】」にて紹介していますので、ご興味ある方はぜひご参照ください。

 

2. WordPress Popular Posts(人気記事ランキング)

2つ目は、「WordPress Popular Posts」です。

WP Popular Postsというプラグインをインストール・有効化すると「人気記事ランキング」をウィジェットとして追加することができます。

■WordPress Popular Posts
WordPress Popular Posts プラグイン

WordPress Popular Postsを有効化すると、「WordPress Popular Posts」ウィジェットが追加されます。WordPress Popular Posts ウィジェット

WordPress Popular Postsを任意の配置エリアに追加します。WordPress Popular Posts ウィジェットの設定画面

そうすると、デフォルトではページビューをもとに、人気記事のトップ10がテキストで表示されるようになります。WordPress Popular Postsの表示例

WordPress Popular Postsのくわしい使い方は「WordPress Popular Postsの使い方・人気記事の表示方法」にて紹介していますので、こちらもご興味ある方はあわせてご覧ください。

 

 

まとめ ウィジェットを使いこなしてサイトを充実させよう

まとめです。今回は、WordPress(ワードプレス)初心者の方を対象に、WordPressのウィジェットの使い方について説明しました。

WordPressのウィジェットとは、ブログパーツ(部品)のことで、画像やテキストなど任意のパーツをサイドバーやフッターなどに追加することができます。
ワードプレスのウィジェット機能の説明
 

■サイドバーにお問い合わせや最近の投稿を表示させている例
ウィジェットを利用して、サイドバーにお問い合わせや最近の投稿を表示させている例
 

実際に自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてくださいね。

今回は以上になります。最後までご覧いただきありがとうございました。

あわせて読みたい記事

WordPressの基本的な使い方を「【総まとめ版】初心者向けWordPress(ワードプレス)の使い方」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。
【総まとめ版】初心者向けWordPress(ワードプレス)の使い方

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

-WordPress
-