WordPressブロックエディターの使い方

公開: 2020-04-12

この投稿では、2018年からWordPressのアップデートに含まれているWordPressブロックエディターの使用方法を説明します。グーテンベルクエディターと呼ばれることもあります。

WordPress 5.0のリリース以降、WordPressテキストエディター内に「CONVERTTO BLOCKS」というオプションがあり、以下のように3つの縦のドットをクリックすると表示されます。

ブロックに変換する必要がありますか？

サードパーティのWordPressテキストエディタを使用している場合は、問題が発生する可能性があります。 この投稿ではそれらについては取り上げません。 変換と慎重な踏み込みについて専門家から詳細を調べてください。

他の人のために-私は責任を負いません-ページをブロックに変換する前に、常にウェブサイト/ブログをバックアップしてください。

すでに変換されていますか？このセクションをスキップします。

クラシックエディタを使用していて、ページレイアウトがシンプルな方には、WordPressブロックをお勧めします。

WordPressブロックエディターに慣れれば、直感的に操作できます。

CONVERT TO BLOCKSを押しても、Webサイト/ブログ全体がブロックに変換されません。作業中のページまたは投稿だけです。

ブロックに変換するとどうなりますか？

ページを変換すると、各見出し、段落、コードのスニペット、画像が個別のブロックにコミットされます。

変換するだけであれば、すぐに慣れます。

ブロックを使用すると、段落、列、表、画像、ウィジェット、最新の投稿、カテゴリを簡単に追加できます。

また、最新の投稿、カレンダー、投稿アーカイブ、カテゴリ、ソーシャルアイコン、RSSフィードなどのウィジェットも含まれます。

WordPressブロックを使用すると、Webサイトの所有者が望むほとんどすべてのものを簡単に追加できます。本当に便利です。

1つのブロックは1つのアイテムを表すため、ページの順序を変更するのもはるかに簡単です。これについては後で説明します。

新しいタブでWordPressのウェブサイトを見る

編集するとき、私が最初にすることは、新しいブラウザタブでウェブサイトの公開部分を開くことです。次に、一方のタブに管理領域（バックエンド）を表示し、もう一方のタブにパブリック領域（フロントエンド）を表示します。そうすれば、2つを切り替えることができます。

WordPressWebサイトのフロントエンドを新しいタブで開く最も簡単な方法は次のとおりです。

管理エリアで、画面の左上にある家のアイコンにカーソルを合わせます。
ドロップダウンメニューから、[サイトにアクセス]を右クリックします。
「新しいタブでリンクを開く」をクリックします。

注意。 使用しているブラウザによって、単語が異なる場合があります。

2つのブラウザタブが開いています。つまり、2つを切り替えることができます。

管理エリアを使用して、1つのタブでWordPressページの編集を続けます。

もう1つは、Webサイトのフロントエンドを表示します。これは、行った各変更を確認する方法です。

編集して保存するときに、サイトのフロントエンドにタブで移動できます。 F5キーを押してページを更新します。これにより、ブラウザに更新されたバージョンを表示するように求められます。

WordPressh1の見出しとパーマリンク

まず、タイトルとパーマリンクを見てみましょう。

h1見出しは、ページ上部の最初のブロックです。これは動かせない唯一のブロックであり、それは正当な理由があります。

検索エンジンと人間がページに何が含まれているのかを理解できるように、すべてのページと投稿の最初にh1の見出しを付ける必要があります。これはSEOの要因です。

マウスを使用して、タイトルブロック内をクリックします。タイトルを変更するには、タイトルテキストを強調表示して、入力を開始します。単純。

パーマリンクフィールドは、右側のドキュメント設定内にあります。下の画像を参照してください。ページ名のWordPressのラベルは「URLSlug」です。

パーマリンクを編集するときは注意してください–この投稿の最後に警告を含めました。

WordPressブロックを追加する

開始するには、左上のプラス+アイコンを押します。

ブロックライブラリを探索する–ここには非常に多くのオプションがあります。

WordPressページにブロックを追加する方法は他に2つあります。

クリエイティブフローを使用している場合は、リターンキーを押してブロックを追加します。

3番目の方法は、ブロックにカーソルを合わせると実行されます。プラス+アイコンが表示されます。

これを書いている時点では、これは面倒です。アイコンが表示されるように、ブロックの正確な中央下部にカーソルを合わせます。

アイコンを押して、ブロックスタイルを選択します。新しいブロックがプラスアイコンの下に表示されます。

ブロックを使用したWordPress段落

段落ブロックは、多くの場合、WordPressのページまたは投稿の最も一般的な要素になります。段落ブロックを追加して、入力を開始します。

Returnキーを押して新しい段落ブロックを作成し、入力を続けます。

ワークフローを高速化するために、段落ブロックを他のスタイルに変換できます。

新しい段落ブロックにカーソルを置き、/（スラッシュ）を入力します。これは、可能なブロックタイプのリストへのショートカットです。

または、ツールバーを使用してブロックを変換します。選択したブロックの左上にツールバーが表示されます。

段落のツールバーには、「ブロックの種類またはスタイル」を変更したり、テキストをフォーマットしたりするためのオプションがあります。

WordPressの段落ブロックを変換する

「ブロックタイプまたはスタイルの変更」ボタンを使用して、段落ブロックを変換します。変換は、同様の同類のブロックに制限されます。つまり、段落を表に変更することはできませんが、見出しに変更することはできます。

たとえば、段落をヘッダーに変更してみましょう。

下の画像の矢印は、段落を表すアイコンを指しています。これは、ブロックが段落であることを知る方法です。

アイコンをクリックして段落を変換します。

HEADINGを押します。

段落アイコンがHに変わり、その横にH2が表示されます。

H1は選択できません–H1はページのタイトルにのみ使用する必要があります。

これで、ブロックは見出しブロックになります。

メニューから選択したH2ボタンを押して、H3またはH4を選択します。

ページと投稿内の階層として見出しを使用します。 H2を使用して、ページを読みやすいセクションに分割します。 H3を使用してそれらを細分割します。

段落と見出しをフォーマットする

テキストのフォーマットとは、特定のスタイルをテキストに追加することを意味します。

見出しまたは段落ブロックで、フォーマットするテキストを強調表示します。

ブロックの左上にツールバーが魔法のように表示されます。ここには、テキストを太字、斜体、またはテキストハイパーリンクを追加するためのオプションがあります。

キーボードショートカットを使用することは引き続き可能です–テキストを強調表示して以下を使用します。

Control-bは太字
Control-iは斜体です。
Control-uはテキストに下線を付けます。

Macユーザー–コントロールキーの代わりにコマンドキーを使用します。

便利なリストについては、WordPressのキーボードショートカットにアクセスしてください。

ツールバーに下向き矢印があることに注意してください。「よりリッチテキストのコントロール」のドロップダウンメニュー。ここには、~~取り消し線~~とテキストの色の2つのスタイルがあります。

テキストの色に注意してください–テーマがWebサイトの外観を決定します。企業スキームの色が少ないと、Webサイトがプロフェッショナルに見えます。テキストの色は慎重に使用してください。

「インラインコード」と「インライン画像」もこのメニューにあります。

「インライン」は、入力しているテキスト行内に配置されます。コードスニペットや場合によってはアイコンに役立ちますが、大きな画像は私の意見では奇妙に見えます。

段落設定

WordPress画面の右側にオプションを表示するには、段落ブロックを選択します。

ここでテキストのサイズを変更します。

あなたが目立たせたいストラップラインを持っているなら本当にいいです。

段落全体の色を変更する機能もあります。私はこれらのオプションに夢中になりすぎないように警告します。

段落のその他の変換オプション

段落ブロックの他の変換オプションは次のとおりです。

リスト、
事前にフォーマットされたブロック、
見積もり、
詩
またはグループ。

WordPressのフォーマット済みブロック

事前にフォーマットされたブロックにより、WordPressユーザーはテキストを好きなように正確に入力でき、改行とインデントを保持できます。

現時点では、これが何に使用されているのか完全にはわかりません。誰かが私を啓発します。

空の段落ブロックに/ preformattedと入力し、Enterキーを押して、事前にフォーマットされたブロックを作成します。

または、上記のツールバーを使用します。

詩

WordPressによると、詩のブロックはサイトに詩を追加するのに理想的であるため、適切な名前が付けられています。

上級ユーザーはCSSをバースブロックに追加できるため、バースブロックのスタイルを簡単に設定できます。

 バラは赤いです、 
スミレは青です。

WordPressブロックエディターのボタン

WordPressブロックエディターを使用すると、エディターで特注のボタンを作成できます。

それらは限られたスタイルのシンプルなボタンであり、特に独創的なものは何もありません。私の意見では、WordPressは正しい決定を下しました-物事をきれいに保つことがより良い選択肢です。

ボタンを追加するには、「ブロックの追加」アイコンを使用して、「ボタン」を選択します。

すぐにボタンのテキストの入力を開始します。

現在、「ボタンブロック」には2つの部分があり、混乱する可能性があります。

ボタンは外部ブロック内に含まれています。ボタンをクリックしてから、ボタンのすぐ外側の空白部分をクリックして、意味を確認します。

