WordPressブロックエディター(Gutenberg)で再利用可能なブロックを作成する方法

現在パターンとして知られている再利用可能ブロックを使用すると、任意のコンテンツブロックを保存して、ウェブサイトの他の投稿やページで再利用できます。

CTAセクション、購読フォーム、または美しくデザインされたバナーのいずれであっても、一度作成してパターンとして保存し、数回のクリックで必要な場所に挿入できます。

これは時間と労力を節約するだけでなく、サイト全体でデザインの一貫性を確保します。

WPBeginnerでは、ウェブサイトのすべての投稿に同じCTA(コールトゥアクション)を追加するためにパターンを使用しています。これにより、ライターは記事の締め方を考える時間を費やす必要がなくなり、ワークフローが効率化されます。再利用可能なCTAブロックを挿入するだけで、次のタスクに進むことができます。

この記事では、WordPressブロックエディターで再利用可能なブロックをステップバイステップで簡単に作成する方法を説明します。

WordPressブロックエディターで再利用可能ブロックを作成する

WordPress の再利用可能なブロック(パターン)とは?

パターン(以前は再利用可能なブロックとして知られていました)は、WordPress ブロックエディターの強力な機能であり、ブロックのコレクションを保存して、ウェブサイト全体で簡単に再利用できます。

多くのブロガーは、ブログ記事の最後にCTA(行動喚起)を追加したり、ソーシャルメディアでWordPressブログをフォローするためのリンクを追加したりするなど、同じコンテンツスニペットを複数の記事に頻繁に追加します。

多くのユーザーは、再利用可能なコンテンツスニペットをコンピューターのテキストファイルとして保存し、必要に応じてコピー&ペーストしています。

しかし、Gutenbergブロックエディタは、パターン機能でこの問題を解決します。

ブロックを使用して簡単にパターンを作成し、投稿エディターに保存できます。このブロックは、コンテンツを最初から再作成することなく、任意のWordPressの投稿またはページに挿入できます。

これにより時間の節約になり、ページや投稿全体で一貫したデザインやスタイルを維持できます。再利用可能ブロック(パターン)がより効率的に作業するのに役立つシナリオをいくつかご紹介します。

  • 各記事の最後にソーシャルメディアでユーザーにフォローを促す
  • WordPressの投稿やページにCTAボタンを追加する
  • テーブルの保存と再利用
  • ページにフィードバックフォームをすばやく追加する
  • インラインアフィリエイトバナーを手動で追加する
  • ネストされたブロックの保存と再利用

それでは、WordPressブロックエディターで再利用可能なブロックを簡単に作成する方法を見てみましょう。

WordPress Gutenbergエディターでパターン(再利用可能なブロック)を作成する方法

すべてのGutenbergブロックは、WordPressエディター内の個別のコンテンツ要素であり、パターンとして保存することもできます。まず、再利用可能なブロックを作成するために、既存または新規の投稿を開く必要があります。

それが完了したら、画面左上の「ブロックを追加」(+)ボタンをクリックします。

これによりブロックメニューが開きます。ここで、複数のページまたは投稿で再利用したいブロックを追加できます。次に、好みに応じてブロックにコンテンツを追加します。

このチュートリアルでは、CTAコンテンツスニペットのパターンを作成するために、段落ブロックを選択します。

WordPressの再利用可能なブロックのコンテンツを追加

ブロックツールバーの上部または右側のブロックパネルにあるさまざまなオプションを使用して、ブロックをさらにスタイル設定できます。

さらに、ソーシャルメディアプロフィールへのリンクを追加したり、さまざまなタイポグラフィ要素を追加したりできます。

好みに応じてブロックコンテンツをカスタマイズ

それが完了したら、ブロックツールバーの3点メニューボタンをクリックします。

これによりドロップダウンメニューが開き、「パターンを作成」オプションを選択する必要があります。

パターンを作成オプションを選択

次に、パターンの名前を入力するように求められます。ブロックとその機能をすばやく識別できる名前を使用することをお勧めします。

その後、ドロップダウンメニューからデフォルトのカテゴリを選択できます。これにより、ウェブサイトで多くのパターンを作成して使用する予定がある場合に、すべての再利用可能ブロックを整理するのに役立ちます。

次に、「作成」ボタンをクリックして変更を保存します。

パターンの名前を追加して「作成」をクリック

パターンは、すべての設定とともに WordPress データベースに保存されます。

WordPressパターンを投稿や固定ページに追加する方法

WordPressでパターンを作成する方法を学んだので、次にWordPressの投稿やページにパターンを追加する方法を見てみましょう。

再度、Gutenbergエディターで再利用可能なブロックを追加したい新しいまたは既存の投稿を開く必要があります。ここから、画面左上の「ブロックを追加」(+)ボタンをクリックし、上部から「パターン」タブに切り替えます。

ここで、パターン機能によって提供されるすべてのデフォルトカテゴリのリストが表示されます。次に、再利用可能なブロックに選択したカテゴリをクリックする必要があります。

たとえば、CTAの投稿用の再利用可能なパターンを作成していたため、「Call to Action」カテゴリを選択しました。

