ワードプレス5.0新エディタGutenbergの注意点

Pocket

 

今回はワードプレスの新エディタである【Gutenberg】

ってどんな感じだろう?というのを検証する必要があったのでしてみました。

ワードプレスでサイトを運営するなら新エディタは遅かれ早かれ使わなければならなくなります。

その一歩として残しておこうと思います。

ワープレ新エディタ

〜〜〜〜〜目次〜〜〜〜〜〜〜〜

❤︎0、ワードプレス5.0・新エディタの注意点

❤︎1、新エディタ【Gutenberg】

❤︎2、旧エディタで全部編集したりブロック単位で旧エディタを使うこともできるけど,,,

❤︎3、【AddQuicktag】を使えない!???
『Classic Paragraph』ブロック『クラシック』ブロック

❤︎4、ブロックごとにしか文字カラーを変えられない?

❤︎5、【TinyMCE Advanced】は使えなくともなんとかなりそう?

❤︎6、テーブルは勝手にバランス取ってくれる

❤︎7、トータルでの編集が不便

❤︎8、旧エディタで書いた記事たちの編集をどうするか?

❤︎9、これから新規でワードプレスを使う、インストールする場合

〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

❤︎0、ワードプレス5.0・新エディタの注意点

先に注意点などをまとめておきます

  • 現段階ではワードプレス5.0の以降の更新はサイトの表示が崩れてしまう可能性が高い(対応していないテーマやプラグインを使っている場合は要注意)
  • 旧エディタプラグインでインストールしておいた方が無難
    (とりあえず旧エディタはいざという時のために残しておけるだけ残しておきたい)
  • 5.0に更新する前に新エディタをインストールして試して感触をつかんでおいた方がいい(新エディタでできる短縮を少しでも準備しておきたい)
  • 旧エディタで編集した記事を新エディタで編集すると表示が崩れる
    (旧エディタで書き溜めてきた記事をリライトするときや新エディタブロックに変換する際は要注意
  • 新エディタで編集した記事を旧エディタで編集し直すと表示が崩れる
  • 新エディタ内で旧エディタブロックを作れるけど先々新エディタに統一された時個別に対応が必要になる可能性も想像できる
  • アプデによって機能が充実・安定するまでは5.0の更新はせず、両方のエディタをインストールしておいて旧エディタか新エディタのどちらかに統一して運営しておく方が良さそう
  • 新エディタのみでは基本的には【AddQuicktag】、【TinyMCE Advanced】など、使えないプラグインが出てくる
  • 新エディタの『再利用ブロック』はAddQuicktagの代打として使うのも手
  • WordPress 5.0 以降、版日本語版ワードプレスに 【WP Multibyte Patch】 プラグインは含まれなくなる。新規でワープレ5.0以降をインストールする場合は必要に応じて WP Multibyte Patch を自分でインストールする必要がある

WP Multibyte Patch:
WordPress を日本語環境で正しく動作させるために必要となる機能を網羅しているプラグイン。

などなど。。。

まだまだ出てくることが予想できるし、そのサイトのテーマや使ってるプラグインによって注意点も変わってくるかなと…..

 

 

❤︎1、新エディタ【Gutenberg】

ワードプレスの大きなアップデートがありました。。。

そこで採用されるエディタが新エディタの【Gutenberg】というエディタ。

5.0に更新する前にそのエディタを試すこともできるので、私も試してみています。

 

んが、

ワードプレス自体を5.0にいきなり更新してしまうと

  • 今まで使っていたプラグインで使えなくなるものが出てくる
  • 対応に追いついてないテーマの場合は表示が崩れる可能性がある
  • divタグが変換されてしまったり、消されてしまうタグがあったり、代わりになんでこのタグが!?ってのが追加されたりしてそこでまた表示がおかしくなる

などなどが主にあるようなので、現段階ではすぐに5.0以降更新は控えた方が良さそうです。

でも、どちらにせよ更新は避けられないので、対応やアプデにより進化してくれることを祈ります笑

 

で、

更新は更新として、、、

新エディタには慣れておきたいところですよね、、、

5.0に更新しなくても試せるようになっています。

さらに、旧エディタも確保しておくことができるようになっています。

 

なので5.0に更新する前に、

【Gutenberg】と【Classic Editor】をプラグインでインストールしておくことが備えとして得策。

つまり、5.0に完全に更新する前に、現在のバージョンで【Gutenberg】を練習しておくこと、ある程度慣れておくことが望ましいと思う。

 

5.0に更新する前なら、

  • きつくなったら【Gutenberg】をストップさせてこれまで通りにできる
  • 5.0に更新する前に新エディタ【Gutenberg】を試せる

 

もし5.0に更新する場合でも、旧エディタをインストールしておけば旧エディタで編集することも可能

  • 5.0に更新する時が来ても旧エディタ【Classic Editor】で編集できる
    (AddQuicktagは連動できないけど→※新規で立ち上げたワードプレス4.9.9では『Classic Paragraph』というブロックがある場合があり、そのブロックが表示される場合では使える!???)
    【TinyMCE Advanced】の設定の仕方で変わる

ただし上記に書いたように、旧エディタで書いたものを新エディタで編集するなどは、(またはその逆も)どこか表示がおかしくなると思っておいた方がいい。
必要なら確認しながら丁寧に編集する必要がある。

っていうことがまずは頭に入れておきたい注意点だと思う。

 

 

❤︎2、旧エディタで全部編集したりブロック単位で旧エディタを使うこともできるけど,,,

基本的には5.0以下のバージョン(4.9.8, 4.9.9とか)で新エディタをインストールして有効化しても、後から旧エディタで編集しなおしたり部分的に旧エディタブロックとして旧エディタを使うことができる。

んが、

これも

旧エディタで書いたものを新エディタで編集する、(またはその逆も)どこか表示がおかしくなると思っておいた方がいい。
必要なら確認しながら丁寧に編集する必要がある。

ってこと。

 

両エディタとも、ワードプレスダッシュボードに表示されるタブからインストールしておける
新エディタ旧エディタ

 

もし、上記の表示がされない場合は、ワープレダッシュボードの右上の、『表示オプション』を開き、
表示オプション

 

New Editorにチェックを入れるNew Editor

そうすると表示されるはずです。

 

*4.9.9&新エディタ有効の状態では、

  • ディタで編集したものを後で旧エディタで編集すると、データや書式が失われる可能性がある。と警告出るけど、、
  • 旧エディタで編集は、5.0に更新する前なら、完全にこれまでの環境と同じエディタで編集可能
  • もちろん新エディタプラグインの有効化を無効化すればそれも完全にこれまでと同じ環境に戻せる
  • 新エディタで編集しながら、その中で、旧エディタブロック(クラシックエディタブロック)を作ることができ、そこでも旧エディタ編集できる。

そんな感じです。

 

*新エディタで旧エディタを使うには

・新エディタで書いた記事を後で旧エディタ編集するには、

投稿一覧>編集の旧エディタを選択
※何度も書きますが、データや書式が失われることによって表示がおかしくなる可能性がある

編集を旧エディタで

 

・新エディタ内で旧エディタブロックを呼び出して編集するには、

ブロック追加ボタン>フォーマット>クラシックを選択フォーマット-クラシック

ブロックで旧エディタを使う

 

スポンサーリンク

 

❤︎3、【AddQuicktag】を使えない!???
『Classic Paragraph』ブロック『クラシック』ブロック

私がまず一番やりづらいと感じたのは、上記の通り、新エディタでは、

基本的な現状としては『これまで使ってきたプラグインの【AddQuicktag】が使えない』という点です。

ただ。。。。。。

 

==追記=======
下記のここから=====までの内容は解決しました

これまで使ってきたワードプレスの4.9.9バージョンに新エディタをインストールして試してみると、クラシックブロックでもまだAddQuicktagは反映されないんですが、

新しく新規で立ち上げたワードプレスサイトでは、同じ4.9.9バージョンでも、新エディタの中に(Gutenberg に)、『Classic Paragraph』というブロックがあり、『Classic Paragraph』でも『クラシック』でAddQuicktagが反映されて、これまでと同じように使えるんですよね….

環境は、

  • ワードプレス4.9.9
  • 新旧両方プラグインインストール済み
  • 新エディタGutenberg有効、旧エディタClassic Editor停止
  • プラグインバージョン同一

と、同じ条件なんですが、なんででしょう。。。

比べてみると、Gutenbergのブロック項目のまとめられ方も違います。。。。

 

新規で立ち上げたワードプレス4.9.9での新エディタGutenbergでは、下図のように、
一般ブロックの中に、『Classic Paragraph』と『クラシック』というのがある

Gutenberg Classic Paragraph

 

このブロックが存在するサイトでは、新エディタの旧エディタブロック(『Classic Paragraph』と『クラシック』)でAddQuicktagが連動され、これまでと同じように使える

Classic ParagraphにはQuicktagあり

なぜじゃ?笑

 

で、

これまで使ってきた既存サイトの場合で同じ環境にすると、、、、
まず一般ブロックの中にクラシックエディタがない
一般ブロックにない

 

どこにあるかというと、フォーマットの中にクラシックあり!笑
フォーマットにクラシックあり

んが、

『Classic Paragraph』というブロックはどこにも見当たらない 笑

なぜじゃ?笑

 

んで、AddQuicktagない!笑
ブロックで旧エディタを使う
なぜじゃ?笑

 

この原因、私はまだわかりません、、、、

もしかすると、テーマとかのせいかもしれない……………

その辺り、わかり次第追記、または記事にしていきたい。。。。。。

 

追記======
これについてはだいたい解決しました笑
下記ページ参照 

【Classic Paragraph】新エディタ『Gutenberg 』内で『TinyMCE Advanced』をフルで使うには?

 

 

他にも使えなくなる機能・プラグインは結構存在するみたいです。

そして、

新エディタでも、『ブロックの再利用』というのがあり、その枠によく使うパタン、タグなどを保存して何回も使えるようにできますが、

これは、

書いた文字に対してそれを選択してそこにあてるという機能ではないので、これまでのようにワンタッチとまではいかない、、、

その再利用ブロックを先に引っ張ってきて、それをそのとき用にブロックで編集する必要がある。

つまり、一手間ふえてしまう感じ。。。。

 

ここは何らかの改善がされることを期待したいです。

 

 

❤︎4、ブロックごとにしか文字カラーを変えられない?

また、文字カラーを変えるのも、ブロック単位でしかワンタッチではできない!

部分的に文字の途中でカラーを変えたい場合、そのブロック単位でコード編集する必要が現地点ではある。。。。。

例えば、

『旧エディタってやはり描きやすいよね、【Gutenberg】はまだ慣れないよね』

など、部分的にカラーを変えたい場合、【Gutenberg】でワンタッチでヤルには、ブロックを変える必要がある↓

 

『旧エディタってやはり描きやすいよね、

【Gutenberg】

はまだ慣れないよね』

 

みたいにいちいちくぎれてしまうことになる笑

 

『旧エディタってやはり描きやすいよね、【Gutenberg】はまだなれないよね』

ってしたいなら、

そのブロック内でHTML編集が必要になる↓
ブロック内部分的カラー指定タグを再利用ブロックで保存しておくにしてもそのときによって編集が必ず必要になるのですんごい面倒 笑

 

他に何か簡単にワンタッチでできる方法があるのかもしれない。。。

でもまだ検索しても出てこない、、、、

あったら教えて欲しい笑。。。。

 

 

❤︎5、【TinyMCE Advanced】は使えなくともなんとかなりそう?

結局、【TinyMCE Advanced】はカスタマイズして使いやすくできるところに価値があったりしていた。。。

そして新エディタ内で旧エディタブロックを駆使して使うにしても、記事の中で混ざってしまうのはなんとなく嫌な予感が走ってしまう笑

ただ、部分的にカラーを変えたいテーブルを細かくビジュアルで編集したい場合などはやはり便利だけれど、、、

上記の再利用ブロックはワンタッチでの呼び出しも可能なようなので(これは検証してまとまったらまた書きます)
全て新エディタで強引にやってみると慣れてはくるし、いろいろ工夫の仕方も発見できるので、結構なんとかなったりする。

現段階ではまだまだ使いづらい感じを否めませんが、アプデするだろうし、他には旧エディタでできなかった機能も実はかなりあって便利な部分もある。

だから所有するサイトのどれかでは新エディタのみでなんとかして慣れておくのが良いかなと…そう感じました。

 

 

❤︎6、テーブルは勝手にバランス取ってくれる

新エディタでもデフォでテーブルをワンタッチで組むことはできる。

 

エディタ左上のブロック追加のプラスボタン>フォーマット>テーブルフォーマット-テーブル

 

テーブルの列数と行数を指定するだけであとはだいたいバランス取ってくれるテーブル数記入

 

テーブル

 

ただ、ビジュアル面での細かい編集が【TinyMCE Advanced】ではできたのですが、新エディタのここからは下図の項目しかできないみたい…….
テーブル編集

 

セルの統合やマージン、パディングなどの設定はこれではできないみたい、、、

高度な設定部門でやるのかな?

これもかなり、超がっかり。。。。。

早くアプデしてね❤︎

 

 

❤︎7、トータルでの編集が不便

どちらにしてもいずれ旧エディタは廃止されるようなので新エディタに慣れるためにもう全部ガンガン使っていこうと思っていたのですが、

いちいちブロックごとで編集なので、書くテンポ、リズム感を崩されてしまい、トータル的なライティング感としては今のところあまりにも使いづらくて時間がかかるので私は今の地点ではメインで使わないことにしました笑

それとまとめて削除とかもどうやるのかわからない笑

今のところブロックごとに削除しています笑
(追記:ブロックを1つ選んで全選択→さらに全選択→削除、でできました。
command+A→さらにcommand+Aで全選択→delete)

 

旧エディタに戻ると、『なんて使いやすいんでしょう!』ってなっちゃいます笑

これからどんどん改善されていくことにすんごく期待したいと思います。

 

 

❤︎8、旧エディタで書いた記事たちの編集をどうするか?

で、先々の問題としては、旧エディタで書いた記事のリライトが必要な場合です。

根本が違うので、後で新エディタで編集すると表示が崩れるようです。
(警告てきなものが出ます)

なので、既存記事のリライトには旧エディタを使いましょう?ってなってくるけど、

いずれ旧エディタは廃止されるであろうと言われているので最終的にはどうすればいいの???って現地点ではなっちゃいます。

さらに、

新エディタ内でも旧エディタを使えますが、そのように混合させて書いた記事も、今後5.0に更新するときや、旧エディタが完全に廃止されるときに面倒くさい対応が必要になってくるであろうことを想像してしまいます。

その辺りもなんとか簡単に対応できるような進化を願いたいw。。。

 

 

❤︎9、これから新規でワードプレスを使う、インストールする場合

新規でワードプレス5.0以降をインストールして最初から新エディタで始める場合は、蓄積した記事がないので、(旧エディタ記事で書いたもののリライトがないので)、既存記事の表示崩れなどの心配は、旧エディタでいきなり編集し直すとかしない限り心配はないと思うし、最初から5.0以降なら記事を書きづらいにしても、大きな被害はないと思う。

特に、初めてワードプレスを使う方なら、旧エディタを知らない方が良いのかもしれない。

ただし、新エディタのバグが結構あるのと、それを解決できる情報もまだまだネットに足りてないので苦戦する可能性もある。

フロー記事でしょうけれど、私は備忘録として気づいたことを書いていこうと思います。。。。

 

エックスサーバーでワードプレスの自動インストールする場合、マイナーアップデートの最新版でインストールされるので、いきなり5.0以降でインストールはされない。

なので最初に4.9.9からで様子みるのもいいと思います。
(私はそうしています)

 

ただ、上記に書いたように、

  • WordPress 5.0 以降、版日本語版ワードプレスに 【WP Multibyte Patch】 プラグインは含まれなくなる。新規直でワープレ5.0以降をインストールする場合は必要に応じて WP Multibyte Patch を自分でインストールする必要がある。
    (※4.9.9の新規自動インストールには入っています。)

WP Multibyte Patch:
WordPress を日本語環境で正しく動作させるために必要となる機能を網羅しているプラグイン。

ここは注意点だと思う。

 

そんなところでした

 

現場からは以上です!

 

ってことで楽しいクリエイトあれ!

しゃらんるあぁああああ❤︎

【再利用ブロック】ワードプレス新エディタGutenbergでAddQuicktagの代打として使う

 

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket