WordPress用Gutenbergビルダーのステップバイステップガイド

私が言うとき、あなたは同意するでしょう:このグーテンベルクのビジネス全体は混乱しています.


まず、新しいブロックエディターは使いにくいですか、それとも何ですか?つまり、お気に入りのすべてのツールがどこに行ったのかはわかりません。投稿を作成するのに時間がかかったと思います?

リンク(アフィリエイトかそれ以外)を追加すると、ひどい曲線が表示されて、がっかりしました。テキストの横に画像を追加するときに問題が発生した可能性があります.

おそらく、複数の列を追加しようとしたが、期待どおりに機能しなかった。そうでない場合は、PDFファイルを簡単に追加できないか、恐ろしい「更新失敗」メッセージが何度か表示されます。.

まあ、もう心配しないでください。私は少し前にあなたの正確な立場にいましたが、今ではグーテンベルクを使用するスリルを感じています。はい、学習曲線はありますが、今日の投稿の終わりまでに、グーテンベルクについて別の考え方をするでしょう.

グーテンベルクエディターとは?

ワードプレスグーテンベルクエディター

デフォルトのWordPressブロックエディターであるGutenbergを表示しています

WordPress 5.0以降を使用している場合は、Gutenbergとして知られている新しい光沢のあるWordPressエディターに出会ったことでしょう。.

そして、他の多くのユーザーと同じように、革新的なエディターを使用したいのですが、グーテンベルクは 複雑です.

あるいは、グーテンベルクに初めて会ったとき、さまざまなことがうまくいかなかったかもしれません。結局のところ、開発者はテーマとプラグインをブロックエディターと互換性のあるものにし続けています.

だから、あなたはすぐに戻った クラシックエディター, ところで、これは問題ありません。 WordPressは2022年以降、Classic Editorをサポートしないことに注意してください。さらに、Gutenbergが提供するその他すべての優れた機能を利用できません。.

機能面では、Classic EditorとGutenbergは同じことを行います。どちらのツールもコーディングなしでコンテンツを作成するのに役立ちます.

ただし、私たちは古いWYSIWYGエディターに慣れているため、まったく混乱しないとしても、新しいGutenberg UIへの適応は少し異質であることがわかります。少なくともそれは私が思うことです.

しかし、正確にはグーテンベルクとは?

Gutenbergは新しいデフォルトのWordPressエディターです。従来のビジュアル/テキストエディターとは異なります。グーテンベルクは、現代の多くのページビルダーと同じようにコンテンツブロックを使用しています.

クラシックエディターよりも直感的な機能が付属しているため、リッチメディアコンテンツをオンザフライで作成できます。 WordPressの投稿とページのどちらを操作していても、並外れたレイアウトをすばやく作成できるようになりました.

そして、いくつかのアドオンを使用して、GutenbergはBrizy、Elementor、Diviなどの確立されたWordPressページビルダーと有利に競合できます。.

唯一の欠点は、ページビルダーが主にページビルダーであるため、多くの場合、より多くの機能を提供することです。同時に、Gutenbergはまだ非常に若いため、ブロックエディターは飛躍的に成長することが期待できます。.

今日の投稿では、グーテンベルクエディターでWordPress投稿を作成するエキサイティングな時間を過ごします。 Gutenbergを使用してプロのようなコンテンツを作成できるように、細部や機能をすべてカバーすることを目指しています.

準備はできたか?もしそうなら、そのワードプレスの投稿を作成しましょう.

グーテンベルクでワードプレスの投稿を作成する方法

WordPressのWebサイトを運営している場合は、ページよりも多くの投稿を作成することになります。次のセクションでは、グーテンベルクでWordPressの投稿を最初から作成します。私がグーテンベルクをテストしたときと同じくらい楽しんでくれることを願っています.

邪魔にならないように、 投稿>新規追加 下のスクリーンショットで強調しているように.

グーテンベルクで新しい投稿を作成する

これにより、以下に示すGutenbergエディターに直接移動できます。.

ワードプレスグーテンベルクエディター

かなりきちんとね?今、それらの袖をまくってビジネスに取り掛かりましょう.

タイトルを追加する

グーテンベルクに新しいタイトルを追加する

しっかりとしたタイトルなしに投稿を書くことはできません。良いことは、グーテンベルクがタイトルを付けるのを信じられないほど簡単にすることです.

あなたが見る最初のブロックは 題名 上の画像で詳しく示しているように、ドキュメントの上部にあります。投稿のタイトルを作成するには、ブロック内に入力します。 A、B、Cのように単純.

パーマリンクを編集する必要がありますか?あなたは簡単にそれを行うことができます 題名 をクリックしてブロックする 編集する 下に示すボタン.

グーテンベルクの投稿パーマリンクを編集

