WordPressでネストされたブロックを選択して使用する方法

ネストされたブロックは、WordPressブロックエディターの最も強力な機能の1つであり、それらを使いこなすことでデザインを次のレベルに引き上げることができます。

これにより、段落、画像、ボタンなどの複数の要素を単一のレイアウトにグループ化して整理できます。それらの使い方を理解すれば、追加のプラグインやカスタムコードに頼ることなく、より柔軟でプロフェッショナルなページを作成できます。

WPBeginnerでは、ネストされたブロックが最初にリリースされて以来それらを使用しており、ページデザインのアプローチを完全に変えました。複雑なレイアウトの管理が容易になり、基本的なコンテンツを洗練されたユーザーフレンドリーなセクションに変えるのに役立ちます。

このガイドでは、WordPressでネストされたブロックを選択して使用する方法をステップバイステップで説明します。これにより、自信を持って、よりクリーンで効果的なレイアウトを構築できるようになります。

WordPressのネストされたブロックとは何ですか？

WordPressのGutenbergネストブロック機能を使用すると、1つのブロック内に1つ以上のブロックを挿入（または「ネスト」）できます。

ネストされたブロックを使用すると、複数のブロックを互いに内側に配置することで、WordPressウェブサイトでより複雑なレイアウトを作成できます。これにより、ページや投稿のコンテンツのデザインとフォーマットの柔軟性が向上します。

たとえば、複数の画像ブロックをグループブロック内にネストして、特定のイベントの写真セットや、特定のテクニックを使用して作成された一連のアートワークを表示できます。

さらに、ネストされたブロック機能を使用すると、個々のブロックを個別に編集できます。これにより、他のブロックに影響を与えることなく、ニーズに合わせて各ブロックをカスタマイズできます。

これにより、コンテンツの整理が改善され、コンテンツがより魅力的になり、作成プロセスが合理化されます。

それでは、WordPress Gutenberg のネストされたブロックを簡単に選択して使用する方法を見てみましょう。

WordPressのネストされたブロックの使用方法

Gutenbergブロックエディターでは、グループブロックまたはカラムブロックを使用して、複数のブロックを簡単にネストできます。

まず、WordPress管理サイドバーからブロックエディターで既存の投稿または新しい投稿を開く必要があります。

ここから、画面左上の「ブロックを追加」の「+」ボタンをクリックし、「グループブロック」を見つけます。それをクリックしてページに追加したら、一緒にネストするブロックのレイアウトを選択する必要があります。

このチュートリアルでは、「グループ」レイアウトを選択します。

次に、画面上の「+」ボタンをクリックするだけで、親ブロック内にコンテンツの追加を開始できます。

このチュートリアルのために、画像ブロックを追加します。

ブロックを追加したら、上部にあるブロックツールバーの「グループ化」ボタンをクリックして、親ブロックを選択します。

次に、「+」ボタンをクリックしてブロックメニューを再度開き、そこから追加する他のブロックを選択できます。

WordPressネストブロック設定の設定方法

複数のブロックをネストしたら、各ブロックをクリックして個々の設定を構成できます。そこから、ブロックの設定が画面の右側の列に表示されます。

ここから、他のネストされたブロックに影響を与えることなく、個々のブロックの背景色、テキストの色、およびサイズを調整できます。

すべてのネストされたブロックの設定をまとめて構成するには、上部にあるブロックツールバーの「グループ」ボタンをクリックする必要があります。これにより、右側の列に親ブロックの設定が開きます。

これで、すべてのネストされたブロックの配置、向き、背景色、文字色、タイポグラフィを設定できます。

これらの設定は、親ブロック内にネストされているすべてのブロックに影響することに注意してください。

また、任意のブロックのトップツールバーにある「オプション」ボタンをクリックすることで、既存の個々のブロックをネストされたブロックに変換することもできます。

これによりメニュープロンプトが開きますので、「パターンを作成」オプションを選択してください。

これが完了すると、新しい再利用可能なブロックの名前を付け、カテゴリを選択するように求めるプロンプトが開きます。

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

満足したら、「公開」または「更新」ボタンをクリックして変更を保存することを忘れないでください。

この例では、Groupブロック内にTitle、Image、Paragraphブロックをネストしました。

デモウェブサイトでは、ネストされたブロックは次のように表示されました。

ボーナス：Wayfinderプラグインを使用してネストされたブロックを簡単に選択する

複数のブロックがネストされている場合、個々のブロックを選択して構成するのが難しい場合があります。

幸いなことに、Wayfinderプラグインを使用すると、親ブロックからネストブロックを簡単に選択でき、ブロックのタイプとクラスもわかります。

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

有効化したら、WordPress管理サイドバーから設定 » Wayfinderページに移動してください。

そこに着いたら、すべての設定がすでに有効になっています。使用したくない設定の横にあるチェックボックスをオフにするだけです。

例えば、Wayfinderにエディタ内のすべてのブロックのブロックタイプを表示させたい場合は、「ブロックタイプを表示」オプションの横にあるチェックボックスをオンのままにしてください。

ただし、プラグインにブロッククラスを表示させたくない場合は、そのオプションの横にあるチェックボックスをオフにするだけです。

設定を構成した後、「変更を保存」ボタンをクリックすることを忘れないでください。

次に、ダッシュボードからWordPressブロックエディターで既存または新規の投稿を開く必要があります。

そこに着いたら、内部ブロックの上にマウスをホバーすると、その名前が表示されたアウトラインが表示されます。親ブロック内のネストされたブロックのアウトラインと名前も表示されます。

これにより、グループブロックまたはカラムブロック内にネストされているすべての異なるブロックを特定できます。

ここから、親ブロックから個々のブロックを簡単に選択して設定を構成できます。

「カラム」または「グループ」の見出しをクリックすると、ネストされたすべてのブロックを一度に選択することもできます。これにより、右側のカラムに親ブロックの設定が開きます。

ブロック設定を構成した後、「更新」または「公開」ボタンをクリックして変更を保存します。

この記事がWordPressのネストされたブロックの選択と使用方法を学ぶのに役立ったことを願っています。また、WordPressでブロックの高さを変更する方法のステップバイステップチュートリアルや、WordPressブロックパターンの使用方法の初心者ガイドも参照してください。

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