最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressでウィジェットを追加して使用する方法(ステップバイステップ)

ウィジェットは、WordPressウェブサイトに機能を追加する強力なツールです。コードを書かなくても、サイドバーやその他のウィジェット対応エリアに追加できます。

WPBeginnerでは、ウィジェットを使用してサイトの機能をカスタマイズおよび拡張し、訪問者にとってよりダイナミックで魅力的なものにしています。たとえば、最近の投稿、ソーシャルメディアフィード、特別オファーなどを表示するために使用できます。

この記事では、WordPressでウィジェットを追加して使用し、サイトをすばやくカスタマイズして、見た目とユーザーエクスペリエンスを向上させる方法を説明します。

WordPressでウィジェットを追加して使用する方法(ステップバイステップ)

💡 TL;DR: WordPressでウィジェットを追加・管理するには、外観 » ウィジェットに移動し、編集したいエリアを選択します。そこからウィジェットを追加、カスタマイズ、保存、または削除して、サイドバーやその他のウィジェットエリアの外観を制御できます。

ウィジェットとは何ですか?WordPressでなぜ必要なのでしょうか?

ウィジェットは、WordPressのサイドバー、フッター、その他のウィジェットエリアにコンテンツブロックを追加できるものです。

これは、画像ギャラリー、ソーシャルメディアフィード、引用、カレンダー、人気の投稿、その他の動的な要素をWordPressサイトに追加する簡単な方法になります。

WordPress管理ダッシュボードの外観 » ウィジェットに移動すると、ウィジェットエリアを見つけることができます。

これらの「ウィジェットエリア」は、WordPressテーマによって定義された特定の場所で、ウィジェットを配置できます。一般的なエリアには、サイドバー(左右)、フッター(多くは複数の列に分割)、場合によってはヘッダーや投稿コンテンツ内の特定のエリアが含まれます。

ウィジェットメニューの例

最新のWordPressエクスペリエンスでは、主にブロックウィジェットが使用されており、WordPressブロックエディターの機能がウィジェットエリアに統合されています。これは、古い「クラシックウィジェット」インターフェースを、より視覚的で柔軟なコンテンツ作成ツールに置き換えるものです。

それでは、WordPressウェブサイトのさまざまなエリアにウィジェットを簡単に追加する方法をご紹介します。

WordPressでサイドバーにウィジェットを追加する方法

WordPressサイドバーエリアにウィジェットを追加するには、いくつかの方法があります。

方法1:ウィジェット画面を使用する(クラシックテーマの場合)

クラシックWordPressテーマを使用している場合、最も一般的な方法は外観 » ウィジェットに移動することです。

この画面では、利用可能なウィジェットエリア(「サイドバー」や「フッター」など)が表示されます。編集したいウィジェットエリアをクリックして展開します。

サイドバーウィジェットを展開

次に、「+」アイコンをクリックして、ウィジェットブロックメニューを表示します。

ここで、名前でウィジェットを検索できます。または、「すべて表示」ボタンをクリックすると、利用可能なすべてのウィジェットのメニューが表示されます。

ウィジェットブロック追加アイコンをクリック

サイドバーにウィジェットを追加するには、そのウィジェットをクリックするだけで、自動的にサイドバーに追加されます。

次に、「更新」ボタンをクリックするだけで、ウィジェットがウェブサイトに公開されます。

ウィジェットを追加して更新
方法2:テーマカスタマイザーを使用する(クラシックテーマの場合)

ウィジェットを追加するもう一つの方法は、特に変更のライブプレビューを確認したい場合に、WordPressテーマカスタマイザーを使用することです。この方法は主にクラシックテーマ向けです。

まず、外観 » カスタマイズに移動し、「ウィジェット」オプションをクリックします。

WordPressサイドバーカスタマイザーウィジェット

これにより、ウィジェットオプションをカスタマイズし、変更をリアルタイムで確認できるページが表示されます。

サイドバーにウィジェットを追加するには、単に「右サイドバー」メニューオプション(または編集したい任意のウィジェットエリア)をクリックします。

右サイドバーウィジェットをクリック