タイトルを追加したら、 入る 新しい行を開始するキー。そうそう、グーテンベルクは、クラシックなWordPressエディターで愛していたネイティブナビゲーションを保持します.

新しい段落を追加する

グーテンベルクの新しい段落ブロック

を打つ 入る キーが新しい 段落 上記のようにブロックします。テキストを入力する前に、ブロックにはいくつかのオプションが表示されます。詳細については、下の番号付き画像を参照してください.

新しい段落ブロックオプションgutenberg

ノート。あなたはできる:

  1. 新しい段落ブロックを他のブロックに変換します(例:画像、見出し、カバー、ギャラリー、WooCommerce、フォームなど)。.
  2. ショートカットを使用して段落ブロックを画像ブロックに変更します
  3. 段落ブロックを見出しブロックに変更します(H2、H3、H4など)。
  4. 段落ブロックをカバー画像ブロックに変換します

説明のために、ポスト紹介の最初の段落を予約します。テキストを追加すると、以下に示すような書式設定ツールバーが表示されます.

グーテンベルク段落書式ツールバー

書式設定ツールバーのおかげで、次のことができます。

  • 段落を詩、引用、見出し、リスト、コード、および書式設定済みのテキストに変換します
  • 大胆な, 斜体, 取り消し線, そして 下線 コンテンツ
  • テキストを左揃え、右揃え、中央揃え、両端揃え
  • 新しいタブで開くこともできるリンクを追加する
  • インライン画像を挿入します(はい、存在します!)
  • ブロック設定を非表示
  • ブロックを複製する
  • 現在のブロックの前または後にブロックを挿入します(この場合、それは最初の段落ですので、前には何も追加しませんでした。後だけです)。必要に応じて、最初の段落の前にカバーイメージブロックを追加できます。良い
  • ブロックをHTMLとして編集する
  • 現在のブロックを再利用可能なブロックに追加して、他の投稿で使用できるようにします
  • ブロックを完全に削除します

で利用可能なオプションを使用して、段落ブロックをさらにカスタマイズできます。 ブロック 以下に示すように、サイドバーメニューにあるタブ.

段落ブロックのgutenbergサイドバーオプション

上記の画像に関するいくつかのメモ:

  1. を選択します ブロック すべてのブロックオプションと設定を表示するには、ここにタブを付けます
  2. フォントサイズを選択し、ここでドロップキャップをアクティブにします
  3. 段落に背景色を追加します。説明のために青に設定しました。テキストの色をカスタマイズすることもできます。どちらの場合も、無制限のカスタム色を追加できます
  4. ここにカスタムCSSクラスを追加できます。つまり、ブロックにCSSスタイルを追加できます。
  5. 青い背景とドロップキャップはグーテンベルクエディターで既に適用されています

サイドバーのドキュメントタブ

サイドバーメニューには別のタブがあります。の 資料 以下に示すようなタブ.

段落ブロックサイドバードキュメントタブ

ここで、上の画像のメモ:

  1. ここをクリックして、 資料 タブ
  2. ここで、投稿のスケジュールを設定し、公開設定を次のいずれかに設定できます 民間 または 公衆, に投稿を設定 保留中のレビュー ステータス、投稿形式を選択し、固定投稿を作成します
  3. このセクションでは、パーマリンクを編集できます
  4. ここで新しいカテゴリを選択または作成できます
  5. 投稿にタグを追加する
  6. 注目画像を設定
  7. 手動で抜粋を作成する
  8. コメント、ピンバック、トラックバックを許可する

ご覧のとおり、段落ブロック(および投稿全体)を好きなようにデザインするためのオプションがたくさんあります。ちなみに、後で説明するように、ブロックごとに設定が異なります。.

最初の段落の後、 入る もう一度キーを押して、新しい行(または段落ブロック)を作成します。では、最初の段落の下に画像を追加しましょう.

グーテンベルクでの画像の追加

グーテンベルクに新しい画像を追加する

彼らは、写真は千の言葉を話すと言い、画像のないブログ投稿はまあまあです。 Gutenbergを使用してWordPress投稿に画像を追加するには、いくつかのオプションがあります.

あなたがヒットしたとき 入る 少し前にキーを押して、新しい段落ブロックをトリガーしました。グーテンベルクは直感的であるため、下の画像で強調表示されているように、プラス(+)、画像、またはカバーのアイコンをクリックして画像を追加できます。.

gutenbergエディターで新しい画像を追加する

いくつかのメモ:

  1. プラス(+)アイコンで画像を追加できます
  2. ここでは、簡単に画像を追加できます
  3. このオプションを使用すると、 カバー 画像(通常、これらは他の写真よりも大きいです。さらに、カバー画像にテキストを追加できます)

先に進み、プラス(+)アイコンのいずれかをクリックします。次に、 画像 以下に示すようなタブ.

