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

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

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

WordPressのビジュアルエディターは、特に最新のブロックエディターのアップデートにより、ますます強力になっています。サイドバー、フッター、または任意のウィジェットエリアをカスタマイズする場合でも、コードに一切触れることなく、美しく機能的なウィジェットを作成できるようになりました。

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

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

ウィジェットを使用すると、メインのページや投稿エリアの外にリッチコンテンツを追加できます。WordPressのテーマはそれぞれ異なりますが、通常はフッター、ヘッダー、サイドバーなどのエリアにウィジェットを追加できます。

多くのウェブサイトでは、これらのエリアを使用して、「会社概要」セクションを表示したり、最も人気のある投稿を表示したり、メールニュースレターのサインアップフォームを追加したりしています。

WordPressでは、ウィジェット対応エリアにさまざまなブロックを追加でき、多くのWordPressプラグインも独自のブロックを追加します。

例えば、Smash Balloon Twitter Feedを使用している場合、プラグインのTwitterフィードブロックを使用して、ウィジェット対応エリアに最近のツイートを埋め込むことができます。

ただし、訪問者にリッチマルチメディアコンテンツを表示するカスタムウィジェットを作成したい場合もあります。たとえば、著者の写真をアップロードして、さまざまなソーシャルメディアプロファイルへのリンクを含む著者紹介ウィジェットを作成したい場合があります。

それを踏まえた上で、WordPressでビジュアルエディターを使用してカスタムウィジェットを作成する方法を見てみましょう。お使いのテーマに適した方法にジャンプするには、以下のリンクを使用してください。

• 方法1：ウィジェットオプションプラグインの使用（すべてのWordPressテーマで動作します）
• 方法2：フルサイトエディターを使用する（ブロック対応WordPressテーマで動作します）
• よくある質問

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

カスタムウィジェットを作成する最も簡単な方法は、Widget Optionsプラグインを使用することです。

これは、ユーザーの役割に応じて異なるウィジェットを表示したり、WordPressウィジェットをモバイルで非表示にしたりするなど、標準のWordPressビジュアルウィジェットエディターに多くの追加設定を追加します。

また、独自のリンク、画像、フォーマットなどでカスタマイズできるテキストウィジェットも追加されます。これにより、コードを書かなくてもカスタムウィジェットを作成できます。

まず、Widget Optionsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

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

これで、WordPressテーマ内のすべてのウィジェット対応エリアのリストが表示されます。表示されるオプションは、テーマによって異なる場合があります。

サイトに追加できるすべてのウィジェットも表示されます。このガイドではテキストウィジェットを使用しますので、ウィジェット対応エリアにドラッグアンドドロップしてください。

小さなポップアップが表示されます。

このポップアップは基本的にミニページまたは投稿エディターなので、見慣れたものに見えるはずです。

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

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

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

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

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

必要であれば、WordPressカスタマイザーを使用してビジュアルにカスタムウィジェットを構築することもできます。

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

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

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

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

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

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

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

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

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

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

ブロック対応のWordPressテーマを使用している場合は、フルサイトエディターを使用して、ウィジェット対応の領域にブロックを追加できます。

このように、サイドバーなどのウィジェット対応エリアに標準のWordPressブロックを配置することで、カスタムウィジェットを作成できます。また、個別のWordPressプラグインをインストールする必要もありません。

標準のWordPressウィジェットエディターやカスタマイザーを使用して編集できない領域にウィジェットを追加する方法でもあります。たとえば、404ページテンプレートにウィジェットを追加できます。

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

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

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

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

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

それが終わったら、青い「+」アイコンをクリックし、カスタムウィジェットで使用したい最初のブロックを見つけてください。

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

これにより、テキストの横に画像を簡単に配置して、見栄えの良いレイアウトにすることができます。それを念頭に置いて、メディア＆テキストブロックは著者情報ボックスの作成に最適です。次の画像で確認できるように。

使用したいブロックを選択したら、サイドバーやフッターなどのウィジェット対応エリアにドラッグ＆ドロップするだけです。

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

これで、思い描いていた通りのウィジェットを作成できるはずです。ウィジェット対応エリアにブロックとコンテンツを追加していくだけで、見た目が満足いくまで調整できます。

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

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

これで、WordPressウェブサイトにアクセスすると、新しいカスタムウィジェットが公開されているのがわかります。

よくある質問

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。