ブロックを使用してカスタムWebサイトを作成する方法に関するWordPressGutenbergチュートリアル

これは、新しいブロックエディターを使用してWordPressWebサイトを作成した豊富な経験を持つWeb開発者によって書かれたWordPressGutenbergチュートリアルです。

このガイドでは、コンテンツテンプレート、アーカイブ、カスタム検索を含む複雑なWebサイトを作成する方法を紹介します。 GutenbergおよびToolsetBlocksとして知られるWordPressBlock Editorを使用して、Webサイトを構築します。

グーテンベルクがウェブサイトを構築するための優れた方法である理由

グーテンベルクは1年近く外出しており、十分に成熟しているため、計画した正確なWebサイトを設計するための優れた信頼できる方法になりました。

グーテンベルクはブロックを使用してページを作成します。 ブロックは、さまざまなタイプのコンテンツを含む要素であるため、レイアウトを作成できます。

ブロックエディタはまだ進化していますが、すでに信じられないほど直感的で柔軟性があります。 コンテンツを作成するためにコーディングの専門家である必要はありません。 さらに、ツールセットブロックなどのプラグインと組み合わせると、見栄えのする複雑なWebサイトを簡単に作成できます。

グーテンベルクはまた、前任者よりもモバイルでの使用がはるかに簡単です。 私たちが携帯電話で行う作業の量が増えていることを考えると、それは正しい方向への重要な一歩です。

グーテンベルクで使用するのに最適な種類のテーマ

Gutenberg Block Editorと互換性があり、他のプレミアムプラグインもサポートするプレミアムWordPressテーマがたくさんあります。

グーテンベルクと互換性のある30以上のWordPressテーマのリストをチェックすることで、最高のテーマをすばやく調べることができます。

グーテンベルクで使用するのに最適なブロックプラグイン

1年以上前のグーテンベルクの発売以来、新しいWordPressエディターを補完する多くの優れたプラグインがリリースされています。

WordPress Gutenbergチュートリアルでは、ツールセットブロックとGutenbergを使用してWordPressWebサイトを構築します。 Toolset Blocksには、コーダーと非コーダーの両方がWebサイトをすばやく設計および実装するのを容易にする多くの利点があります。

• ワークフローははるかに簡単になります。 これで、ページをデザインして実装する必要はありません。 WordPressでビルドするだけで、どのように表示されるかをすぐに確認できます。
• バックエンドとフロントエンドを切り替える必要はありません。 代わりに、バックエンドでテンプレートをデザインするだけで、テンプレートがどのように表示されるかをすぐに確認できます。
• 非開発者は彼らの夢のウェブサイトを構築することができます。 必要なWebサイトを作成するために、コーディングの専門家である必要はありません。 ブロックを使用すると、htmlやcssを使用せずに複雑な要素を自分で簡単に追加できます。
• ドキュメントを読む時間を短縮します。 ツールセットブロックのシンプルで直感的な性質は、特定の要素を構築する方法を理解するためにドキュメントの山を読む必要がないことを意味します。 ブロックの多くは、達成できることを説明しており、簡単に使用および実験できます。
• サードパーティのプラグインとの統合はこれ以上ありません。 従来のWordPressエディターでは、ページビルダーと追加の互換性のあるプラグインをインストールする必要がありました。 これにより、Webサイトが肥大化し、大幅に遅くなる可能性があります。 また、サードパーティがプラグインを更新して安全に保つことに依存しています。 Toolset BlocksはGutenbergおよびWordPressと統合されているため、同じ問題は発生しません。
• WordPressコアと同じワークフローに従います。 新しいWordPressエディターの操作方法を変更することを心配する必要はありません。

ブロックを使用してカスタムWebサイトを構築する方法に関するWordPressGutenbergチュートリアル

これで、カスタムWebサイトの構築を開始できます。 例として、お住まいの地域で最高のジムやパーソナルトレーナーを検索するために使用できるデモWebサイトを作成します。

このWordPressGutenbergチュートリアルで取り上げる内容は次のとおりです。

• ブロックの追加、編集、移動、削除
• コンテンツを並べて表示する
• ブロック内を移動する
• ブロックエディタデザインでのフィールドの表示
• 画像ギャラリーの表示
• エディターでのツールセットブロックのスタイリング
• タイポグラフィコントロール
• テンプレートの作成
• アーカイブページの作成
• コンテンツのカスタムリストの作成
• カスタム検索の追加

始めましょう！

ブロックの追加、編集、移動、削除

まず最初に、ブロックを作成および削除する方法の基本を見ていきましょう。 ブロックはウェブサイトを構築するまったく新しい方法ですが、それらに慣れるのに数分しかかからないはずです。

1. ページまたは投稿で、[+]ボタンをクリックします。
2. 使用するブロックを検索してクリックし、挿入します。

3.ブロックのコンテンツ情報を入力します。 たとえば、ここでは「Heading」ブロックを追加し、そのタイトルを挿入します。
4.各ブロックの左側に、ブロックを移動するために使用できる一連のコントロールが表示されます。

