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

WordPressのウィジェット機能を使うと、ブログ・ホームページにさまざまな「パーツ」を追加することができます。この記事では、ウィジェットの設定でできることや、編集のしかたを詳しく解説しています。

目次

WordPressのウィジェットとは

ウィジェットは、WordPressで作成したサイトのサイドバーやフッターなどを簡単に設定できる機能です。

たとえば「検索フォーム」を設置したり、「カテゴリー」「最近公開した記事」のリンクを貼るなど、さまざまなパーツを追加、編集することができます。

WordPressウィジェットの設定例
このサイトのサイドバーも「ウィジェット」で設定している

ウィジェットを設定する前に

WordPressのウィジェットを設定するための画面「ウィジェット画面」について説明します。

ウィジェット画面の開き方

WordPressでウィジェットを設定するには、管理画面[外観]>[ウィジェット]をクリックします。

WordPress管理画面[外観]>[ウィジェット]をクリック

[外観]のサブメニューに[ウィジェット]が表示されない場合はこちら

すると、以下のいずれかの画面が開きます。どちらのタイプの画面が開くかは、使用しているテーマによって異なります。

  • 従来のウィジェット画面
  • ブロックウィジェット
従来のウィジェット画面
従来のウィジェット画面
ブロックウィジェット
ブロックウィジェット

ブロックウィジェット機能とは

2021年7月公開のWordPress 5.8から追加された機能で、ウィジェットを「ブロックエディタ」で設定することができます。

しかし、テーマによってはブロックウィジェットを利用できないものもあります。たとえば国内で人気の高い「SWELL」や「Cocoon」などのテーマは、本記事執筆時点でブロックウィジェットに対応していません。

このサイトで使っているテーマ「SWELL」の開発者によれば、あえてブロックウィジェット機能を強制オフにしていることを公表しています。

WordPress5.8からのブロックウィジェットついてのSWELLの対応方針

ブロックウィジェット機能はまだ普及していないことから、この記事では「従来のウィジェット画面」の使い方を紹介します。

ブロックウィジェットは、「Classic Widgets」プラグインをインストール・有効化することで、従来のウィジェット画面(クラシック ウィジェット)に変更することができます。

「Classic Widgets」プラグイン

ライブプレビューでのウィジェット設定

ウィジェット画面の[ライブプレビューで管理]をクリックすると、ライブプレビュー画面が開きます。

ウィジェット画面[ライブプレビューで管理]をクリック

ライブプレビューでは、設定によってウィジェットがどのように表示されるのかを、リアルタイムで確認することができます。

テーマカスタマイザー「ウィジェット」

ライブプレビューはリアルタイムで設定内容を確認できて便利ですが、動作が重くなる場合があるため、従来のウィジェット画面を使うのがおすすめです。

標準テーマ「Twenty Twenty-Two」などのフルサイト編集対応テーマを利用している場合は、管理画面[外観]のサブメニューに[ウィジェット]はありません。

「Twenty Twenty-Two」利用時の[外観]サブメニューに[ウィジェット]はない
「Twenty Twenty-Two」利用時の[外観]サブメニューに[ウィジェット]はない

「フルサイト編集」とは、メインコンテンツだけでなく、ヘッダーやフッター、サイドバー、メニューなど、サイト全体をブロックエディタで編集できる機能です。

フルサイト編集は2022年1月公開のWordPress 5.9で実装されたばかりで、対応しているテーマはまだ数少ないため、詳しい説明は省略します。

フルサイト編集対応の公式テーマ
本記事執筆時点で、公式テーマ9723個のうちフルサイト編集対応は87個しかない

ウィジェット画面の構成

従来のウィジェット画面は、以下の3つから構成されています。

ウィジェット画面の構成
ウィジェット画面の構成

1. 利用できるウィジェット

利用できるウィジェットの項目は、テーマやプラグインの使用状況によって異なります。

例1)おすすめテーマ「SWELL」独自のウィジェット

おすすめテーマ「SWELL」独自のウィジェット

例2)人気記事表示プラグイン「WordPress Popular Posts」独自のウィジェット

人気記事表示プラグイン「WordPress Popular Posts」独自のウィジェット

