Genesis Custom Blocks の使い方なら｜ダブスト

ブロックビルダーを使用して新しいカスタムブロックを作成する
- ブロック設定を構成する
- ブロックフィールドを追加する
テンプレートエディターを使用してブロックテンプレートを作成する
Web サイトのコンテンツにカスタムブロックを追加する
その他

ブロックエディタには、「段落」や「見出し」「画像」など記事を作成するのに必要なブロックが最初から用意されていますが、[Genesis Custom Blocks]では、オリジナルで作成したブロックを追加できます。

ブロックビルダーを使用して新しいカスタムブロックを作成する

[新しく追加する]をクリック
ビルダーはデフォルトで開きます。
まず、[ブロックタイトル]に、このブロックの名前を入力します。
この名前はサイト管理者と編集者に表示されるため、このブロックの使用目的が明確な名前を使用することをお勧めします。

ブロック設定を構成する

スラッグ:スラッグは、ブロックに付けた名前に基づいて自動入力されます。このスラッグは、後でブロックテンプレートを作成するときに重要になります。
アイコン:このブロックを表すアイコンを選択します。このアイコンにより、ユーザーは WordPress エディターのブロックセレクターでブロックを見つけやすくなります。
カテゴリ:矢印をクリックしてデフォルトのブロックカテゴリのリストから選択するか、カスタムカテゴリを追加します。エンドユーザーがプラスボタンをクリックしてブロックライブラリを開くと、表示されるブロックがテキスト、メディア、デザイン、ウィジェットなどのカテゴリに分類されます。組み込みカテゴリの 1 つを使用してカスタムブロックを分類できます。新しいカテゴリを作成できます。
キーワード:ブロックにキーワードをいくつか指定します (最大 3 つ)。キーワードを使用すると、ユーザーは WordPress エディターのブロックセレクターでブロックを検索しやすくなります。
ブロックフィールドをその場でレンダリングする代わりにモーダルで開く: カスタムブロックのエディターフィールドをモーダル (投稿またはページエディター内) で表示したい場合は、このボックスをチェックしてオプションを有効にします。このオプションは、モーダルを使用するとユーザーがコンテンツをフィールドに簡単に追加できるため、多数のエディターフィールドを含むブロックを構築する場合に便利です。注:モーダルにはエディターフィールドのみが表示され、インスペクターフィールドは表示されません。
投稿タイプ:チェックボックスをオンにすると、このブロックが各投稿タイプに表示されるようになります。たとえば、[投稿] のチェックを外すと、ブロックはどの投稿にも表示されなくなります。

ブロックフィールドを追加する

ブロックフィールドを使用すると、ユーザーの投稿にブロックを追加するときにユーザーに表示されるオプションを定義できます。

フィールドは、ブロックを使用するたびに異なるデータのポイントです。たとえば、ボタンブロックを作成している場合は、ボタンのテキストとリンク URL のフィールドを含めることができます。

以下で説明するように、フィールドの場所を選択し、新しいフィールドを追加します。

①フィールドの場所:このフィールドを表示する場所を選択します。

　○エディターフィールドでは、 投稿またはページのメイン編集領域にフィールドが表示され　　ます。

　○インスペクターフィールドは、 ブロックインスペクターの下の右側のサイドバーにフィール　　ドを表示します。

②フィールドの追加:プラス記号をクリックして、新しいフィールドをブロックに追加します。

これで、以下で説明するようにフィールドを設定する準備が整いました。

①フィールドラベル:ブロックを投稿に追加するときに入力フィールドの横に表示されるフィールドラベルをフィールドに指定します。

②フィールド名 (スラッグ):フィールド名はフィールドラベルに基づいて自動入力されますが、カスタマイズできます。これは、ブロックテンプレートの一部として PHP で使用されます。

③フィールドタイプ:フィールドのフィールドタイプを選択します。これは、ブロックを追加するときにユーザーに表示される入力のタイプです。タイプに応じて、追加のオプションが利用可能になります。

④フィールドの場所:フィールドを表示する場所を選択します。

エディターは、投稿またはページのメイン編集領域にフィールドを表示します。
インスペクターは、ブロックインスペクターの下の右側のサイドバーにフィールドを表示します。

⑤フィールドの幅:フィールドを表示する幅を選択します。

⑥ヘルプテキスト:ユーザーが投稿にブロックを追加するときにフィールドに入力する必要がある情報を理解するのに役立つテキストを入力します。

⑦残りのオプションは、上記の③で選択したフィールドの種類によって異なります。上の例では、テキストフィールドを追加しているため、画像に示されている追加オプションはこのテキストフィールド ( [デフォルト値]、[プレースホルダーテキスト]、および[文字数制限] ) にのみ適用されます。これらのオプションは必要に応じて構成できます。

テンプレートエディターを使用してブロックテンプレートを作成する

ブロックビルダーを使用してブロックを作成し、ブロックとフィールドの設定を構成したので、組み込みの テンプレートエディターを使用して、カスタムブロックを適切に表示できるようにする必要なブロックテンプレートを作成する準備が整いました。

①テンプレートエディター: ここで、必要なテンプレートを作成します。 テンプレートエディターは、HTMLマークアップ、フィールド名 (2 つの括弧で囲まれたもの)、および CSS のみを受け入れます。ロジック、ループ構文、変数の定義、または PHP の使用が必要な場合は、テンプレートを手動で作成できます。

②エディタープレビュー: エディターのプレビューを使用すると、バックエンド (つまり、投稿またはページエディター内) でブロックがどのように表示されるかを確認できます。

③フロントエンドプレビュー: フロントエンドプレビューを使用すると、バックエンドのブロックフィールドにデータが入力された後にブロックがどのように見えるかを確認できます。 更新されたフロントエンドプレビューを表示するには、ブロックにデータを入力し、保存または公開します。

④マークアップ: テンプレートで使用する HTML を入力します。マークアップにフィールドを追加するときは、フィールドのスラッグを 2 つの括弧で囲みます。例えば：{{field-name}}。また、 WordPress ブロックインスペクター (サイドバー) に組み込まれている追加の CSS クラス フィールドをサポートするラッパーをテンプレートに含めることをお勧めします。

⑤CSS: [CSS] タブをクリックして、ブロックのスタイルに使用する CSS を入力します。 ここに入力した CSS は、ブロックが表示されるページでのみレンダリングされるため、Web サイトの全体的なパフォーマンスには影響しません。