WordPressデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方 (02)

この記事では、WordPressのデフォルトテーマとGutenbergエディタを使ってブログ記事を書く方法を紹介します。WordPressの組み込みエディタであるGutenberg Editorは、ブロックシステムを使用することで、柔軟で直感的なコンテンツ作成体験を提供します。WordPress初心者でも経験者でも、このガイドを読めば、Gutenbergエディターのパワーをフルに活用して、ブログコンテンツを簡単に作成・管理できるようになります。

1、メソッドの使用のブロック(ブロック

WordPressのGutenbergエディタでは、ブロックはあらかじめ用意された要素モジュールやウィジェットで、ユーザーがページや投稿にコンテンツを簡単に追加・設定できるようになっています。ブロックは、コンテンツ作成プロセスをより直感的で柔軟なものにするために、さまざまな機能をまとめています。

簡単な例を挙げよう。タイトル・ブロック は典型的なブロックです。タイトルブロックを使用すると、ユーザーはタイトルテキストを挿入できるだけでなく、タイトルのタグレベル(H1、H2、H3など)を設定したり、整列、フォントサイズ、テキスト色、背景色などをエディタで直接調整したりすることができます。これらの機能はすべて開発者によって Title Block に統合されており、ユーザーはコードを書いたり追加のプラグインを使用したりすることなく、これらのカスタム設定を実現できます。

また、Gutenberg Editorのブロックは、単純なテキストやキャプションだけではありません。画像ブロック、テーブルブロック、ボタンブロック、動画ブロックなど、より複雑なブロックも多数あります。これらの複雑なブロックは通常、より多くの機能を統合しており、ユーザーは様々なコンテンツレイアウトやデザインのニーズを簡単に実装することができます。

このモジュラーアプローチにより、Gutenbergエディターはユーザーに大きな柔軟性とコントロールを与え、コードを掘り下げたり、他の複雑なツールを使用したりすることなく、ニーズに合ったページや記事コンテンツを簡単に構築できるようになります。このアプローチは、ウェブサイトコンテンツの作成と編集のプロセスを大幅に簡素化するだけでなく、サイトのデザインをより豊かで多様なものにする。(下の写真)

画像[1] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

2、ブロック追加

Gutenbergエディタで、下の画像の矢印の位置をクリックすると、ブロックパネルが表示されます。このパネルには何十種類ものブロックが組み込まれており、初めて使うときには馴染みがないかもしれませんが、ひとつずつ追加してスタイルを確認することができます。しかし、WordPressではブロックのスタイルが制限されており、パラメータが比較的シンプルに設定されているため、すべてのニーズを満たすことができない場合があります。したがって、我々はそのようなKadenceブロック、スペクトラ、Getwidなどのいくつかの特別なプラグインをダウンロードすることにより、ブロックの数を拡張することができます。(以下に示すように)

画像[2] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応

3、ブロックスタイルを設定する

ブロックを選択すると、上部にスタイルや機能のオプションが表示されたツールバーが表示され、マウスカーソルを合わせるとテキストプロンプトが表示されます。右側のブロック編集エリアでは、色やフォントなどのスタイル設定ができます。必要に応じてこれらの設定を自由に変更し、希望のデザイン・スタイルを実現することができます。下図

画像[3] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

4、コンバート・ブロック

Gutenberg Editorでは、いくつかのブロックを相互に変換することができ、古いブロックを削除して新しいブロックを追加する手順を繰り返すことを避けることができます。特に段落ブロックは、複数種類のブロックへの直接変換に対応しており、文章作成時の利便性が大幅に向上しています。

変換」 ボ タ ンは 「ブ ロ ッ ク を ド ラ ッ グ」 ボ タ ンの左隣にあ り ます。特定のブ ロ ッ ク が変換に対応 し ていない と き は、 そのブ ロ ッ ク が対応 し てい る ス タ イルオプシ ョ ンだけが表示 さ れます。(下記の よ う に)

画像[4] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルなリーチ、迅速な対応

5、モバイルブロック

追加されたブロックの位置を入れ替える必要がある場合もあるが、これには2つの方法がある:

モード1左側の構造ビューでブロックを選択し、目的の位置までドラッグします。

モード2ブ ロ ッ ク の上にあ る ツールバーの 「ド ラ ッ グ」 ボ タ ン を長押し し て、 ブ ロ ッ ク を適切な位置に移動 さ せます。

こ れ ら の ど ち ら の方式 も 、 ド ラ ッ グにおけ る 領域の入れ替えに対応 し てい ます : 構造カ タ ロ グ領域のブ ロ ッ ク を内容編集領域に ド ラ ッ グ し て位置を調整す る こ と がで き ます し 、 内容編集領域のブ ロ ッ ク を こ の方式で入れ替え る こ と も で き ます。(下図のように)

画像[5] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルなリーチ、迅速な対応

6、コンビネーション・ブロック

管理を容易にするために、関連する複数のブロックをまとめることができる。
方法:左の構造パネルで、カテゴリー分けが必要なブロックをすべて選択し、ツールバーの省略記号をクリックし、「結合」を選択する。(下図のように)

画像[6] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルなリーチ、迅速な対応

7、再利用可能なブロックを作る

ブロック・サンプルの製造

ブ ロ ッ ク の ス タ イ ルを設計す る と 、 他のページで も 同 じ ス タ イ ルを使 う 必要が生 じ る こ と があ り ます。こ の場合、 そのモジ ュ ールは再利用可能なブ ロ ッ ク (テ ンプ レー ト と 同様) に変換す る こ と がで き ます。た と えば、 「写真 + ボ タ ン」 ブ ロ ッ ク を他のページで再利用 し たい と き は、 画像 と テ キ ス ト を変え る だけで よ いので、 作業量が大幅に軽減 さ れます。

方法:リストビューで、再利用したいモジュールを選択し、ツールバーの右端にある省略記号をクリックし、「ブロックサンプルを作成」(旧名称:再利用可能ブロックに追加)を選択し、わかりやすい名前を付けます。2種類の再利用可能ブロックを作成することができます:

  1. サイト全体の同期変更に再利用可能なブロック(同期オン): あるページのスタイルや内容を変更すると、そのブロックを使用している他のすべてのページが自動的に更新されます。
  2. 非同期変更のための再利用可能なブロック(非同期化)新しいページでこのブロックを変更しても、他のページには影響しません。

ニーズに応じて適切なモードを選択します(通常は、非同期変更で再利用可能なブロックを選択します。)(下図のように)

画像[7] - WordPressデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応
画像[8] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応

サイト間で同期される再利用可能なブロックが保存されている場合、このブロックの色は自動的に次のように変わります。すみれいろ私たちが識別するのは簡単だ。

バージョン6.3以降、WordPressはGutenbergエディタにテンプレート機能を追加しました。テンプレート.

私たちは、このプロジェクトで登場する再利用可能なブロックを自分たちで作っている。マイ・ブロック・スタイルで。次に使うときは、ここで探してください。(下図のように)

画像[9] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

また、ページの編集エリアでこの再利用可能ブロックを選択し、「管理モード」をクリックすると、再利用可能ブロックの集中管理ページに入ることができます。その後、すべての再利用可能ブロックに対して、一箇所で変更を加えることができます。ここでは名前を(テスト3)とする。

画像[10] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応

Synchronised "と表示されたブロックは、サイト全体の同期で変更されたブロックを示し、"Unsynchronised "と表示されたブロックは、サイト全体の同期で変更されていないブロックを示します。Synchronised "のラベルが貼られたブロックは、サイト全体の同期で変更されたブロックを示し、"Unsynchronised "のラベルが貼られたブロックは、変更されていないブロックを示す。(下図参照)

画像[11] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応

新しいページで再利用可能ブロックを使う場合、最良の解決策は、サイト全体で同一のコンテンツにはサイト全体で同期された再利用可能ブロックを使い、スタイルだけが同一のコンテンツにはサイト全体で同期されていない再利用可能ブロックを使うことです。

し か し こ れは、 サ イ ト ワ イ ド で再利用可能なブ ロ ッ ク が、 サ イ ト ワ イ ド で同 じ コ ン テ ン ツに し か使え ない と い う 意味ではあ り ません。実際、 ページ内から こ のブ ロ ッ ク を呼び出 し て 「分離」 さ せば、 他のページのス タ イルや内容に影響を与え る こ と な く 、 そのページ上でポー ト フ ォ リ オ内の各ブ ロ ッ ク を個別に編集す る こ と がで き ます。

手順:"ブロックサンプルの分離 "の "その他の設定 "のツールバーで選択することができます。(以下に示すように)

画像[12] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

8、コピー、ブロックカット

Gutenbergのブロックは、Ctrl + C/X/Vで直接コピーとカットができます。さ ら に、 ド メ イ ン越えの コ ピー と 切 り 抜きに も 対応 し てい ます。(下記参照)

画像[13] - WordPressデフォルトテーマとグーテンベルグエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

9、ブロック削除

削除機能は、構造パネルまたはツールバーの右端にある省略記号の最後の項目をクリックすることで使用できます。または、キーボードのDeleteキーを押して、ブロックをすばやく削除することもできます(段落や見出しなどのテキストブロックには適用されません。)(下記参照)。

画像[14] - WordPressのデフォルトテーマとGutenbergエディタを使ったブログ記事の書き方(02) - フォトンゆらぎネットワーク|WordPressのプロフェッショナルな修理サービス、グローバルなリーチ、迅速な対応

概要

この記事では、WordPressのGutenbergエディタとデフォルトテーマを使ってブログ記事を効率的に書く方法を詳しく説明します。基本的なブロックの使い方から、再利用可能な高度なブロックまで、様々な便利なヒントを取り上げています。このガイドで、これらのツールを使いこなせるようになり、ウェブサイトのコンテンツ作成とデザインの効率が向上することを願っています。次回は、WordPressとGutenbergエディタのさらに高度な機能について掘り下げていきますので、ご期待ください!


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はハリーが執筆しました。
終わり
好きなら応援してください。
クドス0 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし