【画像解説】WordPress5.0の使い方!メリットとデメリットを徹底検証した結果WEB関連の記事を気楽に書いています。2018.12.11こんにちわ。ワードプレスの新バージョン5.0が10月7日にリリースされましたね。今回のバージョンアップは、比較的小規模な変更が行われる「マイナーバージョンアップ」とは異なり、大幅な仕様の変更を伴う「メジャーバージョンアップ」ということですが、僕のような初心者にはこの違いがよくわかっていません。今回は、バージョンアップ以前(4.0)と新バージョン(5.0)の変更点を初心者目線で記事にしていきたいと思います。【追記】記事の内容は、2019年12月にリライトしていますので、情報が古くなっている個所があります。記事内容は主に、クラシックエディタを使わないブロックエディタの使い方がメインです。離れた場所ならドラッグ&ドロップが便利ビジュアルエディタとテキストエディタがない?テキストエディタへの切り替え方法ビジュアルエディタのHTML編集は2種類から選択HTMLの編集(初心者向け)HTMLの編集ミスを解決してくれる自動修正で反映してくれる親切設計その他よく使う機能はココから操作に迷ったらクラシック(エディタ)を追加しようワードプレス5.0の変更点まとめコンテンツ構造とブロックナビゲーションワードプレス5.0の新機能と使い方バージョンアップ情報を以前から知ってたわけじゃないんですけど、いつも通り記事を書こうと思ってダッシュボードへ行ったら、「ワードプレス5.0が利用可能です。今すぐ更新してください」の文字が。(ハイハイ更新ね!)普段からプラグインやテーマの更新は「とりあえず新しいほうがいいだろう」ということで何も考えず更新しているので、今回も軽~い気持ちで更新してみました。更新したからといって特に設定を変更する必要はないはずなので、さっそく記事を書こうと思って「新規作成」をクリック!「ん?ん~~?なんじゃこりゃ~?」ワードプレス歴わずか数か月の僕にとっては・・・バージョンアップって何のことやらです。これまでのエディタと比べて見た目が変わっっちゃってるんですよね!(大汗)ワードプレス初めて触ったの8月なんですけど~~!!で、今日が12月11日なんですけど~~(T_T)まだ3カ月しか経ってませんから。最近どうにかワードプレスになれてきたと思ってたとこなんですよね。失敗したかも^^;慌てて以前のバージョンに戻そうかと思いましたが、この先ワードプレスはどんどんバージョンアップされていくんだろから、新バージョンに慣れておくのも悪くない!と思い手探りでいろいろ試してみることに決定!ていうか、バージョンダウンのやり方もわかんないし。新機能ブロックエディタとは新エディタには操作方法の説明が表示されているので、それほど戸惑うことはないのかなぁと思います。(と、最初は思いましたが・・・ん~~そうでもないかも)次のヒントを見るをクリックすると、バージョンアップ後の操作方法が説明されています。(スライドショー的)とりあえず一通り目を通そうかなぁ~・・・そうするべきですよね。面倒くさい!ということでこの先は実況中継で記事を書いていきまぁ~す。(徹夜だなっ)今回の5.0へのバージョンアップで一番大きく変わったのは、段落や画像など、ひとつのブロック要素として扱う仕様に変わったというところですね。これ、僕が以前から運用している「jimdo」(HP作成ツール)と同じ仕様なんですよね。微妙~な知名度の「jimdo」の経験がこんなとこで役に立つとは。!(^^)!5.0バージョンでは、新規から記事を書いていくやり方は以前と変わりませんが、例えば画像ひとつ挿入する場合にも「ブロックの追加」という操作が必要になります。これまでのバージョンではメディアを追加→ファイルをアップロード→ファイルを選択という順序で画像を挿入すると、カーソルが点滅しているところに画像が挿入されましたよね。ブロックエディタでは、その点滅しているカーソルのところで「ブロックを追加」ボタンを押さないと画像一つですら挿入できなくなってます。(地味~に面倒ですね)これ、単にひと手間増えただけじゃないのかなぁ~?って思いますよね。段落や画像などのブロックを追加するには、画面左上とブロック横に表示されている+プラスマークをクリックします。プラスマークは画面左上に表示されているほか、ブロックの左端にカーソルを近づけると表示されます。一覧の中のよく使うものBOXの矢印をクリックするか、スライダーを移動すると、追加できるブロック要素の一覧を見ることができます。表示されたブロック一覧から今回は画像を挿入してみたいと思います。画像のアイコンをクリックすると、4.0バージョンと同じく画像をアップロードする画面になります。このやり方だと相当手間が増えますよね~テキスト用のブロック、画像用のブロックを別々に挿入ってことですから。逆に、便利になったなぁと思う変更点があるとすれば、頻繁に使いそうなパーツ類がブロック要素一覧にまとまってるところかな。埋め込み(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以前に比べて若干面倒なやり方ですが、時間をかけて試した結果現時点で最良の方法を解説しています。ryuumarublog.com2019.02.245.0はブロック要素の移動が新しいこの機能は今回のバージョンアップならではの機能かもしれないです。ブロック要素に分かれてるということで、それぞれのブロックを個別に移動できるようになってます。これは慣れると便利かも。矢印クリックで1ブロック移動1ブロックの移動とは、例えば段落と画像を上下に入れ替えたいときに、画面左の矢印をクリックして簡単に上下を入れ替えることができます。2回クリック、3回クリックと続けて操作しながら好きな場所まで運んでいけます。(ドラッグ&ドロップでも可能)離れた場所ならドラッグ&ドロップが便利ブロック要素を上下に移動する方法はもう一つあります。こちらは、最初からドラッグ&ドロップで好きな場所まで移動できます。極端な例ですが、例えばフッター付近からヘッダー付近まで大幅に移動したいときは、上の例の矢印でワンブロックごと移動せず、ドラッグ&ドロップで長距離移動ができたりもします。(以下画像)ドラッグアンドドロップで移動する際は、移動するブロック要素をやや右側へずらすと着地予定の目印として青色のラインが表示されます。ブロック要素を(ドラッグ)右側へずらさないと目印の青ラインが表示されないのでご注意を!もちろん段落(テキスト)だけでなく、画像などすべてのブロックで使えます。以下画像は、ドラッグ&ドロップで画像のブロックを移動しています。ビジュアルエディタとテキストエディタがない?それはそうと、何気に思ったんですがビジュアルエディタとテキストエディタの切り替えタブがない!ん?ないなぁ・・・。僕のような初心者はほとんど使わない場所ではあるんですが、コピペなら使うこともあるんで一応気になるということで。ありました!あちこちクリックしてみた結果。こんなところにありました。テキストエディタへの切り替え方法chromeのブラウザを使っている方はおなじみの、「3点マーク?」が編集画面右上にあるので、そこをクリックするとビジュアルエディタとコードエディタを切りかえることができます。(3点マーク⇒コード(テキスト)エディタをクリック)あと、4.0バージョンでHTMLを編集するには、毎回テキストエディタに切り替えていたと思うんですが、ブロックエディタではビジュアルエディタからもHTMLの編集ができてしまいます。ビジュアルエディタのHTML編集は2種類から選択HTMLを編集するにはブロックを追加の一覧からHTML(カスタムMTML)をクリックするとHTMLの編集画面が表示されます。この画面はどうゆうわけか空白なんですよね。これじゃ僕みたいな初心者では使い道がありません。HTMLの編集(初心者向け)こちらのやり方は、ブロックごと(個別)にHTMLの編集画面を表示させることができます。段落ブロックを使ってテキストを書き終わったとします。そのまま、画面上の設定(3点マーク)をクリックすると、機能一覧表示が出るのでその中からHTMLとして編集を選びます。すると、ページ全体のテキストエディタではなく、使用しているブロック(単体)のHTMLが編集できる仕組みです。このやり方だと、ページ全体の中から編集中のコードを探す手間が省けますよね。記事が読みやすいように数行ごとの段落に分けることがありますが、ここでは一つの段落を一つのブロックとして扱えるということですね。ピンポイント的にHTMLが編集できるってわけですね。この点は、ブロックエディタの便利な所じゃないでしょうか。直感的な編集ということで、作業効率もアップしますよね。HTMLの編集結果を確認する方法がしっくりこないんですが、今のところプレビューボタンをクリックするくらいしか見当たりません。「決定」ボタンなどは見当たらないので、プレビューボタンで確定ってことかな。引き続き記事の編集を進めるということでお願いします(__)HTMLの編集ミスを解決してくれる僕のような初心者にありがちな、HTMLコードの閉じ忘れなどがあった場合、かなりありがたいのが「問題点を解決」という機能です。(以前のバージョンでは無かった機能だと思います)HTMLの編集後、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合「解決」をクリックすると問題点を修正するよう促してくれます。下の画像は、背景装飾のためのdivタグの閉じ忘れを指摘されています。画像にある「</div>」は、自動表示されています。問題点は、わざわざコードを書き直さなくても、ブロックへ変換をクリックすると、自動修正後に反映してくれるという親切設計です。打消し線とこんな感じで問題なくいけますね。操作に迷ったらクラシック(エディタ)を追加しようここまではワードプレス5.0のブロックエディタの操作方法でした。(というと?)ブロックエディタの操作につかれてきた方は、ブロックの追加からクラシックエディタを追加して疲れを回復させてください。実は手探りで操作中に気が付きました。ブロックの追加(+マーク)から、クラシックを追加すると、旧エディタらしき画面に変わりました。4.0の画面とは見た目も違うので、使い方はどうなんでしょう?ブロック要素のクラシックも、ブロックの追加(プラスマーク)から挿入できます。画面上部と日照り側、中央とプラスマークのどこからでも追加できます。旧エディタと大きく違うのは、ここでのクラシックはひとつのブロックなので、ひと塊で移動できるってとこかな。なると、段落ブロックや画像ブロックとの違いがますます分からなくなりますよね。4.0バージョンと比べると、ツールの種類に変わりはなさそうですし、使い勝手も得に変わらないようです。今回、5.0として大幅リニューアルしたばかりなんで。この先ユーザーの意向も受けながらいろいろ仕様が変わっていくと思います。いい方向にね^^ワードプレス5.0の変更点まとめ今回は、ワードプレスの5.0へのメジャーバージョンアップで一審したブロックエディタを検証してみました。安易に更新してしまったワードプレス5.0ですが、しばらく使っていくうちに使い勝手は良くなっていくんじゃないかと思います。この先、ブロックエディタの機能や操作面の変更なども検証していきたいと思いますあまりに幅広い変更なんかがあると、今回の記事がいつまで情報として役に立つか正直わかりません。いえ、5.0~5.0.2あたりを使い続けようと思う方もいるのでは。そんな方のために少しでもお役に立てればと思い今回リライトしてみました。このままでは、記事を書き終わるのがいつになるやらわからないので、今回はこの辺で終わります。コンテンツ構造とブロックナビゲーションコンテンツ構造とブロックナビゲーションの使い方を別記事でアップしました。早くも5.0.2にバージョンアップされていますが、マイナーバージョンアップなので直感的な使い方は変わっていません。【画像解説】WordPress5.0.2の変更点と使い方(Cocoon編)ワードプレス5.0.2の変更点と使い方を画像を使って解説しています。クラシックエディタのプラグインを使わないデフォルトのブロックエディタでの使い方です。今回は、コンテンツ構造とブロックナビゲーションの解説ですが、その他の解説記事へのリンクも設置してあります。ryuumarublog.com2019.12.12今回は、まとまりのない記事になってしまいましたが、最後までお読みいただきありがとうございました。問題が新たに検出されました。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。プロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。7デザインカスタマイズ【シンプル3選】2019.12.152020.01.28楽天モーションウィジェットが動かないときの対処法【スマホ最適化】2019.10.242020.02.09アドセンスポリシー違反の対処法【違反画像と修正画像公開中】2019.10.082019.12.02【画像解説】ワードプレスCocoonのコメントフォームカスタマイズ基本編2019.10.052019.12.25ワードプレスCocoonのコメントボタンのカスタマイズ8選2019.09.302019.12.25Chromeの画面が真っ白!検索出来ないときの対処方は3クリックで解決2019.08.142019.08.27トレンドネタはアクセス数を稼げるのか?初心者が無料ブログで検証してみた2019.07.042019.07.12はてなブログにGoogleアナリティクスを導入しよう【画像解説】2019.07.032019.07.27。