WordPress5.0でリリースされた新エディタについて調べてみました

ビジネス慶です。

昨日WordPress5.0がリリースされ、エディタが新しいものに変わってしまいました。
その影響もあって、受講生さんからの問い合わせも増えて、今日は休みですが朝から仕事です。

私も新しいエディタを自分で触ってみて、取りあえず旧エディタの基本的な機能がどこにあるのかを探したりしていました。
まずは今まで使っていた機能くらいは把握したいですからね。

と言う訳で、今の時点で把握した内容をご紹介します。

Contents

エディタ画面について

新しいエディタ画面は下記の様になっています。

上記の様に、新しいエディタは、ツールバー、コンテンツ入力画面、サイドバーの3つで構成されています。
この後、それぞれの構成について説明していツールバーについて説明します。

ツールバーについて

ツールバーは画面上部の赤枠の部分です。
各ボタンは下記の様になっています。

旧Verは記事編集スペースの上にあった機能ボタンですが、今回からは分散した感じです。
慣れないとあの機能ボタンはどこ？と戸惑うかも…

まずは左から順に説明していきます。

ますは左側のボタン、左から…

・ブロックを追加
・取り消し
・やり直し
・コンテンツ構造
・ブロックナビゲーション

この様な順に並んでいます。
取り消しとやり直し以外はブロックについてのボタンです。
このブロック、聞き慣れない言葉ですが、後のコンテンツ編集画面で説明します。

右側のボタンは、左から

・下書きを保存
・プレビュー
・公開
・設定
・ツールと設定をさらに表示

この様に並んでいます。
下書きから公開までは説明は不要かと思われますが、設定とツールと設定をさらに追加は今回から変わった点ですね。
この2つのボタンはサイドバーに表示される各種設定欄です。

設定の方は、歯車の様なボタンをクリックすると、サイドバーに色んな設定項目が現れます。
もう一度設定をクリックするとサイドバーが消えます。
旧Verの編集集中モードで書きたい時はこのボタンを押せばＯＫです。

サイドバーの内容については、また後で説明します。

コンテンツ編集画面について

コンテンツ編集画面は、旧Verの記事を書くスペースです。

コンテンツ編集画面は、ちょっと今までと違って変な感じですね。
まずタイトルを追加と大きく書かれている場所が、記事タイトル記入場所です。
ここにタイトルを入力すると、その上にパーマリンクが現れます。
パーマリンクは今まで通り編集ボタンを押せば編集できますが、タイトルをクリックしないと現れないのがわかりにくいかも…

またここで一番戸惑うのが、「ブロック」と言う概念ですね。
今までのエディタにはなかっただけに、何これ？と思われる方も多いかも。

ブロックはいわゆるパーツ（部品）というイメージです。
文章や画像、見出しなどをそれぞれの部品として分けて挿入する、と言うとイメージしやすいかも。

文章を書く時は「ブロックの追加」をクリックして、ブロックの種類を選びます（ブロックの追加は、文章の最後にEnterを押すだけでも追加されます）
文章を書くなら段落に、見出しは見出し、画像を挿入する際は画像など、それぞれの項目に合わせます。

「ブロックの追加」の追加ボタンの右側には、画像や見出し、ギャラリーを追加するボタンがあります。

他にもギャラリーやリスト、引用など、色んなタイプが選べます。

最初は一々選ばなきゃいけないのが面倒…とも感じますが、ブロック分けしておけば順番を後で入れ変えたり出来るなど便利な点もあります。

また、下にスクロールするとソースコードや動画、続きを読むなどの項目があります。

また記事を書いていると、下記の様な設定ボタンが現れます。

このボタンは、ツールバーにまとめる事が出来ます。
右上の三つの点の「ツールと設定をさらに表示」をクリック→2段目の「ブロック・文書ツールを同じ場所にまとめる」をクリックすると出来ます。
ブロックにくっ付いて来て見難い！と感じるなら、ツールバーにくっつけてしまった方が楽でしょう（私はそうしました）

サイドバーについて

サイドバーは今まで以上に色んな機能が表示できるようになりました。
右上の歯車のアイコン（設定）をクリックすると表示/非表示出来ます。

各ブロックの属性ごとに表示される内容も変わってきますので、ブロックの属性分けは必要ですね。

「設定」→「文章」をクリックすると、左の様な画面が現れます。
これは旧Verのサイドバーとほぼ同じで、ステータスや公開状態、カテゴリーやタグ、アイキャッチ画像載せっていが出来ます。
パーマリンクの設定もここで出来るようになりました。

テキストブロックの場合、ブロックをクリックすると「テキスト設定」や「色指定」の画面が現れます。

また、↑の様に「ドロップキャップ」を有効にすると、１次目のみ大きく表示する事も出来ます。

また、新エディタではブロック毎に文字や背景色を指定する事が出来ます。
このブロックは文字色を赤、背景色を黄色にしています。
色の微調整は最後の虹色で出来ます。
ただ、この場合は選択した場所だけ色を変えるのは無理の様です。

元に戻したい時は、「クリア」をクリックすれば元に戻ります。

さらに、↑でも使っていますが、記事内でカラム設定が出来ます。
これは今までの記事編集では出来なかったので、私的には嬉しい機能です（その前にテーマで出来ていましたが、今後はデフォルトで出来るようになったのが嬉しいです）

カラムを使う場合は、「ブロックの追加」でカラムを選択します。

カラムを選択すると、↑の図のように表示されます。
カラム内もブロックの概念はそのままなので、まずはカラム内で「ブロックの追加」。
画像の場合は画像を、文章の場合は文章のブロックを選択します。
ちょっとわかりにくいですが、↑の場合は「ブロックの追加」で画像を選んでから画像をアップロード、そのご「ブロックの追加」で段落を選んでいます。

カラム数はカラムにしたブロックを選択すると、右のサイドバーにカラムの設定が出てくるので、ここでカラム数を変える事が出来ます。

ツールと設定をさらに表示について

一番右の三つの点は、「ツールと設定をさらに表示」です。
ここではより詳細な設定が出来るようになります。

この部分は主に編集画面モードに付いてです。
ちなみに旧エディタのビジュアルモードやテキストモードはここにあります。
ただ、新エディタではブロックに直接ショートコードを埋め込むので、使う頻度は減るかな～と。

以上、取りあえず簡単ですが、新エディタを使って解説しました。

ただ、自分もこの記事が初めてなので、まだまだ理解していない面が多いです。
他にも画像に文字を入れたり、テーブルを入れたりと、かなり色んな機能が追加されているようです。
慣れれば旧エディタよりも使いやすいかも…？

どっちにしても今後のワードプレスはこの新エディタでやっていく事になるので、こちらに切り替えた方がいいのかな、と思います。
今はプラグインで旧エディタも使えるので、時間がある時に少しずつ慣らしていっがいいでしょう。

ただ、新エディタは画像の編集をリックしてもアップロードになったりと、バグがある状態の様です。
また、使っているプラグインやテーマにてもバグが出ている様なので、心配な方はもう少し様子を見てからの方がいいかもしれませんね。

新エディタの使い方を簡単にまとめてマニュアルにしました。
誰でも自由にダウンロードできます。ダウンロード→ WP5.0新エディタマニュアル