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

2019年11月25日

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

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

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

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

 

投稿＞新規投稿

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

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

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

 

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

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

 

ブロックエディターは、新しいエディターですので、ブロック毎に様々な要素を選択入力していくのに便利なエディターと言えますが、それまでのクラシックエディターに慣れていた人たちにとっては、使いにくい、と感じることとなりました。

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

 

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

 

 

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

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

タイトル入力部に『新しい記事のタイトル』と入力して、記事本文エリアにカーソルを持ってくれば、１つ目のブロック入力に移ることができます。

 

例えば、『これは新規作成記事です。』と入力してみます（まだリターンキーは押さない）。

そうすると、右側の関連情報を示すエリアが、それまで、記事全体の関連情報を示していた状態から、入力中のブロックの関連情報に代わっている。ここで、入力したテキストのフォントサイズや文字色を変更することが可能です。

次に、上の画像のように１つ目のブロックで文章を入力後リターンキーを押せば、次の２つ目のブロックが表示されます。

ブロックの入力要素を選択変更したければ、ブロック左に表示されている+マークをクリックしてみましょう。

そうすると、上のように、入力する要素の一覧が表示されますので、選択すれば要素を変更できるわけです（特に指定しなければ、要素は自動的に初期値として段落となっています）。

 

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

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

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

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

 

 

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

 

 

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

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

手順は以下の通りです。

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

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

 

投稿設定を確認する

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

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

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

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

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

 

 

 

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

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

 

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

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

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

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

 

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

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

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

 

 

 

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

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

 

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