【画像解説】WordPress5.0の使い方!メリットとデメリットを徹底検証した結果

ワードプレスのロゴ画像と記事タイトル ワードプレス

こんにちわ。

りゅうまるです。

 

ワードプレスの新バージョン5.0が10月7日にリリースされましたね。

今回のバージョンアップは、比較的小規模な変更が行われる「マイナーバージョンアップ」とは異なり、大幅な仕様の変更を伴う「メジャーバージョンアップ」です。(らしい)

今回は、バージョンアップ以前と新バージョン5.0の変更点を記事にしていきたいと思います。

ワードプレス5.0の新機能と使い方

バージョンアップ情報を以前から知ってたわけじゃないんですけど、いつも通り記事を書こうと思ってダッシュボードへ行ったら、「ワードプレス5.0が利用可能です。今すぐ更新してください」の文字が。(ハイハイ更新ね!)

 

普段からプラグインやテーマの更新は「とりあえず新しいほうがいいだろう」ということで何も考えず更新しているので、今回も軽~い気持ちで更新してみました。

 
ワードプレスのダッシュボード画面
 

ワードプレス5.0ではエディタが大幅に変更

更新したからといって特に設定を変更する必要はないはずなので、さっそく記事を書こうと思って「新規作成」をクリック!

 

「ん?ん~~?なんじゃこりゃ~?」ワードプレスを使い始めてわずか半年足らずの僕には、かなりの衝撃!!(≧◇≦)

 

これまでのエディタと比べてかなり見た目が変わっっちゃってるんです!(汗)

 

ワードプレス初めて触ったの8月なんですけど~~‼12月11日なんですけど~~今日(T_T)

