WordPressでビジュアルエディターを使用してウィジェットを作成する方法

ビジュアル編集は、ウィジェットの作成方法を変革しました。

かつてはカスタムコードが必要だったことが、数回のクリックでできるようになり、ウィジェット作成が誰にでもアクセスしやすくなりました。

WordPressのビジュアルエディターは、特に最新のGutenbergブロックエディターのアップデートにより、ますます強力になっています。

これは、ブロックウィジェットの作成がこれまで以上に直感的になったことを意味します。サイドバー、フッター、または任意のウィジェットエリアをカスタマイズする場合でも、コードを一行も触れることなく、美しく機能的なコンテンツを追加できるようになりました。

このガイドでは、ビジュアルエディターを使用してWordPressサイトのウィジェットを作成する方法を具体的に説明します。

WordPressでウィジェットを作成するためにビジュアルエディターを使用する理由

ビジュアルエディターを使用すると、コードを書かずに、サイトのどこにでもリッチコンテンツを持つカスタムウィジェットを簡単に作成できます。

これらのウィジェットは、テーマに応じて、フッター、ヘッダー、またはサイドバーなどのウィジェット対応エリアに追加できます。

ウィジェットは、自己紹介セクション、人気の投稿、ニュースレターサインアップフォーム、または埋め込みソーシャルフィードなどの表示に最適です。

WordPressでは、これらのエリアにブロックを追加でき、多くのプラグインが独自のカスタムブロックを提供しています。

たとえば、Smash Balloon Twitter Feedプラグインを使用すると、そのブロックを使用して最新のツイートを埋め込むことができます。

また、写真やソーシャルプロフィールのリンク付きの著者紹介など、完全にカスタムなウィジェットを作成して、サイトをより魅力的にすることもできます。

それでは、WordPressでビジュアルエディターを使用してカスタムウィジェットを作成する方法を見てみましょう。

お使いのテーマに適した方法にジャンプするには、以下のリンクを使用してください。

方法1：ウィジェットオプションプラグインの使用（すべてのWordPressテーマで動作します）

ウィジェットエリアにカスタムコンテンツを追加する最も簡単な方法は、Widget Optionsプラグインを使用することです。

これにより、標準のWordPressビジュアルウィジェットエディターに多くの追加設定が追加されます。これには、ユーザーの役割に応じて異なるウィジェットを表示する機能、[a id="x1"]モバイルでWordPressウィジェットを非表示にする[/a]機能などが含まれます。

また、独自のリンク、画像、書式設定などでカスタマイズできるテキストウィジェットも追加されます。これにより、コードを書かずにウィジェットエリアにリッチでカスタムなコンテンツを追加できます。

まず、Widget Optionsプラグインをインストールしてアクティブ化する必要があります。詳細については、[a id="x1"]WordPressプラグインのインストール方法[/a]に関するステップバイステップガイドを参照してください。

有効化したら、WordPressダッシュボードの外観 » ウィジェットページに移動します。

これで、WordPressテーマのすべてのウィジェットエリアのリストが表示されます。Widget Optionsプラグインは、強化されたテキストウィジェットを追加します。

このウィジェットを見つけて、サイドバーやフッターなどの任意のウィジェットエリアにドラッグアンドドロップするだけです。

完了すると、Widget Optionsプラグインが小さなポップアップを開きます。

このポップアップはミニページまたは投稿エディターのように機能するため、見慣れたもののはずです。

まず、ウィジェットの上に表示されるタイトルを入力できます。

その後、小さなエディターに直接テキストを入力したり、[a id="x1"]リンクや画像を追加[/a]したり、書式を変更したり、箇条書きや番号付きリストを追加したりできます。

また、[a id="x1"]特定のWordPressページにウィジェットを表示または非表示[/a]にしたり、[a id="x2"]WordPressウィジェットにカスタムスタイルを追加[/a]したりすることもできます。

ウィジェットの設定に満足したら、「完了」リンクをクリックして設定を保存します。

さて、あなたのウェブサイトにアクセスすると、新しいリッチテキストウィジェットがライブで表示されます。

クラシックWordPressテーマを使用している場合は、WordPressカスタムizerを使用してウィジェットエリアにビジュアルでカスタムコンテンツを作成することもできます。

外観 » ウィジェットに移動し、今回は「ライブプレビューで管理」をクリックします。

これにより、ウィジェット設定が選択された状態でカスタマイザーが開きます。

カスタムウィジェットを追加したい領域をクリックできるようになりました。

その後、「ウィジェットを追加」をクリックすると、さまざまなウィジェットが表示されるパネルが開きます。

クラシックなテキストウィジェットを見つけてクリックするだけで、ウェブサイトに追加できます。

これにより、テキスト、リンク、メディアなどを追加できる小さなエディターが開きます。

エディターで変更を加えると、ライブプレビューが自動的に更新されます。

