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

2020年11月18日

さあ、ワードプレスのインストールもできたし、さっそく何かブログ記事を書いてみよう！といき込んだのはいいですが、新規投稿の画面を初めて開けてみると、？？？・・・一体どうなっての？どうやって入力していけばいいの？てなってませんか？

ワードプレスは、元々ブログシステム用として開発されたCMSですので、HTML等のWeb専門言語を使わなくても、記事の作成・投稿が簡単にできるようになっているはずなのですが、デフォルトで準備されている記事の編集用エディターには少しくせがあるのです。

 

この記事では、エディターの基本的なことを解説していきます。

エディターにはデフォルトで準備されているブロックエディターとそれ以前の標準であったクラシックエディターとがあるのですが、本記事ではそれぞれの特徴を紹介します。使いやすいエディターを使用するのがよいでしょう。

 

 

ダッシュボードの投稿機能を使ってみる

ブログ記事の作成・公開をしていくには、ダッシュボードメニューの”投稿”という機能を使用します。

 

ダッシュボードメニューで

投稿＞新規追加

と進めれば、さっそく編集画面が現れます。

 

編集画面は上記のように、タイトルの入力部、その下の本文入力部、右に関連情報の表示部となっています。

 

記事本文の入力部は、通常のワープロのように文章（見出しや段落）を続けて連続的に入力していくのではなく、ブロック毎に非連続に入力していく仕様となっています。このエディター（編集画面）をブロックエディターと呼んでいます。Gutenbergとも呼ばれています。

 

実は、ワードプレスは、2018年末のバージョン5.0へのバージョンアップに伴い、このブロックエディターが標準として使用されるようになりました。

それに対して、それまで使用されていたエディターのことをクラシックエディターと呼んでいます。クラシックエディターは、ブロック毎に要素を組み立てる、という意識をする必要もなく、ワープロ感覚で打ち込んでいける、という点で直感的に使いやすいと言えるでしょう。

 

ブロックエディターは、それまでのクラシックエディターでは作成できなかったコンテンツが作成できる使える点で優れています。画像の上に文字を重ねたり、段組レイアウト（2列とか3列とかのカラム表示のレイアウト）が作成できたりするのです。

しかしシンプルに記事を書く、という使い勝手としては、それまでのクラシックエディターに慣れていた人たちにとって、使いにくい、と感じることとなりました。

 

そこで、今でも多くの人が、WordPress5.0以降もブロックエディターを使用せず、わざわざプラグインとしてクラシックエディターをインストールして使用しています。私も2019年の間はそうでした。

 

ただし、クラシックエディターは2022年には廃止されるという情報もありますので、いずれブロックエディターにも慣れていく必要があるでしょう。この記事では、初めてワードプレスの記事作成をする方に向けて、簡単にブロックエディターの使い方を紹介してから、クラシックエディターの使用方法についても解説していきます。

 

 

ブロックエディターで記事を作成

では、投稿＞新規追加　で編集画面が開いているところから記事の入力を続けていきましょう。

①記事タイトルの入力

初期的にはタイトル入力欄に『自動下書き』と表示されていますが、これをバックスペースキーで消して、記事のタイトルを入力していきます。

 

②記事本文入力欄への入力

『文章を入力、または/でブロックを選択』と記述されているところが1つ目の入力ブロックとなっています。

ここに文章を入力してリターンキーを押すと、さらに次のブロックが表示されて入力できるようになります。

 

しかし文章以外の例えば画像を挿入したい、と考えた場合は、画面左上の+マークをクリックしてみましょう。

すると、画面左側にブロック一覧が開きます。スクロールして”画像”をクリックすれば入力中のブロックが画像ブロックに変わり、画像が挿入できるようになる、というわけです。

 

このように、ブロックは初期的にはテキストが入力できる段落ブロックという要素になっていますが、+マークから他のさまざまなブロック要素に変更して入力いきます。

 

例えばテキスト関連であれば、段落のほかに見出しや、引用、リスト（箇条書きに使用する）なども選択できます。

テキスト以外であれば、画像や音声ファイルなどのメディア要素を選択すればよいでしょう。

ほかにレイアウト要素として、スペーサーという余白を設定する要素（余白の大きさも変更できます）や、ボタンなども選択できます。