その後、「+」ブロック追加アイコンをクリックして、ウィジェットブロックメニューを表示します。

次に、ウィジェットブロックを選択すると、自動的にサイドバーに追加されます。

サイドバーウィジェットにブロックを追加するにはクリックします

ウィジェットの追加プロセスは上記と同じです。

ウィジェットエリアの変更が完了したら、「公開」ボタンをクリックして変更を公開してください。

カスタマイザーでサイドバーウィジェットの変更を保存
方法3:サイトエディターを使用する(フルサイト編集テーマの場合)

新しいフルサイト編集(FSE)テーマを使用している場合、外観の下に従来の「ウィジェット」または「カスタマイズ」オプションはありません。代わりに、サイトエディター内でブロック(ウィジェットとして機能するものを含む)を直接管理します。

単に外観 » エディターに移動します。これによりサイトエディターが開きます。

エディターでは、「シングル投稿」や「ページ」などのテンプレート、および「ヘッダー」や「フッター」などのテンプレートパーツを閲覧できます。

フルサイトエディターでテンプレートを選択

ウィジェットのようなブロックを追加するには、追加したい場所のテンプレートパーツ(例:テンプレート内のサイドバーエリア)を選択します。

「+」アイコンをクリックして新しいブロックを追加します。「最新の投稿」、「検索」、「カテゴリー」などのブロックを検索できます。これらはクラシックウィジェットと同様に機能します。

フルサイトエディターでウィジェットを追加

追加して設定したら、「保存」ボタンをクリックしてテンプレートに変更を適用します。

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

WordPressでウィジェットを削除するのは、追加するのと同じくらい簡単です。WordPressダッシュボードで、外観 » ウィジェットに移動するだけです。

その後、削除したいウィジェットブロックをクリックします。

ウィジェットブロックをクリックして削除

次に、ウィジェットブロックの上部にある3つのドットの「オプション」ボタンをクリックします。これにより、ウィジェットを移動および削除できるメニューが表示されます。

ウィジェットを削除するには、「ブロックを削除」オプションを選択するだけです。

オプションをクリックしてウィジェットブロックを削除

ウィジェットを削除すると、サイドバーから削除され、ウィジェットの設定や選択したオプションが削除されます。

場合によっては、ウィジェットを削除したいが、将来のために設定は保存しておきたいことがあります。これは、再設定せずに後で再度使用する予定がある場合に便利です。

クラシックテーマの場合は、外観 » ウィジェット画面でこれを行うには、ウィジェットブロックを「非アクティブなウィジェット」セクションにドラッグします。

6つのドットのハンドルを探すか、単にウィジェットブロックをクリックしてドラッグします。

ページを終了する前に、必ず「更新」ボタンをクリックしてウィジェット設定を保存してください。

非アクティブなウィジェットにドラッグ

そのウィジェットを再度使用したい場合は、ウィジェットブロックを「非アクティブなウィジェット」セクションからアクティブなウィジェットエリアにドラッグし直すだけです。

📍注意: この「非アクティブなウィジェット」機能は、外観 » ウィジェット画面を使用するクラシックテーマに固有のものです。サイトエディターを使用するFSEテーマの場合、通常はブロックを削除し、必要に応じて再追加します。「非アクティブ」な保持領域はありません。

WordPressで不要なウィジェットを無効にする方法に関するガイドも参照してください。

WordPressで利用できるウィジェットの種類は?

デフォルトのWordPressインストールには、最近の投稿、タグ、検索バー、カテゴリ、カレンダーなどの組み込みウィジェットが含まれています。

ただし、ほとんどのWordPressプラグインとテーマには、サイトに追加できる独自のウィジェットブロックも付属しています。

WordPressで利用可能なウィジェットブロック

より理解を深めるために、組み込みのものとプラグインによって頻繁に追加されるものを含む、一般的なWordPressウィジェットの内訳を以下に示します。