5.右側のサイドバーを使用して、選択したブロックのオプションを変更します。 たとえば、フォントの色、画像サイズ、テキストの配置を変更できます。
6. 3ドットのオプションをクリックすると、ブロックの削除などの追加オプションが表示されます。

コンテンツを並べて表示する方法

columnsブロックを使用すると、ページ上でコンテンツを簡単に並べて表示できます。

1. +ボタンを選択します。
2. Columnsブロックを検索し、挿入します。

3.これで、通常どおりブロックを追加できる2つの列が表示されます。

4.列ブロックを選択し、右側のバーの数を切り替えて、列の数を増やします。

ブロック内を移動する

あなたがあなたのサイトを構築するとき、あなたのデザインとテンプレートのいくつかはたくさんのブロックを持っているでしょう。 編集するブロックを選択する最も簡単な方法の1つは、エディターの上部にある[ブロックナビゲーション]ボタンを使用して、操作するブロックを選択することです。

ブロックエディタのデザインにフィールドを表示する

投稿フィールド（タイトル、本文など）から、またはツールセットブロックを使用して作成したカスタムフィールドから情報を表示できます。

フィールドを表示する方法は3つあり、WordPressGutenbergチュートリアルの一部として以下に概説します。

1. フィールド値から取得するようにブロックコンテンツを設定します

ツールセットブロックライブラリの各ブロックでは、フィールドからコンテンツを設定できます。 たとえば、任意の見出しテキストを投稿フィールドまたはツールセットカスタムフィールドから取得するように設定できます。

投稿フィールドからパーソナルトレーナーのツールセット見出しブロックに見出しテキストを追加して、どのように機能するかを以下で見てみましょう。

1. 新しいコンテンツテンプレートを作成し、表示するカスタム投稿タイプを選択します。
2. +ボタンを選択します。
3. ツールセット見出しブロックを追加します。

4.動的見出しテキストをオンにします。

5.表示する投稿フィールドを選択します。 以下で投稿タイトルを選択しました。

これで、特定のカスタム投稿タイプに関連する各投稿の正しいタイトルを確認できるようになります。

2.フィールドを個別のブロックとして表示します

ツールセットをブロックとして使用して作成された任意の投稿フィールドまたは個々のカスタムフィールドを表示できます。 たとえば、以下では、メインの投稿コンテンツをジムのテンプレートに追加しています。

1. シングルフィールドブロックを選択します。
2. [フィールドタイプ]の下の右側のサイドバーで、[標準]フィールドを選択します。
3. [投稿フィールド]で、 [投稿コンテンツ（本文） ]オプションを選択します。

各ジムの説明は、それぞれの投稿に表示されます。

3.1つのブロックでフィールドとテキストを組み合わせる

デザインにフィールドとテキストを組み合わせて追加する必要がある場合があります。 例として、カスタムフィールドの横にラベルを追加する必要がある場合があります。

1. フィールドとテキストブロックを選択します。

2.追加するラベルを入力します。 たとえば、5点満点の各ジムのスコアを表示する[評価]カスタムフィールドの結果を表示したいので、「評価」を追加しました。

3.アイコンから、追加するコンテンツのタイプを選択します。 フィールド、フォーム、または条件付き出力を追加できます。 この場合、フィールドを追加します。

4.追加するコンテンツ（私の場合は[評価]フィールド）を選択し、[ショートコードの挿入]をクリックします。

画像ギャラリーを表示する

ブロックを使用して、投稿に複数の画像を追加することもできます。

1. [繰り返し]フィールド/ [ギャラリー]ブロックを選択します。

2.表示するカスタムフィールドグループを選択します。
3.表示するカスタムフィールドを選択します。

エディターでのブロックのスタイリング

あなたが念頭に置いていたウェブサイトを作成しているとき、あなたはあなたのブロックをスタイリングする必要があるでしょう。 たとえば、ブロックのフォント、色、背景、または余白を変更したい場合があります。

ブロックのスタイルを設定する方法は2つあります。

1. インターフェイスを使用したアイテムのスタイリング

1.スタイルを設定するブロックを選択します。 たとえば、前に追加したRatingsブロックを選択しました。
2.サイドバーの[スタイル設定]セクションを展開します。
3.ここでは、背景色、パディング、境界線などを調整できます。

もちろん、各ブロックは異なるスタイリングオプションを提供します。 たとえば、画像ブロックには、画像の位置、ぼかし、回転量を調整する機能など、いくつかの追加のカスタマイズ機能が含まれます。

2.コンテナブロックの使用

コンテナブロックは、ツールセットブロックでのみ見つけることができるブロックです。 コンテナブロックを使用して、特定のブロックをグループ化し、各投稿に表示される特定のスタイルを各ブロックにグループ化します。