ウィジェットの外観に満足したら、「公開」ボタンをクリックして、WordPressブログまたはウェブサイトで公開します。

WordPressダッシュボードでテーマカスタマイザーが見つからない場合は、[a id="x1"]WordPress管理画面でテーマカスタマイザーが見つからない問題を修正する方法[/a]に関するガイドを参照してください。

方法2：フルサイトエディターを使用する（ブロック対応WordPressテーマで動作します）

ブロック対応のWordPressテーマを使用している場合は、フルサイトエディターを使用して、サイトのテンプレートの任意のエリアにブロックを追加できます。

このように、テーマのテンプレートに直接標準のWordPressブロックを配置することで、サイドバーのような領域のカスタムコンテンツを作成できます。また、別のWordPressプラグインをインストールする必要もありません。

また、標準のWordPressウィジェットエディターやカスタマイザーでは編集できないエリアにウィジェットを追加する方法でもあります。たとえば、[a id="x1"]404ページテンプレート[/a]にウィジェットを追加できます。

開始するには、WordPressダッシュボードの [外観] » [エディター] に移動してください。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示しますが、任意のエリアにウィジェットやブロックを追加できます。

利用可能なすべてのオプションを表示するには、「テンプレート」または「テンプレートパーツ」のいずれかを選択してください。

これで、編集したいテンプレートまたはテンプレートパーツをクリックできます。

WordPressはデザインのプレビューを表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックします。

それが完了したら、青い「+」アイコンをクリックし、カスタムコンテンツに使用したい最初のブロックを見つけます。

好きなブロックを自由に組み合わせて使用できますが、画像とテキストの両方を使用する場合は、メディアとテキストブロックから始めることをお勧めします。

これにより、画像とテキストをきれいなレイアウトで簡単に配置できます。それを念頭に置いて、メディアとテキストブロックは、次の画像で見られるように、[a id="x1"]著者情報ボックスを作成[/a]するのに最適です。

使用したいブロックを選択したら、サイドバーやフッターなどのテンプレートのセクションにドラッグアンドドロップするだけです。

フルサイトエディターを使用すると、WordPressのツールと設定の完全なセットにアクセスできます。これは、[a id="x1"]行動喚起ボタン[/a]、テキスト、リンク、画像、その他のコンテンツをより広範囲のブロックに追加できることを意味します。

そうすることで、思い描いた通りのカスタムコンテンツを作成できるはずです。テンプレートにブロックやコンテンツを追加していき、見た目に満足するまで繰り返してください。

テーマのウィジェット対応エリアの使用方法の詳細については、WordPressサイトのフッターに追加するものの[a id="x1"]チェックリスト[/a]を参照してください。

変更に満足したら、「保存」をクリックします。

これで、WordPressウェブサイトにアクセスすると、テンプレートに新しいカスタムコンテンツがライブで表示されます。

WordPressでビジュアルエディターを使用してウィジェットを作成することに関するよくある質問

ビジュアルエディターを使用してウィジェットを作成することについて、読者からよく寄せられる質問をいくつかご紹介します。

ウィジェットを視覚的に作成するためにプラグインをインストールする必要がありますか？

必ずしもそうではありません。ブロックテーマを使用している場合、追加のプラグインなしでフルサイトエディターを使用してウィジェットを追加できます。

ただし、お使いのテーマがフルサイトエディターをサポートしていない場合、Widget Options のようなプラグインを使用すると、ウィジェットの表示場所と表示方法をより細かく制御できます。

ウィジェットの変更がすぐに表示されないのはなぜですか？

ウィジェットがすぐに更新されない場合は、サイトのキャッシュと[a id="x1"]ブラウザキャッシュ[/a]をクリアしてみてください。一部のキャッシュプラグインまたはCDNでは、変更が遅れる場合があります。

ライブプレビューオプションを使用すると、公開前にウィジェットの更新を確認するのに役立ちます。

プラグインのカスタムブロック（Smash BalloonやWPFormsなど）をウィジェットエリアに追加できますか？

もちろんです。Smash Balloon、WPForms、MonsterInsightsなどのほとんどの最新プラグインには、任意のウィジェット対応エリアに配置できる独自のブロックが含まれています。

これらのブロックを、他のブロックと同様にサイドバー、フッター、またはヘッダーにドラッグできます。

Widget OptionsプラグインとFull Site Editorの使用の違いは何ですか？

Widget Optionsプラグインは、FSEをサポートしていない古いテーマを含むすべてのテーマで動作します。

フルサイトエディターはブロック対応テーマでのみ機能し、ヘッダー、フッター、テンプレートを視覚的に編集できるため、より深いデザインの柔軟性を提供します。

この記事がWordPressウィジェットのビジュアルエディターを簡単に使用する方法を学ぶのに役立ったことを願っています。また、WordPressコンテンツエディターをマスターするためのヒントやWordPressでランディングページを作成する方法に関するガイドも参照することをお勧めします。

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