Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressウィジェットをブロックに変換する方法(ステップバイステップ)

WordPressのサイドバーや投稿コンテンツでレガシーウィジェットを使いたいですか?

バージョン5.8で、WordPressは新しいブロックベースのウィジェットエディターを追加し、サイトにリッチコンテンツを簡単に追加できるようになりました。幸いなことに、サイト上でクラシックウィジェットを使用することもできます。

この投稿では、WordPressウィジェットをブロックに変換する方法を紹介します。

How to Convert a WordPress Widget to a Block

このガイドでは以下のトピックを取り上げる:

WordPressウィジェットとブロックの違いとは?

WordPressウィジェットは、ウィジェット対応エリアに追加できるコンテンツ要素で、メインページや投稿コンテンツの一部とはみなされないセクションです。

通常、サイドバー、フッター、ヘッダー、その他WordPressテーマがウィジェット対応とみなすセクションが含まれます。

Example of the MonsterInsights popular posts widget in a sidebar

技術的には、WordPressブロックは同じように動作します。しかし、ブロックがウィジェットとどのように異なるかは、クラシックWordPressテーマかブロックWordPressテーマかによって異なります。

クラシックWordPressテーマを使用している場合、WordPressブロックはメインページや投稿エリアに追加するコンテンツ要素です。

一方、ブロックWordPressテーマには、もはや区切りのウィジェットエディターがありません。つまり、ヘッダー、ページ自体、またはどこにあるかにかかわらず、追加するコンテンツ要素はすべてWordPressブロックと呼ばれます。

バージョン5.8で、WordPressは新しいブロックベースのウィジェットエディターを導入しました。これにより、ソーシャルメディアフィードやソーシャルアイコンのようなビジュアルウィジェットの追加がより簡単になりました。

Adding a shortcode widget to a WordPress sidebar

しかし、WordPressブロックにアップグレードされていないレガシーウィジェットに依存している場合はどうでしょうか?幸い、まだ使うことができます。

レガシーウィジェットをウィジェット対応エリアやページの他の部分に簡単に追加する方法を紹介します。使用する方法は、クラシックテーマを使用しているか、ブロックテーマを使用しているかによって異なります。

その前に、開発者の視点からウィジェットとブロックの違いを簡単に説明しよう。

WordPressウィジェットをブロックに変換することは可能か?

もしあなたがWordPressのレガシーウィジェットを作成した開発者なら、それを新規ブロックウィジェットに変換できるかどうか疑問に思うかもしれません。

ウィジェットとブロックは似ているように見えますが、実はかなり違います。例えば、両者はまったく異なるプログラミング言語を使ってコーディングされている。ウィジェットはPHPで書かれ、ブロックはJavaScriptで書かれます。

つまり、ウィジェットをブロックに変換する簡単な方法はない。

しかし、それは問題ではありません。既存のウィジェットは、WordPressの新しいバージョンでも動作し続けます。ウィジェットのコードを更新する予定がない場合は、そのままにしておいてください。

しかし、ウィジェットに新機能を追加し続けたい場合、レガシーウィジェットを置き換える新しいブロックを作成するのがベストです。カスタムWordPressブロックの作成方法については、こちらのガイドを参照してください。

Creating a new custom block

WordPressでクラシックテーマのサイドバーにウィジェットを追加する方法

クラシックテーマを使用している場合、Legacy Widgetを使用することで、WordPressサイトのサイドバーやその他のウィジェット対応エリアにクラシックウィジェットを追加することができます。

注意: 外観 ” ウィジェットではなく外観 ” 編集と表示されている場合は、ブロックテーマを使用しています。次の方法に従ってください。

まず、WordPress管理エリアの外観 ” ウィジェットに移動する必要があります。

次に、「+ブロックを追加」ボタンをクリックする。ポップアップから、「レガシーウィジェット」アイコンをクリックする必要がある。

Add the Legacy Widget to Your Sidebar

ここで、ドロップダウンメニューから使用したいウィジェットを選択できます。

クリックするだけだ。

Select the Desired Widget from the Drop Down Menu

ウィジェットはサイドバーに追加されます。

画面上部の「更新」ボタンをクリックして、新規ウィジェットを保存することを本当に〜してもよいですか?

The Legacy Widget Is Added to the Sidebar

さらに詳しく知りたい方は、WordPressでウィジェットを追加して使用する方法とアクセシビリティモードでWordPressウィジェットを追加する方法のステップバイステップガイドをご覧ください。

WordPressでブロックテーマのサイドバーにウィジェットを追加する方法

初期設定のTwenty Twenty-Twoテーマなどのブロックテーマでは、WordPressのフルサイトエディターを使用できます。フルサイト編集は、サイトのテーマをスタイリングするためのカスタマイザーを提供しますが、初期設定ではレガシーウィジェットを含みません。

つまり、フルサイトエディターからレガシーウィジェットにアクセスできなくなります。さらに、クラシックテーマからブロックテーマに切り替えた場合、使用していたレガシーウィジェットは移行されません。

幸いなことに、プラグインを使ってレガシーウィジェットのサポートを追加することができます。X3P0 Legacy Widgetプラグインをインストールして有効化するだけです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注: プラグインはWordPressの最新バージョンでテストされていないことにお気づきでしょう。とはいえ、私たちはこのプラグインを試しており、このチュートリアルで最もうまく機能するのはこのプラグインだけです。

未検証のプラグインを使用することについての記事を読むと、より詳しい情報が得られます。より良いプラグインを見つけたら、遠慮なくコメントで教えてください!

有効化した場合、プラグインはフルサイトエディターにレガシーウィジェットを追加します。これにより、新しいテーマでレガシーウィジェットを使用できるようになります。

The Legacy Widget Is Now Available in the Full Site Editor

ウィジェットの追加に満足したら、’Save’ボタンをクリックして、変更を正式なものにすることができます。

WordPressで投稿コンテンツにウィジェットを追加する方法

WordPressのブロックコンテンツエディターの素晴らしい点の一つは、投稿やページの中など、ウィジェット対応エリア以外でもウィジェットを追加できることです。

コンテンツエディターに入ったら、画面上部の「+ブロック追加」ボタンをクリックします。

次に、「ウィジェット」セクションまでスクロールダウンし、コンテンツに追加したいウィジェットを見つけます。その後、投稿にウィジェットをドラッグすることができます。

Scroll Down to the Widgets Section

画面右の設定パネルでウィジェットをカスタマイズできます。

完了したら、ブログ投稿やページを公開したり更新したりするだけです。

Configure the Widget From the Right Settings Pane

さらに詳しく知りたい方は、投稿日やページコンテンツにWordPressウィジェットを追加する方法をご覧ください。

WordPressのブロックとウィジェットをさらに詳しく使いこなそう

WordPressのウィジェットやブロックについて詳しくなったところで、それらを最大限に活用する方法をさらに学びたいと思うかもしれません。まずはこちらの投稿をご覧ください:

このチュートリアルで、WordPressのウィジェットをブロックに変換する方法を学んでいただけたら幸いです。また、WordPressで投稿日やページごとに異なるサイドバーを表示する方法や、Gutenbergに最適なWordPressテーマも参考にしてみてください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

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