また、テーブル（表）の挿入やカスタムHTML、YouTube画像、SNSなどの埋め込み及び、カレンダーなどのウィジェットも準備されています。

 

 

このように、ブロックエディターは、余白といったレイアウト要素も含めて、ブロック毎に要素を指定してコンテンツを組み立てていくことに特徴があるのです。

 

ブロックエディターの詳しい使い方や記事の作成方法は次の記事を参考にしてみてください。

 

 

クラシックエディターのインストール

それでは、次にクラシックエディターを使っていきましょう。その前に、準備として、プラグインをインストールする必要があります。

手順は以下の通りです。

・ダッシュボードメニューから、プラグイン＞新規追加　をクリック。

・右上の検索BoxにClassic Editor と入力すると、Classic Editorが表示されるので、『今すぐインストール』をクリック。さらに『有効化』をクリックする。

 

投稿設定を確認する

クラシックエディターがインストール・有効化できたら、投稿設定を確認しておきましょう。

ダッシュボードメニューで　設定＞投稿設定　をクリックしてください。

そうすると、下記の投稿設定の画面で、赤枠で囲った部分が表示されます。この部分は、クラシックエディターをインストール・有効化する前は、表示されていませんでしたが、インストール・有効化後は表示されるようになります。

ここで、自分が使うデフォルトのエディターをブロックエディターとするのかクラシックエディターとするのかを選択することができます。また、切り替え許可するかどうかも選択することができます。

今回はクラシックエディターのみを使用していくので、この画像のように設定（デフォルトはクラシックエディターを選択して、切り替え許可はなし）しておけばよいでしょう。

 

もし、ブロックエディターとクラシックエディターの両方を使うことがあるならば、切り替え許可に”はい”を選択しておきましょう。

私は、昔クラシックエディターを使って投稿した記事をリライトする場合はクラシックエディターを、新しく記事を投稿する場合はブロックエディターを使用していますので、切り替え許可は”はい”としています。

 

 

 

クラシックエディターを使用してみる

投稿設定の確認が終わったら、ダッシュボードメニュー　投稿＞新規追加　で編集画面を表示させてみます。すると下記のように、ブロックエディターとは少し違った編集画面が表示されます。

 

タイトル入力部の下に、入力や編集に使用するツールバーが表示されています。ワードなどと同じ感じなので、慣れた人には直感的に使いやすく感じるでしょう。

右側には、カテゴリーなどの関連情報が表示されています。記事の途中保存（下書き保存）やプレビュー、そして記事作成後の公開　は、この関連情報部で実施することになります。

ツールバーには、太字や文字色、左揃え・中央・右揃えなどのレイアウトなどのツールを選択することが可能です。これらのツールを増やしたければ、プラグインTinyMCE Advanced をインストールしましょう。

画像の挿入は、挿入したい部分にカーソルを置いてから、左上の『メディアを追加』をクリックします。

 

記事本文は、ワープロに入力するのと同じように、連続的にテキストを入力していくことが可能です。

テキストを入力してリターンキーを押せば、段落が変更されます。もし、段落を変更せずに、同じ段落内で改行だけをしたい場合は、Shift+リターン　でOKです。

上の画像のように、段落、見出しなどの要素の切り替えは、左上の切り替え部を使用します。

 

クラシックエディターを使った記事の作成方法は、次の記事に詳細解説していますので参考にしてみてください。

 

 

ブロックエディターとクラシックエディター比較まとめ

最後に、２つのエディターの比較を下記図のようにまとめてみました。

実はクラシックエディターのサポートは2021年までということになっています。

 

クラシックエディターの方が直感的に利用できるため、ブログ記事の作成にはクラシックエディターを使用されている方が今も多いと思います。しかし、2022年には廃止予定となっていますので、ブロックエディターへの移行も考え、徐々に慣れていくようにしましょう。

 

クラシックエディターでの記事投稿方法のおすすめ記事です。

この記事では、投稿方法だけでなく、見出しと段落を使ってSEOに有効な記事の階層化についても解説しています。

 

ブロックエディターの解説記事はこちらです。応用範囲が広いため、１つのカテゴリーとして独立させてあります。

 

ワードプレス習得の全体ガイドについては、こちらを参照ください。