人気キーワード

CocoonテーマのGutenbergが使いにくい!TinyMCE Advancedでクラシックエディターを使う

WordPressのGutenbergって知ってますか?

私は2019年5月からWordPressを扱い始めて、6月にブログを立ち上げました。

Gutenbergが何か、ということもずっと知らずに、WPってこんなものと思ってエディターとして使っていました。

で、最近WordPressのプラグインでTinyMCE テンプレートをリサーチしたことで、芋づる式にTinyMCE Advancedも調べてみました。

このTinyMCE テンプレートは、よく使うフレーズや入力用のスタイルシートのボックスなどを、テンプレートとして保存しておいて、『投稿』で使うことができるんです。

例↓

このボックスもテンプレです!

つまり『投稿』で使う記事用のテンプレートを作ることで、手軽に素早く記事が書ける!ってことなんですが、この便利なプラグイン、TinyMCE テンプレートはGutenbergでは使えないんです。 もっと言うと、TinyMCE Advancedというプラグインも必要になります。

つまりTinyMCE テンプレートを使いたければ、TinyMCE Advancedも入れなきゃ使えないということです。
ということで、Gutenbergを使わない方法を調べてみました。当ブログは、Cocoonを使用していますので、Cocoonテーマ限定でお話します。
この記事を読むとできること Cocoonテーマで設定を変えて、Gutenbergを使わず、クラシックエディターを使う設定にする方法を学ぶ。

まずはGutenbergってなに?

WordPress公式ブログでは、下記のように新エディターを『Gutenberg』と呼んでいます。

私たちは新しいエディターを Gutenberg と呼んでいます。メディア重視のページや投稿向けに、すべてのコンテンツ編集エクスペリエンスを再構築しました。初めてブログを構築している方も、仕事としてコードを書いている方も、ブロックがもたらす柔軟性を体験してみてください。

Gutenberg は WordPress 5.0 以降の一部として利用可能です。必要であれば Classic Editorプラグインを使用して以前のエディタに切り替えることができます。今後の開発は Gutenberg プラグインで続けられます。

『Gutenberg』ってエディターの名前のことだったんだね。

Gutenbergは直感で使える

Gutenbergは直感的に、コマンドを選んでいくだけで、使えます。

CocoonテーマのGutenbergが使いにくい!TinyMCE Advancedでクラシックエディターを使う
CocoonテーマのGutenbergが使いにくいのでTinyMCE Advancedでクラシックエディターを使う
  • 少ないプラグインでより多くを実現
  • モダンで、マルチメディア重視のレイアウトを作成
  • すべての画面サイズと端末で動作
  • 実際のブログと同様に表示されるエディター

イメージ挿入も希望の選択肢を4,5回選んでいくだけで、簡単挿入できる。

段落はブロックで分かれていて、技術知識もあまり必要なく、マルチメディアコンテンツの挿入、並べ替え、スタイル設定が可能。 カ

スタムコードを使うかわりに、ブロックを追加して、コンテンツ作成に集中できる。

Gutenbergには慣れていない

Word、Excelなどのソフトを使った人なら、分かると思うんですが、Gutenbergの使い方は全く違います。

今までのソフトと全く違う種類のエディター設定になっていのでかなり使いにくいです。

  1. 設定が違う
  2. コードの自動変換
  3. ブロックで区切ってある

⇩順に説明していきます。

設定が違う

Gutenbergは、Word、Excelなどのソフトを使った人には使いにくい仕様となっています。

少なくとも私には使いにくかった。

普通、ヘッダーに常時表示されているコピー、貼り付け、切り取るなど、いろんなボタンが表示されていない。

WordPress初心者の私は、WPってこんなもの。

こんな使いにくいエディターを使っているなんて、面倒。

ずっと、変えられるということを知らなかった。

 

便利なプラグイン、TinyMCE テンプレートを検索、調べてみたことで、Gutenbergではなく、Classic Editerに変えられるというエディターに変えられるということに気づいた。