2. 使用停止中のウィジェット

一時的に停止させたウィジェットが、一覧表示されます。

ウィジェットの停止方法については、のちほど「ウィジェット設定の基本操作」で説明します。

3. ウィジェットエリア

ウィジェットの内容を、サイトのどの位置に表示できるかを示しています。ウィジェットエリアの項目は、使用しているテーマによって異なります。

たとえば、標準テーマ「Twenty Twenty-One」の場合、ウィジェットエリアは1か所しかありませんが…

標準テーマ「Twenty Twenty-One」のウィジェットエリアは1か所だけ
標準テーマ「Twenty Twenty-One」のウィジェットエリア

※上の画像は「Classic Widgets」プラグイン利用時のものです

「SWELL」のように高機能なテーマになると、たくさんのウィジェットエリアが用意されています。

高機能テーマ「SWELL」はウィジェットエリアも充実している
高機能テーマ「SWELL」はウィジェットエリアも充実している

SWELLで使用できるウィジェットエリア一覧

ウィジェット設定の基本操作

ウィジェットを設定するための基本的な操作として、以下の5つを紹介します。

以下に掲載する画像は、テーマ「SWELL」利用時のものです。テーマによって表示内容が異なりますが、基本的な操作方法に違いはありません。

ウィジェットを追加する

ウィジェットを追加する方法には、次の2つがあります。

  1. ドラッグ&ドロップして追加する
  2. 追加ボタンを使う

ドラッグ&ドロップして追加するほうが直感的に操作できるのでおすすめです。

1. ドラッグ&ドロップして追加する

「利用したいウィジェット」の中から追加したいウィジェットをマウスで掴み、設置したい場所(ウィジェットエリア)にドラッグ&ドロップします。

ウィジェットをドラッグ&ドロップして追加する

2. 追加ボタンを使う

ウィジェットをクリックした後、設置したい場所を選択し、[ウィジェットを追加]ボタンをクリックします。

ウィジェットを[ウィジェットを追加]ボタンで追加する

ウィジェットを編集する

ウィジェットエリアに追加したウィジェットは、簡単なカスタマイズをすることができます。ここでは、よく使われるウィジェットのカスタマイズ方法を紹介します。

  • 「最近の投稿」ウィジェットの編集
  • 「カテゴリー」ウィジェットの編集
  • 「検索」ウィジェットの編集
  • 「テキスト」ウィジェットの編集
  • 「カスタムHTML」ウィジェットの編集

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

「最近の投稿」ウィジェットは、投稿のリンクを公開日の新しい順に表示します。

[タイトル]に入力した文字列はサイト上で下図のように反映され、[表示する投稿数]の指定や[投稿日]の表示もできます。

「最近の投稿」ウィジェットの編集例
ウィジェットの編集ができたら[保存]をクリック
「最近の投稿」ウィジェットの表示例
「最近の投稿」ウィジェットを設定したサイトの表示例

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

「カテゴリー」ウィジェットは、カテゴリーページ(同じカテゴリーに属する投稿の一覧)のリンクを表示します。

[ドロップダウンで表示]はカテゴリー数の多いサイト向けの設定で、表示部分の縦幅を小さくすることができます。

「カテゴリー」ウィジェットの編集例1[ドロップダウンで表示]
ウィジェットの編集ができたら[保存]をクリック
「カテゴリー」ウィジェットの表示例1[ドロップダウンで表示]
カテゴリーウィジェットで[ドロップダウンで表示]を設定したサイトの表示例

[投稿数]や[階層]を表示することもできます。

「カテゴリー」ウィジェットの編集例2[投稿数][階層]
ウィジェットの編集ができたら[保存]をクリック
「カテゴリー」ウィジェットの表示例2[投稿数][階層]
カテゴリーウィジェットで[投稿数を表示][階層を表示]を設定したサイトの表示例

「検索」ウィジェットの編集

「検索」ウィジェットは、サイト内検索フォームを表示します。

「検索」ウィジェットの編集例
ウィジェットの編集ができたら[保存]をクリック
「検索」ウィジェットの表示例
「検索」ウィジェットを設定したサイトの表示例

テーマ「SWELL」を使っている場合、検索ウィジェットの[タイトル]に文字列を入力しても、サイト上には表示されません。

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

「テキスト」ウィジェットは、文章を入力したり、画像やリンクなどを挿入したいときに使います。

入力エリアは[ビジュアル]と[テキスト]から選べます。

[ビジュアル]は、文字の装飾や挿入した画像などをリアルタイムで確認できるので、初心者向きです。

「テキスト」ウィジェットの編集方法[ビジュアル]
テキストウィジェットを[ビジュアル]モードで編集
ウィジェットの編集ができたら[保存]をクリック

一方の[テキスト]には、HTMLなどのコードを記述することができます。中上級者向けの編集機能です。

「テキスト」ウィジェットの編集方法[テキスト]
テキストウィジェットを[テキスト]モードで編集
ウィジェットの編集ができたら[保存]をクリック

「カスタムHTML」ウィジェットの編集

「カスタムHTML」ウィジェットは、HTMLなどのコードを貼り付けたいときに使います。

たとえばYou Tube動画を埋め込むためのコードや、アフィリエイト広告のコードなどを貼り付けるのに便利です。

「カスタムHTML」ウィジェットの編集方法
ウィジェットの編集ができたら[保存]をクリック

先に紹介した「テキスト」ウィジェットに埋め込み用コードや広告用コードを貼り付けると、内容が自動的に変換される場合があります。コード貼り付けには「カスタムHTML」ウィジェットを使うことをおすすめします。

ウィジェットを並べ替える

ウィジェットエリアに追加した項目は、ドラッグ&ドロップで並べ替えることができます。他のウィジェットエリアに移動させることも可能です。

ウィジェットをドラッグ&ドロップで並べ替える

追加したウィジェットをサイト上から取り外す方法には、以下の2つがあります。

停止

設定内容を維持したまま、一時的に取り外すことができる

削除

不要なウィジェットをサイトから完全に削除する

ウィジェットを停止する

ウィジェットを一時的に取り外すには、[使用停止中のウィジェット]にドラッグ&ドロップします。

ウィジェットを[使用停止中のウィジェット]にドラッグ&ドロップ

停止したウィジェットを元に戻したいときは、ウィジェットエリアにドラッグ&ドロップします。

[使用停止中のウィジェットをクリア]を押すと、完全に削除することができます。

ウィジェットを削除する

削除したいウィジェットをクリックして、左下にある[削除]をクリックします。

ウィジェット左下にある[削除]をクリック

ウィジェットを削除すると、設定内容を復元することはできません。

この「削除」の操作は、追加済みのウィジェットを削除するだけであって、[利用できるウィジェット]から消えてしまうわけではないので安心してください。

アクセシビリティモードで設定する

ドラッグ&ドロップによる操作が難しい場合は、アクセシビリティモードの利用がおすすめです。

ウィジェット画面右上の[アクセシビリティモードを有効にする]をクリックすると、以下のような画面に切り替わります。設定したいウィジェットの[追加]や[編集]をクリックします。

アクセシビリティモード有効化後のウィジェット画面

以下のような個別の設定画面が開き、位置の選択やカスタマイズをすることができます。

ウィジェットの位置の選択やカスタマイズができる

まとめ

ウィジェットは、サイドバーやフッターなどにさまざまなパーツを設定できる機能です。

ウィジェットの追加、編集、並べ替え、停止、削除などの操作は、マウスを使って直感的にできます。もしドラッグ&ドロップによる操作が難しい場合は、アクセシビリティモードの利用がおすすめです。

利用できるウィジェットやウィジェットエリアの種類は、使用しているテーマやプラグインによって異なります。このサイトで使っているテーマ「SWELL」は、デザイン性が高いだけでなく、ウィジェットなどの機能性もたいへん充実しています。

このサイトで使っています

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

この記事が気に入ったら
フォローしてね!

この記事を書いた人

WordPress超初心者講座の運営者。
ワードプレスでブログ・サイトを作り始めて12年。アラフィフ。
今も年間330日くらい、WordPressを触っています。

Twitterはじめました。

目次