含まれているブロックを使用してボタンを移動またはドラッグします。ボタンはその中で整列させることができます。

ボタンをクリックすると、色、テキスト、境界線などのスタイルを設定できます。これは、ボタンをリンクする場所でもあります。

わかる？

ボタンを選択します–WordPressの右側にあるその他のスタイリングオプションを利用できます。

段落のように、ボタンのテキストにスタイルを追加できます。テキストのリンクには注意してください。

WordPressには、ボタンのテキストを（段落のようにボタンツールバーを介して）リンクしたり、右側のオプションを介してボタン全体をリンクしたりする機能があることがわかりました。少し紛らわしい。

ここでの最良のオプションは、ボタン全体をリンクすることです。

それを行うには、ボタンをクリックして選択します。右側の[ブロック]オプションを参照してください。一番下までスクロールして、リンクをLinkrelフィールドにポップします。

検索エンジンはユーザーが新しいタブを開くことを決定することを好むため、「新しいタブを開く」オプションをアクティブにしないことをお勧めします。

私の例ボタン

上記のボタンの例では、Font AwesomeからHTMLコードをコピーして、FontAwesomeアイコンを追加しました。

 <i class="fas fa-arrow-right"></i>

ボタンに含めるには、ボタンを選択し、ツールバーの端にある3つの縦のドットを押して、[HTMLとして編集]を選択します。終了タグ</a>の前にHTMLコードを貼り付けます。

このアイコンは、FontAwesomeがインストールされている場合にのみ使用できます。

ブロックのグループ

グループブロックを使用すると、エディターはその中に複数のブロックを追加できるため、グループを移動したり、複製したり、全体として再利用したりできます。

レイアウトに便利です。または、見出しと段落をまとめて、ページが乱雑にならないようにします。

しかし、私はGROUPSが消えたように見えるので、少しイライラしていることに気づきました。これはWordPressのバグだと思います。

Chrome、Firefox、Edgeを試しました。

グループが追加された後、グループが消えないようにするためのちょっとしたコツがあります。ページに表示されたらすぐに、派手な背景色を追加します。

その後、他のブロックをそこにドラッグし、完了したら背景色を変更することができました。理想的ではありません。

WordPressブロックを複製する

WordPressブロックを簡単に複製できるようになったのが気に入っています。ブロック内をクリックして選択し、ツールバーの3つの縦のドットを押すだけです。重複をヒットします。

または、ブロック内にいる場合は、ショートカットCONTROL-SHIFT-D（Macの場合はCOMMAND-SHIFT-D）を使用します。

WordPressブロックを再利用する

WordPressブロックのもう1つの優れた機能は、REUSABLEBLOCKオプションです。

ブロック用に作成したスタイルを保存して、再度使用することができます。これにより、サイト全体で各アイテムを再作成する必要が少なくなります。

ブロックをクリックしてツールバーを表示し、右側の3つの縦のドットをクリックします。ここには、「再利用可能なブロックに追加」というラベルの付いたメニュー項目があります。

保存された再利用可能なブロックは、ブロックライブラリ内の[再利用可能]タブにあります。他のブロックと同じように見つけて追加するだけです。ハンディ。

再利用可能なブロックを管理できるので、コレクションに余剰ブロックが多すぎることはありません。

必ず作業内容を保存してください。次に、画面の上部にある投稿またはページを見ると、[プレビュー]ボタンと[更新]ボタン、および歯車のアイコンが表示されます。

そのバーの終わりに3つの縦のドットがあり、それらをクリックしてリストを表示します。下部には、「すべての再利用可能なブロックを管理する」オプションがあります。

投稿と同様の方法で再利用可能なブロックを管理します–名前をクリックして編集します。

再利用可能なブロックを編集しても、サイトに既に存在するブロックのスタイルは変更されません。

WordPressブロックをドラッグする方法

WordPress 5.5へのアップデート以降、ドラッグオプションは明確ではありません。

ブロックを選択してから、上下の矢印をクリックして押したままにする必要があります。

ブロックをドラッグすると、領域が青色で強調表示され、マウスを離したときにブロックがドロップされる場所が示されます。

これが、WordPressブロックエディターを使用してWordPressの編集を開始するのに役立つことを願っています。カバーすることがもっとたくさんあるので、私の他の投稿を見てください：

WordPressに画像を追加する方法。
WordPressで画像をリンクします。
WordPressの見出しと段落。
WordPressのハイパーリンク。
WordPressでのフォーマット。
PDFをWordPressに追加する方法（およびそれにリンクする方法）。

たっぷりと乗ります！乗り方を教えてください。