Web-Children > blog > ワードプレス > Gutenberg(ブロックエディター) > ワードプレス 初めてのブロックエディター(編集画面の各機能)

ワードプレス 初めてのブロックエディター(編集画面の各機能)

ワードプレスは、2018年末のversion5.0以降はGutenbergという通称ブロックエディターが標準となっています。従来のワープロ感覚のエディター(クラシックエディター)と違って、慣れるのに時間がかかります。

そこで、記事の作成の前に知っておくべき基本的な知識として、ブロックエディターの編集画面の各機能について解説します。

 

まずはブロックエディターを開けてみる

ブロックエディターは、ダッシュボードメニューの投稿>新規追加 で開くことができます。

もし、クラシックエディターを標準設定にしてあるならば、ダッシュボードメニューの設定>投稿設定 で、ブロックエディターをデフォルト設定にしておきましょう。

 

このあたりの情報は、

記事:初めてのワードプレス 記事編集用のエディターを知っておこう

も参考にしてみてください。

 

ブロックエディターでの編集画面

ブロックエディターの編集画面は上記のように、非常にシンプルになっています。この画面の各機能については、後ほど詳しく解説していきますが、その前に簡単に記事の投稿方法を説明しておきましょう。

 

記事タイトル欄に『新しい記事のタイトル』を入力してリターンを押すと、記事入力欄に1つ目のブロックが表示されます。そのブロックにテキスト『これは新規作成の記事です。』を入力しているのが下記の画像です。

入力中のブロックの情報が、右側のパネルに自動的に表示されます。このパネルで、文字サイズや、文字色などを編集することができます。

ブロックエディターへの入力作業

1つ目のブロックの入力が終わって、リターンを押すと、2つ目のブロックに移ります。

 

ここで、ブロック左の+マークをクリックすると、ブロックの要素一覧が表示されます。特に指定しなければ、段落が要素として指定されていますが、例えば見出しや画像に変更したければ、その要素を選択すればよいのです。ブロックの入力要素の選択

このように、ブロックエディターでは、ブロック毎に要素を選択して、記事(コンテンツ)を構築していく、という考え方ですね。

 

 

ブロックエディター編集画面 各機能の解説

それでは、編集画面の各機能について解説していきましょう。

もう一度、編集画面を見てみます。

左上にツールバー、右上に制御ボタン、そしてその下に関連情報パネルが並んでいます。

ブロックエディター編集画面

この3つについて順番に解説していきましょう。

 

 

ツールバー について

ツールバーは、左から

・ブロック追加
・元に戻す
・やり直す
・コンテンツ構造
・ブロックナビゲーション

となっています。

 

ツールバー の説明

ブロック追加元に戻す・やり直す は、その通りの機能なので説明は省略しますが、コンテンツ構造とブロックナビゲーションについてもう少し説明しましょう。

 

下記のような記事の構成内容であった場合の、コンテンツ構造とナビゲーションの表示例を示します。

コンテンツ構造とブロックナビゲーション

コンテンツ構造は、文章を構成する各要素の種類とその数およびその構成、を表示しています。また、上記の例のように、見出し(h2)の下には本来小見出しh3を使用すべきところにh4が使用されている場合、その要素の背景がオレンジ色となり、『(見出しレベルに間違いがあります)』とメッセージも表示されます。

このように、要素の使用方法に間違いがある場合も警告表示してくれるのです。

 

ブロックナビゲーションは、各ブロックの要素が順番に表示されます。クリックするとそのブロックに飛ぶこともできます

 

 

制御ボタン について

制御ボタンは、左から

・下書き保存
・プレビュー
・公開(または更新)
・設定
・ツールと設定

となっています。

下書き保存、プレビュー、公開ボタンは、クラシックエディターと同様、名称通りの機能ですので説明を省力します。

 

設定、ツールと設定 のボタンは下記の通りです。

制御ボタン の説明

設定は、クリックで、その下の情報パネルの表示・非表示を切り替えることができます。

ツールと設定は、クリックするとメニュー画面が開きます。このメニューの中で、特に重要と考えられるは、エディター(ビジュアルエディターとコードエディター)およびオプションです。

 