ブロックにカテゴリを選択しなかった場合、パターンは「未分類」タブに保存されます。

リストからパターンのカテゴリを選択します

カテゴリをクリックすると、ブロックメニューの横に新しいプロンプトが開き、その特定のカテゴリに保存されているすべてのパターンが表示されます。

ここで、作成した再利用可能なブロックをクリックするだけで、WordPress のページまたは投稿に自動的に追加されます。

パターンを投稿に追加する

これが少し複雑に思える場合は、ブロックエディターにスラッシュ(/)を入力して、付けた名前でパターンを検索するだけです。

これにより、ブロックのリストが即座に開き、そこから簡単にパターンを選択できます。

キーボードショートカットでパターンを追加

ブロックツールバーの「元の編集」オプションをクリックして、再利用可能なブロックを編集することもできます。

ただし、パターンの設定を変更すると、パターンが使用されているすべての場所で変更されることに注意してください。

ブロックツールバーの「元の編集」オプションをクリックします

これにより、ブロックエディター内の新しい画面に移動し、パターンのコンテンツを編集および変更できます。他のブロックを追加してパターンをカスタマイズすることもできます。

完了したら、「更新」ボタンをクリックして変更を保存します。

ブロックエディターでパターンを編集する

これで投稿を再度開くと、更新されたパターンが機能しているのがわかります。

ただし、特定の投稿内のパターンに変更を加えたいだけであれば、ブロックツールバーの3点アイコンをクリックする必要があります。

これによりプロンプトが表示されるので、「デタッチ」オプションを選択する必要があります。これにより、パターンは通常のブロックに変換され、行った変更は元のパターンに影響しなくなります。

パターンを通常のブロックに変換

WordPressエディターで全パターンを管理

パターンをしばらく使用した後、不要になったブロックや名前を変更したいブロックがある場合があります。

WordPress では、すべてのパターンを 1 つの画面から簡単に管理できます。古いテーマを使用している場合は、WordPress ダッシュボードから 外観 » パターン ページにアクセスしてください。

これにより、WordPressウェブサイト上のすべての再利用可能なパターンを簡単に管理できる新しいページにリダイレクトされます。

ここでは、ブロックの編集、削除、インポート、または別のウェブサイトへのエクスポートが可能です。

古いWordPressテーマでパターンを管理する

ただし、ブロックテーマを使用している場合、このオプションは利用できません。その場合、WordPress管理サイドバーから外観 » エディターページにアクセスして、すべてのパターンを管理できます。

これにより、サイト全体エディターが開きます。ここで、左側の列にある「パターン」タブをクリックして展開する必要があります。次に、「すべてのパターンを管理」オプションをクリックできます。

すべてのパターンを管理ボタンをクリック

これで「パターン」ページにリダイレクトされ、パターンを編集または削除できます。

「新しいパターンを追加」ボタンをクリックして、新しい再利用可能なブロックを作成することもできます。

ブロックテーマでのパターンの管理

再利用可能なブロック(パターン)のインポート/エクスポート方法

パターンは、作成されたウェブサイトだけでなく、他のWordPressウェブサイトでも再利用できます。

パターンページから再利用可能なブロックをエクスポートするには、ブロックの下にある「JSONとしてエクスポート」リンクをクリックします。WordPressはブロックをJSONファイルとして送信します。このファイルはコンピューターに保存できます。

JSONとしてインポートボタンをクリック

これで、別のWordPressサイトの管理エリアに切り替えることができます。ここから、パターン管理画面にアクセスし、上部にある「JSONからインポート」ボタンをクリックします。

ここでファイルアップロードボックスが表示され、「ファイルを選択」ボタンをクリックして、以前にダウンロードしたブロックを選択する必要があります。

その後、「インポート」ボタンをクリックします。

JSONファイルをインポート

WordPressはパターンをインポートし、データベースに保存します。これで、新しくインポートされた再利用可能なブロックを他のWordPressサイトで使用できるようになります。

詳細な手順については、WordPressコンテンツブロックのインポート/エクスポート方法(スクリーンショット付き)のステップバイステップガイドをご覧ください。

WordPressブロックエディタをマスターするためのボーナスのヒント

編集ワークフローを改善するためにパターンを追加することに加えて、WordPressブロックエディターでコンテンツ作成プロセスを合理化するための他のヒントもいくつか使用できます。

これにより生産性が向上し、サイトのコンテンツにより集中できるようになります。

段落、画像、見出し、ボタンブロックなど、ウェブサイトで最もよく使用するブロックを記憶することで、ブロックエディターを簡単に習得できます。

これを行うと、編集画面を並べ替えて、ブロックツールバーをページの上部に表示できるようになります。集中モードを使用して、ブロックパネル、ブロックメニュー、WordPress 管理サイドバーなどの気を散らすものを削除することもできます。

詳細な手順については、WordPressで気を散らさないフルスクリーンエディターを使用する方法に関するチュートリアルを参照してください。

集中モードを無効にする

もう1つの素晴らしいヒントは、カラムブロックを使用してコンテンツを雑誌のような外観にし、YouTube動画を追加し、カバー画像を追加し、段落の色を変更するなど、さらに多くのことを行うことです。