グーテンベルクに画像を追加する

をクリックする 画像 タブは 画像 下のスクリーンショットに示されているブロック.

グーテンベルク画像ブロック

の 画像 ブロックを使用すると、画像をアップロードしたり、URLまたはメディアライブラリから画像を追加したりできます。このプロセスでは、メディア画面の設定を介して、ALTテキスト(SEOにとって重要)、キャプション、説明を追加できます。 ブロック 次の画像に示すサイドバー.

通常のメディア設定…

ワードプレスのメディア設定

…そしてその 画像 ブロック設定.

グーテンベルク画像ブロック設定

今日ここで何かを学んでいますか?そうだといい。次へ移りましょう.

画像を追加した後、グーテンベルクはそのすぐ下に新しい段落ブロックを追加します。何でも好きなように追加できますが、説明のために、テキストとその下のボタンを追加しました.

ダウンロード可能なファイルを追加する方法(例: PDF、画像、ビデオなど

Gutenbergを使用すると、ダウンロード可能なファイルをWordPressの投稿またはページに非常に簡単に追加できます.

新しいで 段落 ブロックし、プラス(+)アイコンをクリックして、 共通ブロック とヒット ファイル 以下でハイライトするタブ.

ダウンロード可能なファイルをグーテンベルクに追加する

これにより、次のブロックが起動します。

グーテンベルクファイルブロック

から ファイル ブロックすると、新しいファイルをアップロードしたり、メディアライブラリからファイルを追加したりできます。ファイルを追加した後、グーテンベルクはかわいいを追加します ダウンロード 下の画像のようにボタンを自動的に.

グーテンベルクにファイルを追加する

オプションをいじってみてください。たとえば、「無料のグーテンベルクPDFチェックリスト」のタイトルと ダウンロード ボタン。 CSSクラスをブロックに追加して、好きな方法でスタイルを設定できます.

グーテンベルクでの見積もりの​​追加

次に、魅力的でキャッチーで、要点を理解するのに役立つので、引用を追加しましょう。新しい行で、プラス(+)記号をクリックし、次の場所に移動します。 共通ブロック とヒット 見積もり 以下に示すようなタブ.

グーテンベルクに引用符を追加する

そうすることで、 見積もり 下のスクリーングラブでハイライト表示するときに投稿をブロックします.

グーテンベルク見積もりブロック設定

上の右側のサイドバーの見積もりブロック設定に注意してください?

見積もりを追加するには、ブロック内に入力します。これが私の結果です.

グーテンベルク引用

信じられないほど右に見える?

グーテンベルクへのメディア埋め込みの追加

グーテンベルクには、YouTube、Vimeo、Facebook、SoundCloud、WordPress、Slideshareなどの30以上のサイトからのビデオやその他のメディアを埋め込むためのいくつかのブロックが付属しています.

コンテンツを埋め込むには、プラス(+)アイコンをクリックして、 埋め込み, サイトを選択します。たとえば、以下に示すように、YouTubeが欲しかった.

グーテンベルクyoutube埋め込み

次に、YouTubeビデオのURLをコピーして貼り付け、 埋め込む 下の画像に示すボタン.

グーテンベルクYouTube埋め込みブロック

あなたがヒットするとすぐ 埋め込む ボタンをクリックすると、グーテンベルクはリンクを自動的にビデオに変換します。.

グーテンベルクに埋め込まれたYouTubeビデオ

スムーズにセーリング。次に、行動を促すフレーズ(CTA)の作成に最適なスタンドアロンボタンを追加します.

グーテンベルクでボタンを追加する方法

この時点でブロックを追加するのに苦労する必要はありません。プラス(+)をクリックして、ブロックを選択します。それよりも簡単なことはありません.

それで、ボタンをどのように追加しますか?

新しい行(またはブロック)で、プラス(+)アイコンをクリックし、 レイアウト要素 をクリックして ボタン 以下に示すようなタブ.

gutenbergエディターでのボタンの追加

そうすることで、 ボタン 以下で詳しく説明するようにブロックする.

gutenbergエディターでのボタンの追加

上の画像からわかるように、ボタンのテキストを編集してリンクを追加できます。さらに、画面右側のサイドバーメニューからボタンをカスタマイズできます.

数回クリックした後、ここに私が得たものがあります.

グーテンベルクボタンの例

ちなみに、ボタンに読みにくい色の組み合わせを使用すると, グーテンベルクはすぐにあなたに知らせます. なんて素敵?

グーテンベルクに列を追加する方法

美しいボタンを配置したら、いくつかの列を追加しましょう。 2つの列を追加するので、注意深く従います.

ここで何をすべきかです。プラス(+)アイコンをクリックして、 レイアウト要素 をクリックして カラム 下の画像にあるタブ.

列タブグーテンベルクエディター

Gutenbergはデフォルトで2つの列を追加します。下の画像を参照してください。覚えていると思いますが、すでに列にコンテンツを追加しています。.

ワードプレスエディターのグーテンベルク列

これは私を捕まえます:

gutenbergカラムフロントエンド

数秒間の作業では悪くありません。しかし、おそらく列を作成したくないでしょう。テキストの横に画像を表示したいかもしれません.

そのためのブロックはありますか?はいあります!

グーテンベルクのテキストの横に画像を追加する方法

テキストの横に画像を追加しようとしていますか?もしそうなら、あなたは次のセクションを気に入るはずです.

通常どおり、プラス(+)アイコンをクリックして、 レイアウト要素 そしてクリック メディアとテキスト 以下に示すように.

メディアとテキストのグーテンベルクブロック

あなたは見るべきです メディアとテキスト 以下に示すように、ブロック.

メディアとグーテンベルクのテキストブロック

次に、画像/ビデオ/メディアをアップロードするか、メディアライブラリから追加します。その後、下の画像に示すように、メディアの横にテキストを追加します.

私は遊んだ メディアとテキスト ブロック、そして私は次のことを思いつきました。ご注意ください。私もそこにボタンを押し込むことができました��

メディアとテキストブロックが完全に機能

ああ、それがバックエンドです!フロントエンドをお見せしましょう。ここに:

グーテンベルクのメディアテキストブロック

とてもプロフェッショナルに見えますよね? Gutenbergエディターでどれだけ達成できるか想像できます。.

サードパーティのグーテンベルクブロック

WordPress開発者は、テーマとプラグインをGutenbergエディターと互換性を持たせることに熱心です。いくつかの例には、WooCommerce、Jetpack、Yoast SEOなどがあります。.

たとえば、WooCommerceブロックをWordPress投稿に追加できます。まず、WooCommerceをインストールしてアクティブ化する必要があります.

次に、新しい行で、プラス(+)アイコンをクリックして、 WooCommerce 以下に示すように、希望するブロックを選択します.

woocommerce gutenbergブロック

これが何を意味するか知っていますか?それはあなたがほんの数分でリッチメディアと素晴らしい投稿とページを作成できることを意味します.

その他の注目すべきブロック

すでに2,000語を超えています。これを続ければ、eBook全体を書くことになります。私の祈りは、あなたが今しゃっくりなしでグーテンベルクを使うことができることです.

邪魔にならない、これが他の利用可能なブロックのリストです.

  • ウィジェット –ウィジェットのコンテンツをブログ投稿に追加できます
  • ショートコード –ネイティブのWordPressショートコードを引き続き使用できます
  • クラシック –古いコンテンツを保持する優れたブロック
  • もっと –ブロックは以前は 続きを読む 鬼ごっこ
  • 改ページ、セパレーター、スペーサー
  • カスタムHTML、プルクォート、テーブル
  • ギャラリー そして HTML5オーディオ/ビデオ
  • そして、使用するテーマとプラグインに応じて、はるかに多くの

余談: WordPressページを作成することは、わずかな違いを除いて投稿を保存することと似ているため、本日は詳しく説明しません。.

クイックグーテンベルクハックとキーボードショートカット

Gutenbergには、さらに簡単にするいくつかのハックとキーボードショートカットが付属しています。たとえば、段落ブロック内に「/」と入力すると、ブロックのリストが表示されます.

バックスラッシュ(/)の後にブロックのタイトルを入力して特定のブロックを選択することもできます。たとえば、「/ image」と入力すると、他の画像関連ブロックの中で画像ブロックが表示されます。詳細については、下の画像を参照してください.

グーテンベルクバックラッシュショートカット

キーボードショートカット: 利用可能なすべてのショートカットを表示するには、 SHIFT + ALT + H Windowsおよび OPT + CTRL + H Macで.

ドキュメントの上部で、以下に示すように(i)アイコンをクリックすると、ドキュメントの構造を確認できます.

グーテンベルク文書構造

いいね。非常に滑らか.

あ、ちなみに、「Update Failed」エラーは通常、不安定なインターネット接続が原因で発生します��


あなたと私の間で、グーテンベルクは素晴らしいコンテンツエディターです。ロープを学ぶ気があるなら。将来のWordPressエディターから多くを得ることができます.

グーテンベルクはまだ比較的若いので、使いやすさと機能性の面で成長すると期待できます。これは、今後数日間で考慮すべき深刻な力になるでしょう。ページビルダーは気をつけないと、ビジネスを使い果たしてしまいます��

Gutenbergエディターへのステップバイステップガイドが、物事を全体像に導くのに役立つことを願っています。これで、ブロックエディターを使用してプロのようなコンテンツを作成できると思います.

懸念事項、考え、質問は、下のコメントセクションで共有してください.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me