コードエディターへの切り替え

ビジュアルエディターとは、すでに使用している状態のエディターです。コードエディターはHTMLで入力していくエディターで、クラシックエディターではテキストエディターと呼ばれていたものです。

 

下記が切り替え例です。

コードエディター切り替え

上記画像右側のコードエディターを見てみると、通常のHTML(段落タグ<p></p>、見出しタグ<h2></h2>など)に加えて、<!– wp:paragraph –>のような記述が挿入されています。これは、このブロックエディター特有のコメントタグとなっており、通常のHTML以外の記述ルールがあります。

したがって、ブロックエディターのコードエディターでHTML入力していくことは、ルールに則ってコメントタグも挿入する必要があり、難易度が高くなってしまいました。クラシックエディターのテキストエディターでは、純粋にHTML入力でよかったのですが。

 

HTML入力したい場合

しかし、もし、ブロックエディターでHTML入力の必要がある場合は、コードエディターではなく、次の2つのいずれかの方法を使うとよいでしょう。

①各ブロックを入力するときの要素にカスタムHTMLを選択する

カスタムHTMLは、ブロック左の+マークをクリックして表示されるブロック要素一覧の『フォーマット』の中にあります。

 

②ブロックの詳細設定で、HTMLとして編集 と選ぶ(下記画像をご参考に)

HTML編集の方法

 

 

ツールと設定メニューのオプション

ツールと設定ボタンをクリックして表示されるメニュー内のオプションをクリックすると、文章パネル(編集画面右のパネルで文章タブ選択時)に表示されるカテゴリー、タグ、ディスカッションなどの項目の表示・非表示が選択できます。

ツールと設定>オプション の説明

これらの項目は、人によって使用の有無がありますので、使用するものは表示させておくとよいでしょう。

 

 

情報パネル について

編集画面右に表示される情報パネルは、タブの切り替えによって、文章パネルブロックパネルとに分かれます。

 

文章パネル

文章パネルの中には、

・ステータスと公開状態
・パーマリンク
・カテゴリー
・タグ
・アイキャッチ画像
・抜粋
・ディスカッション

といった項目が並んでいます。ほとんどが、クラシックエディターと同様の機能内容となっていますので、ここでは、『ステータスと公開状態』について、下記画像で説明します。

文章パネル の説明

文章パネルのステータスと公開状態をクリックすると、公開状態などが表示されるようになります。

公開状態では、公開、非公開、パスワード保護が選択できます。いったん公開しても、非公開にすることもできますし、パスワード保護を選択してパスワードを設定してやれば、ページを閲覧時にパスワードの入力を要求されるようになります

また、公開今すぐのところでは、予約公開ができるようになっています。

 

 

ブロックパネル

ブロックに入力を始めると(入力するブロックにカーソルを置くと)、自動的にそのブロックに対応するブロックパネルに切り替わります。

下記は、ブロックが段落、見出し、画像の場合のそれぞれのブロックパネルの表示を表したものです。

ブロックパネル の説明

編集中のブロックの要素によって、ブロックパネルでできる機能は異なりますが、ほぼ直感的に理解できる編集機能と言えるでしょう。

 

 

まとめ

以上、ブロックエディターの編集画面での各機能について解説してきました。

記事の入力をしていく前に、ツールバー、制御ボタン、情報パネルのそれぞれが、どのような役割を持つのかを知っておけば、効率よく記事の入力・編集ができるでしょう。

また、ツールバーを始め、クラシックエディターにはないブロックエディターならではの機能も存在しています。

 

注意点としては、クラシックエディターのテキストエディターに相当するコードエディターでは、HTML入力時に、ブロックエディター特有のコメントタグも入力していく必要があります。したがって、コードエディターでのHTML入力は、難易度が高いものと言えるでしょう。

そこで、HTML入力は、コードエディターではなく、ブロック要素の中のカスタムHTMLを使用するか、ブロックの詳細設定でHTMLとして編集を使用することがお勧めです。

 

これらの機能を理解し、徐々にブロックエディターを使いこなせるようにしていきましょう。

 

 

 

 

関連記事