この気づきに到達するまで、2カ月はかかった。

コードの自動変換

まず、Gutenbergは、間違っているコードは自動的に、正して、表示してくれます。

意図した時は、非常に役立つ機能ではあるけど、私の場合、意図してない時が多いので、困りもの。

 

Cocoonテーマでデフォルトで入っているコードも、Gutenbergではエラー表示が出て、Gutenbergで正しい表示に書き換えられるか、または全消去。

Cocoonテーマでなくても、私が自力で書いたHTMLコードも、途中だったり、未完成だったり、少し間違っているだけで、Gutenbergで正しい表示に書き換えられるか、または全消去。

そして、『戻る』のボタンを押しても、途中までしか戻れなくて、先ほど入れた未完成、または間違ったコードは戻ってこない。

また同じコードを手書きで書き加える。

少し間違っただけで、全消去。

ただブログを書きたいだけなのに、コードもうまく入れられず、Gutenbergで認識されていないコードを入れると全消去。

また振り出しに戻る。

 

その繰り返しで、全然、記事を書く段階まで、進んでいかない。

苦労して、記事を書いても、通常なら、1,2時間で終わる作業も、3,4時間かかってしまっていることもある。

ブロックで区切ってある

Gutenbergは、ブロックで区切ってあります。

コードを見たい時は、Classic Editerに変える必要があり、ブロックごとにClassic Editerで見ることも可能だけど、全体的にコードを見たい場合は、『設定』⇒エディター『コードエディター』に変えることで、コードを見ることができる。

ただコードを見たいだけなのに、いちいち何度もクリックするのが面倒。

ただし、コードを直接入力しても、Gutenbergが認識していないコードだと、自動的に書き換えられるか、全消去なので、苦労してコード入力しても、時間と労力の無駄になることが多い。

しかも、記事全体か、2~3ブロックまとめて、コピーしたい時も面倒。いちいち、ブロックごとに分かれているので、コピーするのにも一苦労。

旧ビジュアルエディターに変える

Cocoonテーマで、Classic Editerに変えるには Cocoon設定⇒Cocoon設定⇒エディター エディター内の『エディター共通設定』の上部に、

□Gutenbergエディターを有効にする 無効化することで旧ビジュアルエディター形式で投稿画面が表示されます。

□のチェックマークを外すだけです。

CocoonテーマのGutenbergが使いにくい!TinyMCE Advancedでクラシックエディターを使う
CocoonテーマのGutenbergが使いにくいのでTinyMCE Advancedでクラシックエディターを使う

CocoonテーマのGutenbergが使いにくいのでクラシックエディターを使ってみたのまとめ

Cocoonテーマでは、Gutenbergの使い勝手が悪いと思われる方は、簡単に旧ビジュアルエディターに変えることができます。

どちらが使いやすいか試すのもありかと思います。

iPhone充電ケーブルおすすめランキング

クリックでブログ内解説に飛びます⇩ 画像(クリックでAmazonに飛びます⇩) 価格
※調査時より価格変動があります
耐久性 充電速度
1位:Apple純正iPhone充電ケーブル 1.0m – 2,668円税込

0.5m – 2,668円税込

2位:Anker iPhone 充電ケーブル PowerLine II ライトニングケーブル 940円
3位:Anker PowerLine II ライトニングUSBケーブル 1,390円
4位:オウルテック・2年保証超タフ充電ケーブル 1,480円
5位:オウルテック巻き取り式iPhone充電ライトニングケーブル 1,780円
6位・ActionPie iPhone 充電ケーブル 【5本セット 1/1/2/2/3M】 1,199円
7位・Amazonベーシック ライトニングケーブル ダブルナイロン編組 USB MFi認証済 iPhone充電ケーブル 974円
CocoonテーマのGutenbergが使いにくい!TinyMCE Advancedでクラシックエディターを使う
最新情報をチェックしよう!
Amazonで人気アイテムを探す
Amazonで人気アイテムを探す