詳細については、WordPressコンテンツエディタをマスターするためのベストヒントのリストをご覧ください。

この記事がWordPressブロックエディターで再利用可能なブロックを作成する方法を学ぶのに役立ったことを願っています。また、WordPressヘッダーのカスタマイズ方法に関する初心者向けガイドや、GutenbergフレンドリーなWordPressテーマの専門家のおすすめもご覧ください。

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

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

究極のWordPressツールキット

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

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

30 CommentsLeave a Reply

  1. 自分のサイトでは、特にブログ記事の最後にニュースレター登録フォームを追加する際に、パターンが非常に役立つと感じています。
    これにより、時間と労力を大幅に節約できます。

  2. この記事をありがとうございます。これで、Gutenbergでいくつかのブロックを作成し、カテゴリ別に記事の下に追加しました。しかし、指示通りに「再利用可能なブロック」が見つからなかったので設定をしばらく探しましたが、その後、この機能が単に名前が変更されただけだと理解しました。

  3. 3つのドットをクリックした際に表示されるドロップダウンメニューに、再利用可能なブロックを作成するオプションが表示されませんでした。スクリーンショットを撮ってドロップダウンメニューの表示をお見せできればよかったのですが、ここでは許可されていません。他にどのような方法がありますか?

    • There was a recent naming change, you would want to use create pattern from the dropdown and we will look to update this article soon :)

      管理者

    • 現在、アイキャッチ画像は投稿タイプ用であり、個々のブロック用ではありません。コンテンツに画像を追加したい場合は、もちろん画像ブロックを追加できます。

      管理者

  4. 複数のテキスト行を持つ再利用可能なブロックを作成しようとしていますが、新しいテキスト行を追加すると新しいブロックが作成されます。すべてのテキストを1つのブロックにまとめる必要があります。どうすればよいですか?

    • EnterキーだけでなくShift+Enterキーを使用して次の行に移動すると、ブロック内に留まるはずです。

      管理者

  5. 通常のブロックに変換が変更されました。以前あった場所にはもう表示されません。何かアイデアはありますか?

  6. ここはすべて順調です。しかし、私が求めているのは、再利用可能なブロックの背景色だけです。これにより、使用するたびに好きなように入力できます。

    変更を加える前に再利用可能なブロックを通常のブロックに戻すと、背景色が消えてしまいます。これは私が望むものではありません。

    それを行う方法はありますか?

  7. ブロックの書式設定だけを保存して、再利用する方法はありますか?
    例えば、特定のブロックの色やスタイル設定に時間をかけた後、毎回異なるコンテンツでそれらのオプションを再利用したい場合です。これは可能ですか?
    再利用可能なブロックとして保存すると、コンテンツ全体も保存されてしまいます。

  8. ハッ!再利用可能なブロックに追加する機能がそこにあったなんて、全く気づきませんでした。ありがとう、皆さん。
    – C. より

  9. 素晴らしい情報ありがとうございます。署名ブロックを追加するにはどうすればよいですか?単に入力した名前ではなく、実際の署名です。

  10. ご提案とガイドへの誘導、ありがとうございます。

    いくつかのトラブルシューティングの後、私の問題はウェブサイトのホスティングに関連しているようです。再利用可能なブロックは、異なるホストサーバー上の新しい同一のクリーンなWPインストールで期待どおりに機能するようになりました。サーバー間の唯一の明確な違いはPHPのバージョンです。

  11. 再利用可能ブロックが突然なくなりました。他のブロックは引き続き機能しますが、新しいブロックを作成する際に再利用可能ブロックがカテゴリとして表示されなくなりました。既存のブロックから「再利用可能ブロックに追加」という3点メニューオプションも同様です。

    完全な新規インストール以外の復旧方法について、何か提案があれば幸いです。

  12. 再利用可能なブロックは、新しいエディターの数少ない優れた機能の1つですが、残念ながら通常のブロックに変換できるという事実は、それらの利点をすべて無効にしてしまいます。

    例えば、リンクを含むCTAがあるとします。その再利用可能なブロックを何度も使用しますが、数回は通常のブロックに変換します。1年後にそのCTAに含まれるリンクを変更する必要があるとします。再利用可能なブロックを編集すると、サイト全体でリンクが変更されますが、通常のブロックに変換された場所は例外です。数回であれば大した問題ではありません。しかし、数十人の著者が数百の投稿でその再利用可能なブロックを通常のブロックに変換した場合、それははるかに大きな問題となります。

    再利用可能なブロックはこのデータ管理の問題を解決するのに役立ったかもしれませんが、通常のブロックに変換できるようにしたことで、問題はさらに悪化しました。驚くべきことに、より良い解決策は、バックエンドで簡単に編集でき、投稿コンテンツをいじる必要のないショートコードです。

    • こんにちは、リーさん。

      再利用可能なブロックは、ブロックの設定、フォーマット、コンテンツを保存するのに特に役立ちます。もしユーザーがそれらの編集のために通常のブロックに変更した場合、それは再利用可能なブロックではなく「通常のブロック」であることを認識する必要があります。

      管理者

返信する

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