たとえば、コンテナブロックを追加して、パーソナルトレーナーのすべての関連情報を、画像、タイトル、評価などを含む1つの統一されたセクションにまとめて表示します。 これで、パーソナルトレーナーの各投稿に同じスタイルが表示されるように、コンテナーブロックのスタイルを設定できます。

繰り返しになりますが、右側のサイドバーを使用してこれを行うことができます。

タイポグラフィコントロール

ツールセットブロックを使用すると、タイポグラフィセクションを使用してテキストのスタイルとフォーマットを簡単に設定できます。

調整できるもののリストは次のとおりです。

• フォントタイプ–膨大な数のフォントから選択します
• フォントサイズ、行の高さ、および文字間隔
• フォントスタイル
• テキスト変換–大文字、大文字、小文字
• テキストの色
• テキストシャドウ

カスタム投稿を表示するためのテンプレートを作成する方法

カスタムWebサイト用に作成する必要がある最も重要な機能の1つは、テンプレートです。 テンプレートを作成すると、同じカスタム投稿タイプのすべての投稿のレイアウトとデザインが同じになります。

たとえば、「Gyms」カスタム投稿タイプの一部として表示する各ジムのテンプレートを設計できます。

1. [ツールセット] -> [ダッシュボード]に移動し、テンプレートをデザインする投稿タイプの[コンテンツテンプレートの作成]オプションをクリックします。

2.テンプレートへのフィールドの追加を開始する前に行ったように、 以下に、Heading、Image、Single Fieldブロックなど、すべてフィールドを含むさまざまなブロックを追加しました。

3.テンプレートを保存して公開すると、そのカスタム投稿タイプの各投稿に同じレイアウトとスタイルが表示されます。

アーカイブページの作成

アーカイブは、WordPressが生成するカスタム投稿タイプごとのコンテンツのリストです。 ツールセットブロックとグーテンベルクを使用して、各アーカイブページの外観をカスタマイズできます。

以下では、WordPress Gutenbergチュートリアルの一部として、「ジム」カスタム投稿タイプのアーカイブを作成しました。

1. [ツールセット] -> [ダッシュボード]に移動し、アーカイブを作成する投稿タイプの横にある[アーカイブの作成]オプションをクリックします。

2.ブロックエディタで、投稿ごとに表示するさまざまな要素を追加できるようになりました。 たとえば、ツールセットブロックを使用して、すべての標準フィールドとカスタムフィールド（「ジム」カスタム投稿タイプ用に作成した評価、住所、投稿タイトルなど）を表示できます。

3.列数を変更するには、[ブロックナビゲーション]オプションをクリックして、 WordPressアーカイブループを選択します。
4. [ループスタイル]で、列数を調整できます。

5. WordPressアーカイブブロックの下で、ページネーション、順序付けなど、アーカイブのデフォルト設定にいくつかの変更を加えることもできます。

6.投稿を表示するメインアーカイブループの前後に、カスタムテキストやその他のブロックを追加することもできます。 ループの前後で+アイコンをクリックするだけで、ブロックまたはテキストを追加できます。

コンテンツのカスタムリストを表示する

ツールセットブロックとグーテンベルクを使用して、投稿を任意の順序でリストとして表示できます。 グリッド、単純なHTML、テーブル、その他の方法など、好きな方法でリストをデザインすることもできます。 ツールセットでは、このタイプのリストはビューと呼ばれます。

このリストは、任意のページに追加できます。 たとえば、以下に注目のジムのリストをホームページに追加しました。

1.ビューを追加するページの[+]ボタンをクリックします。
2. Viewsブロックを追加し、名前を付けます。
3.ビューに表示するコンテンツを選択します。 たとえば、ジムを展示したいと思います。

4.ビューの一部として表示するブロックを追加します。
5. [ナビゲーションのブロック]をクリックし、ビューを選択してサイドバーを使用すると、表示されるコンテンツなどの順序を編集できます。

6. [ビューループ]で、列数を含むビュー全体の設定数を変更できます。

カスタム検索を追加する

ビューに独自の検索を追加して、ユーザーがフロントエンドで関心のあるコンテンツを絞り込むことができます。 たとえば、ユーザーの検索を作成して、ユーザーに最も近い最高のジムを見つけることができます。

1. Viewブロックをページに挿入します。
2. ビュー作成ウィザードで[検索]オプションを有効にします。

3.次に、ビュー編集領域に検索フィールド、検索ボタンなどを追加できます。

4.右側のサイドバーを使用して、この検索フィールドのオプションを微調整できます。 これには、メインフィールドの設定とラベルおよびスタイルのオプションが含まれます。

これが、フロントエンドで最高のジムをカスタム検索する方法です。

今日からカスタムウェブサイトの構築を始めましょう！

このWordPressGutenbergチュートリアルを読んだ後、基本を理解したので、独自のカスタムWebサイトの設計と構築を開始できます。 今日WordPressとToolsetBlocksをダウンロードして、独自のWebサイトを簡単に作成できるかどうかを確認できます。

ご意見やご質問がございましたら、下のコメントでお知らせください！