最近どうにかワードプレスになれてきたと思ってたとこなんですよね。失敗したかも(;´Д`)

 

慌てて以前のバージョンに戻そうかと思いましたが、この先ワードプレスはどんどんバージョンアップされていくんだろから、今回の新バージョンに慣れておくのも悪くないと思い直して手探りでいろいろ試してみることに決定!ていうか、バージョンダウンのやり方もわかんないし。

 

ちなみに新しくなった新エディターは「ブロックエディター」というそうな(´・ω・)ふ~ん。

 

新機能ブロックエディタとは

新エディタには、操作方法の説明が表示されているのでそれほど戸惑うことはないのかなぁと思います。(と、最初は思いましたが・・・ん~~そうでもないかも)

 
ワードプレス5.0のエディタ画面
 

「次のヒントを見る」をクリックすると、そのほかの操作方法が説明されていきます。

とりあえず一通り目を通そうかなぁ~・・・

面倒くさい!ということでこの先は実況中継で記事を書いていきまぁ~す。(徹夜だなっ)

 
ワードプレス5.0のブロックエディタの操作方法のヒント画面
 

今回の5.0へのバージョンアップで一番大きく変わったのは、段落や画像などをひとつのブロック要素として扱う仕様に変わったというところですね。

 

これ、僕が以前から運用している「jimdo」(HP作成ツール)と同じ仕様なんですよね。

微妙~な知名度の「jimdo」の経験がこんなとこで役に立つとは。!(^^)!

 

5.0では、新規から記事を書いていくやり方は以前と変わりませんが、例えば画像ひとつ挿入する場合にも「ブロックの追加」という操作が必要になります。

 

これまでのバージョンではメディアを追加→ファイルをアップロード→ファイルを選択という順序で画像を挿入すると、カーソルが点滅しているところに画像が挿入されましたよね。

 

ブロックエディタでは、その点滅しているカーソルのところで「ブロックを追加」ボタンを押さないと画像一つですら挿入できなくなってます。(地味~に面倒ですね)

 

これ、単にひと手間増えただけじゃないのかなぁ~?って思いますよね。

ブロックを追加する方法

段落や画像などのブロックを追加するには、画面左上とブロック横に表示されている+プラスマークをクリックします。

 

「よく使うもの」BOXの矢印をクリックするか、スライダーを移動すると、さらに追加できるブロック要素が表示されます。

 
ワードプレス5.0のブロックエディタの操作画面
 

今回は画像を挿入してみます。表示されたブロック一覧から「画像」をクリック。

 

すると前バージョンと同じく画像をアップロードする画面になります。

 
ワードプレス5.0の画像挿入画面

これ、やっぱりひと手間増えてるんですよね~。

「ブロックの追加」の分、1回余計にクリックしなきゃなんないですもんね~。

逆に、便利になったなぁと思う変更もあって、頻繁に使いそうなパーツ類は「ブロック要素一覧」に揃ってそうですね。

手軽に追加できるブロック要素一覧

  • 段落
  • 画像
  • ギャラリー
  • リスト
  • 引用
  • 音声
  • カバー
  • ファイル
 

スライダー移動で選んで追加するブロック要素一覧

  • インライン要素一覧
  • 一般ブロック要素一覧
  • フォーマット一覧
  • レイアウト要素一覧
  • ウィジェット一覧
  • 埋め込み(SNSなど)一覧
 

+マークをクリックして、段落や画像をブロックに追加していくんですね。(なるほど)

新機能「ブロックエディタ」のメリットとしてはこれまでの様に「画像」は「画像」、「ウィジェット」は「ウィジェット」、「リンク」は「リンク」と、バラバラに分かれていたパーツが、ひとまとめになって操作性向上ってところでしょうか。

 

わかりやすいといえば確かに。けど、ワードプレスのエディタはかなりの年月ほとんど変更してないとのことなので、大半の方は操作性向上とはいかないんじゃないでしょうか?

 

ワードプレス5.0(以降)のデメリットかも

 

操作性のマイナス面を続けて書くのは心苦しいんですが、実は慣れるまで一苦労しなきゃいけない要素がもう一つあるんです(>_<)

 

5.0にアップデートする以前は、記事編集中にEnterキーで段落を入れると、余白として反映されていたと思うんですが、5.0(以降)ではEnterキーでの余白が反映されないんです。

 

この記事では、余白を開けたいか所にブロック要素のカスタムHTMLを挿入して&nbsp;(余白タグ?)を追加してごまかしていますが、超めんどくさいです!

後日の記事で段落(余白)の設定方法を3通り紹介しています。(以下リンクからご覧くださいませ)

 

記事内容は、早くもマイナーバージョンアップした5.0.1での検証記事です。

 

wordpress5.0.1で段落(余白)を反映させる方法
ワードプレス5.0以降(5.0.1)の編集画面で設定した段落が、余白として反映されないときの対処法を画像で解説しています。以前の4.9.9以前に比べて若干面倒なやり方ですが、時間をかけて試した結果現時点で最良の方法を解説しています。

 

 

ワンクリックでブロック要素の移動が可能

ブロックエディタでは、ブロック要素横に表示される矢印をクリックすることで、ブロックを簡単に上下に入れ替えたりできるようになっています。(以下画像)

 
ワードプレス5.0のブロック要素をワンクリックで移動する画面

ドラッグアンドドロップでブロック要素の移動が可能

ブロック要素を上下に移動する方法はもう一つあります。

 

矢印をクリックして移動する場合、ワンクリックでブロック要素1コ分移動するのに対し、例えばフッター付近からヘッダー付近まで大幅に移動したいときは、矢印と矢印の間をドラッグアンドドロップすることで長距離移動ができたりもします。(以下画像)

 
ワードプレス5.0のブロック要素を移動する方法
 

ドラッグアンドドロップで移動する際は、移動するブロック要素をやや右側へずらすと着地予定の目印として青色のラインが表示されます。

 

ブロック要素を右側へずらさないと目印の青ラインが表示されないのでご注意を!

 
ワードプレス5.0のドラッグアンドドロップでブロック要素を移動
 

ブロック要素は、矢印をクリックする方法と、ドラッグアンドドロップで移動することができます。

もちろん、段落だけでなく画像などもドラッグアンドドロップで簡単に移動できます。

 
ワードプレス5.0の画像ブロック移動画像

ビジュアルエディタとテキストエディタがない?

普通に記事を書いていて気が付かなかったんですけど・・・

 

ビジュアルエディタとテキストエディタがない!ん?ないなぁ。ないですね!

 

そんなはずはない!と、あちこちクリックしてみた結果。こんなところにありました。

テキストエディタへの切り替え方法

クロームのブラウザを使っている方はおなじみの、「3点マーク?」が編集画面右上にあるので、そこをクリックするとビジュアルエディタ(エディター)とコードエディタを切りかえることができます。(3点マーク⇒コード(テキスト)エディタをクリック)

 
ワードプレス5.0の編集エディタ切り替え画面
 

以前のバージョンでは、テキストエディタに切り替えることで好きな箇所をHTML編集できましたが、ブロックエディタではビジュアルエディタからもHTMLの編集ができてしまいます。

 

ビジュアルエディタのHTML編集は2種類から選択

HTMLを編集するには「ブロックを追加」から表示される一覧からHTML(カスタムMTML)をクリックするとHTMLの編集エディタが表示されます。

 

ですが、ココでHTMLのコードを一から記入するのはよほど専門的な知識のある人しかできませんよね。(僕なんかコピペ専門ですからね)

 
ワードプレス5.0のHTMLの編集画面
 

もっと簡単なやり方があるのでこのブロックはさっさと削除してしまいましょう。

 

ブロックの削除方法は、詳細設定の一覧から「ブロックを削除」をクリックです。(以下画像)

 
ワードプレス5.0のブロックを削除する方法

HTMLの編集(初心者向け)

HTMLの簡単な編集は、テキスト(文章)を書き終わった後のブロック(段落)内で、詳細設定をクリックします。(これ、僕向きです!)

 

メニュー一覧の中に「HTMLとして編集」という項目があるのでそこをクリックすると、以前のテキストエディタと同じようにHTMLコードが表示されるので、ココから任意のコードを追加またはコピペで編集できます。

 
ワードプレス5.0のHTMLの編集画面

この方法だと、テキストエディタの中から編集箇所を探さなくてもピンポイントでHTMLの編集ができますよね。

 

まさしく直感的な編集ということで、新バージョンのメリットでなないでしょうか?

 

編集結果を反映させる方法がしっくりこないんですが、HTML編集後にブロック要素の上に表示されるプレビューボタンをクリックするしか今のところ見当たりません。

 

「決定」ボタンなどは見当たらないので、プレビュー後は引き続き記事の作成(編集}を進める感じでOKということでお願いします(__)

 

おそらく他にやり方があると思うんですが、今のところこれしかわかりません(__)。

 
ワードプレス5.0のプレビュー反映画面

HTMLの編集ミスを解決してくれる

僕のような初心者にありがちな、HTMLコードの閉じ忘れなどがあった場合、かなりありがたいのが「問題点を解決」という機能です。(以前のバージョンでは無かった機能だと思います)

 

HTMLの編集後、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合「解決」をクリックすると問題点を修正するよう促してくれます。

ワードプレス5.0のHTMLの問題解決機能

自動修正で反映してくれる親切設計

問題点は、わざわざコードを書き直さなくても、「ブロックへ変換」をクリックすると、自動修正後に反映してくれるという親切設計です。

 
ワードプレス5.0のHTMLコードの自動修正機能

その他よく使う機能はココから

前述のコード(テキスト)エディタの設定(3点マーク)の横の歯車マーク(これもおなじみ)をクリックすると、フォントサイズ、色の設定(背景、テキスト)ができます。

 

今回試した感じでは、ドラッグ部分だけの部分的な色変更はできないようです。

 

段落の中の部分的な文字色変更や、背景色など、強調させたいときって結構ありますもんね。どうやら、このエディタではHTMLを編集ってことみたいですね。

 

ブロックエディタだけに、ブロック要素でまとめて変更されるようです。このように。

 
ワードプレス5.0の色の設定画面
 

操作に迷ったらクラシック(エディタ)を追加しよう

ここまでは「ワードプレス5.0」のブロックエディタの操作方法でした。(というと?)

 

ブロックエディタの操作につかれてきた方は、「ブロックの追加」からクラシック(エディタ)を追加して疲れを回復させてください。(ここでそれを言う?・・・)

 

スイマセン(__)。実は手探りで操作中に気が付きました。

 

ブロックの追加(+マーク)から、「クラシック」を追加すると、旧エディタが使えました。

 

僕は、Cocoonテーマを使用しているので、画像例の旧エディタはほかのテーマと異なるかもしれません。

 

ちなみにクラシック(エディタ)は追加項目なので、ブロック要素を編集中や編集後には追加できません。+マーク(ブロックを追加)をクリックして新規要素として挿入できます。(以下画像)

 
ワードプレス5.0でクラシックエディタを追加する画面

ワードプレス5.0の変更点まとめ

今回のリアルタイム検証はいかがでしたでしょうか?

 

安易に更新してしまった「ワードプレス5.0」の目立った変更点を解説してみました。

 

この記事を書きながらというか、初めての5.0バージョンを手探りで操作しながら記事を書いると、次から次へと目新しい機能が見つかってしまいます。

 

このままでは、記事を書き終わるのがいつになるやらわからないので、今回はこの辺で終わります。

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

コンテンツ構造とブロックナビゲーションの使い方を画像記事でアップしました。

早くも5.0.2にバージョンアップされていますが、マイナーバージョンアップなので直感的な使い方は変わっていません。

【画像解説】WordPress5.0.2の変更点と使い方(Cocoon編)
ワードプレス5.0.2の変更点と使い方を画像を使って解説しています。クラシックエディタのプラグインを使わないデフォルトのブロックエディタでの使い方です。今回は、コンテンツ構造とブロックナビゲーションの解説ですが、その他の解説記事へのリンクも設置してあります。

ワードプレス5.0バージョンアップのメリット

今回のバージョンアップのメリットとしては、追加パーツ(操作)がひとまとめになっているので、操作方法をマスターすれば記事作成の効率アップにつながる。

 

ワードプレス5.0バージョンアップのデメリット

ブロックエディタの操作方法をマスターするまでは、記事作成のペースダウンにつながる。

 

今後の戦略について

  • ワードプレス5.0新エディタを徹底的にマスターして投稿率アップにつなげる
  • ブロックエディタとクラシックエディタを臨機応変に使い分ける
  • リスクを伴う戦略は避けたいので、ブロックエディタは活用しない

今回のメジャーバージョンアップで、大幅な変更が行われたワードプレス5.0バージョンになじめない方や、操作訃報をマスターする時間がもったいないけど、新バージョンのワードプレスを使いたいという方は「Classic Editor」というワードプレス公式のプラグインを使うと、5.0で旧エディターを使えるようです。

 

僕が実際「Classic Editor」をインストールしていないので、安易に「おすすめですよ。」とは言えませんが、ワードプレスの公式プラグインなので不具合の心配はなさそうですよね。

 

それよりも、ワードプレスはこの先もバージョンアップし続けるでしょうから、今のうちからブロックエディタになれておくのも一つの戦略だと思います。

 

「Classic Editor」をインストールしても、プラグインを停止することで、随時ブロックエディタに変更できるみたいなので、そう迷うこともないのかな?

 

りゅうまるでした。

あわせて読みたい

あわせて読みたい

ワードプレス
りゅうまるブログ

コメント