ウィジェット名機能とユースケース
アーカイブ投稿の月別アーカイブを表示し、訪問者が古いコンテンツを閲覧できるようにします。
オーディオサイト上で直接音楽やポッドキャストを再生するためのオーディオプレーヤーを埋め込みます。
カレンダー公開された投稿のある日をハイライトするカレンダーを表示し、ナビゲーションを支援します。
カテゴリ投稿のカテゴリを一覧表示し、ユーザーが特定のトピックを探索するのに役立ちます。
カスタムHTMLカスタムHTMLコードを追加でき、外部コンテンツやユニークなレイアウトの埋め込みに最適です。
ギャラリーギャラリー形式で画像の選択を表示します。
画像オプションのリンク付きの単一画像を追加します。
最新のコメント投稿の最新のコメントを表示し、エンゲージメントを促進します。
最新の投稿最新のブログ投稿を一覧表示し、コンテンツを新鮮で発見しやすい状態に保ちます。
ナビゲーションメニュー作成したカスタムメニュー(例:プライマリメニュー、フッターメニュー)を表示します。
ページサイト上のすべての公開済みページを一覧表示します。
RSS任意のRSSフィードのエントリを表示し、他のサイトからのコンテンツを表示するのに役立ちます。
検索検索バーを追加し、訪問者がサイト上の特定のコンテンツを見つけられるようにします。
ショートコードプラグインやテーマからのショートコードを挿入できます。
ソーシャルアイコンソーシャルメディアプロファイルへのリンクを表示します(テーマ/プラグインによって提供されることが多い)。
タグクラウド最もよく使われるタグのクラウドを表示し、コンテンツの発見をより視覚的にします。
テキストプレーンテキストまたは基本的なHTMLを追加し、ウェルカムメッセージや免責事項などに汎用的に使用できます。
ビデオYouTubeやVimeoなどのプラットフォームの動画、または自己ホスト型の動画を埋め込みます。
WPForms(例)WPFormsプラグインで作成した連絡フォームをウィジェットエリアに直接埋め込むことができます。

独自のウィジェットを作成して、完全にカスタムなウィジェットをWordPressに追加することもできます。詳細については、カスタムWordPressウィジェットの作成方法に関するガイドを参照してください。

WordPressでウィジェットを追加・使用することに関するよくある質問

WordPressでウィジェットを追加および使用することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressのウィジェットはどのように機能しますか?

WordPressのウィジェットは、サイドバーやフッターなどのエリアに追加できる小さなコンテンツブロックとして機能します。コードを編集せずに、メニュー、最新の投稿、検索バーなどの追加コンテンツを表示するのに役立ちます。

WordPressで優れたウィジェットをデザインするにはどうすればよいですか?

WordPressで優れたウィジェットは、シンプルで、便利で、読みやすいものです。サイトのデザインに合わせ、メインコンテンツからユーザーの注意をそらすことなく、迅速な価値を提供する必要があります。

始めるにあたって、カスタムWordPressウィジェットの作成に関するチュートリアルをご覧ください。

WordPressでクラシックウィジェットを使用する方法は?

WordPressでクラシックウィジェットを使用するには、古いウィジェットエディターを復元するプラグインをインストールします。これにより、ブロックベースのシステムではなく、従来のインターフェイスを使用してウィジェットを管理できます。

詳細については、WordPressでウィジェットブロックを無効にする方法(クラシックウィジェットを復元)に関するガイドをご覧ください。

WordPressのウィジェットの欠点は何ですか?

ウィジェットが多すぎると、レイアウトが乱雑に見えることがあります。また、重いウィジェットや最適化されていないウィジェットを追加すると、パフォーマンスが低下する可能性があります。

WordPressのウィジェットはSEOに良いですか?

ウィジェットは、ナビゲーションとユーザーエクスペリエンスを改善することで、WordPressのSEOをサポートできます。ただし、ユーザーがコンテンツとのエンゲージメントを高めるのに役立たない限り、ランキングを直接向上させるわけではありません。

この記事がWordPressでウィジェットを追加して使用する方法を学ぶのに役立ったことを願っています。また、WordPressサイトに最適なカラー配色の選択方法に関するガイドや、最高のWordPressサイドバートリックに関する記事も参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

27件のコメント返信する

    • テーマによりますが、目的は同じで、ほとんどのブロックをコンテンツとして投稿やページに含めることができるという利点があります:)

      管理者

  1. ありがとうございます。これまではプラグインとウィジェットの違いを区別するのが難しかったのですが、この記事のおかげで違いが理解できました。質問ですが、ブロックエディターのブロックもウィジェットなのでしょうか?改めてありがとうございます。

  2. こんにちは、記事をありがとうございます。プラグインがサイトの機能を拡張することはガイドから理解しましたが、ウィジェットとプラグインの正確な違いは何ですか?どちらもサイトに機能と能力を追加します。

    • ウィジェットはサイトやコンテンツに視覚的なものを追加するために使用され、プラグインはサイトに何かを追加できる、と考えることができます:)

      管理者

  3. 外観 -> ウィジェットを表示すると、次のメッセージが表示されます。

    あなたのテーマには5つのウィジェットエリアがありますが、この特定のページにはそれらが表示されません。
    カスタマイザーを使用しながらサイトの他のページに移動して、それらのページに表示されるウィジェットを表示および編集できます。

    しかし、その後、この記事にあるようなエリアは表示されず、「右サイドバー」と「ヘッダー」しかありません…助けてください

    • テーマにカスタムデザインオプションがあるようです。お使いのテーマのサポートに連絡して、そのツールでウィジェットをどのように変更できるか確認することをお勧めします。

      管理者

  4. テーマにフッターウィジェットしかない場合、サイドバーやメニューセクションにウィジェットを追加するにはどうすればよいですか?

    • 使用しているテーマでウィジェットを追加したい場所にオプションがない場合は、テーマを変更するか、ページビルダーの使用を検討する必要があります。

      管理者

  5. ブログのコメントセクションの文言を変更したいのですが、ウィジェットにアクセスしてもフッター用のウィジェットが表示されません。

  6. サイトのウィジェットエリアでGutenbergブロックを使用できますか、それとも投稿やページでのみ使用できますか?

  7. ホームページにアイコンウィジェットを追加して、カテゴリにリンクさせたいです。ホームページにはウィジェット「エリア」がありません(そこに配置したいのです)。ウィジェットエリアはページの最下部のみです。何か提案はありますか?よろしくお願いします。

  8. コメントではなく質問です。
    WordPressの管理画面で、「外観」を展開すると、「テーマ」、「カスタマイズ」、「テーマエディター」しか表示されず、「ウィジェット」が表示されません。
    ここに「ウィジェット」を表示するにはどうすればよいですか?
    よろしくお願いします

    • ビル様

      デフォルトのテーマに切り替えて、管理画面でウィジェットが表示されるか確認してみてください。表示される場合は、お使いのテーマにサイドバーまたはウィジェット対応エリアが定義されていないため、外観の下にウィジェットが表示されないということです。

      管理者

    • WordPressの経験がほとんどない状態でウェブサイトを再構築しています。ウィジェットセクションまたはページで何かをクリックしたところ、「ライブプレビューで管理」と表示されるようになりました。ウィジェットを追加できません。ダウンロードしたウィジェットを追加できるように、これを削除するにはどうすればよいですか?お時間をいただきありがとうございます。

  9. こんにちは、クライアント向けのウィジェット広告のページビューを追跡するプラグインはありますか。
    よろしくお願いします

  10. こんにちは、

    WordPressに追加できるウィジェットの最大数を知りたいと思っていました。ページごとにウィジェットを追加することになるかもしれません!

  11. 本当にありがとうございます。ウィジェットに何を入れるか、どこに入れるかで苦労していましたが、素晴らしい明確な投稿です。ありがとうございます。

  12. 初心者にとって非常に役立つものを作成していただきありがとうございます。記事の印刷バージョンがあると非常に便利です。

  13. 非常にタイムリーな投稿です。仮想アシスタントにサイトのウィジェットを維持する方法について、いくつかの説明ビデオを作成するところでした。この投稿を背景として使用すると、それがはるかに簡単になるはずです。

    彼女にWPBeginnerをフォローするように勧めました。彼女が私よりも多くのWPの専門知識を開発するのを見ても驚きません。:)

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。