cocoonをカスタマイズ！ブロックエディタからTinyMCE Advancedに変更し、エディタメニューに「スタイル」を表示する方法

どうも、Monagaです。

記事の対象者は以下のような方を想定しています。

wordpressのテーマとして、cocoonを入れたはいいものの、投稿の編集画面がブロックエディタ？になってるし、いろんなスタイルがあるにしてもどういう風に使えるのかわからない。

記事の内容

cocoonは無料で使えるテーマとして非常に優秀ですよね。

このcocoonが提供している機能は個人で1から用意するには結構な時間がかかってしまいます。

また、元からブログで欲しい素材を用意してくれているので、何をスタイル的に追加しなければいけないのか？をあまり考えなくても良いのは大きいです。

僕はまだまだブログ初心者なので、どういったスタイルを用意すべきか？をあまり理解しておらず、このcocoonというテーマは僕にとってとても便利です。

ただ、たしかにデフォルトでは少し使いづらい部分があるのも事実で、今回はこのエディタ部分がデフォルトでは使いにくいので早速カスタマイズしてみたいと思います。

まずブロックエディタを無効にしてしまいましょう。

以下の通りにクリックしていき、エディタ設定まで行きます。

「Gutenbergエディターを有効にする」のチェックを外し「変更をまとめて保存」

これで投稿画面にて従来のクラシックエディタが表示されるかと思います。

説明不要と思いますが念の為記載します。

プラグイン->新規追加より「プラグインの検索にて」TinyMCE Advancedを検索&インストール

インストール後は「有効化」を忘れないようにしましょう。

最後ですね。以下の手順にて行います。

設定->TinyMCE Advancedより設定画面に移動

Classic Editorタブにて、「使用しないボタン」部分より「スタイル」をドラッグ&ドロップで上のエディタ部分の好きな場所に配置し、「変更を保存」する

これにて、投稿画面にて「スタイル」が表示されます。

このように「スタイル」を押すとドロップダウンメニューが表示され様々なスタイルを選択することが可能になります。

とても便利ですね。

僕が使いそうなものをパッとあげるとこんな感じでしょうか。

ボックスアイコン

ボックス案内
ボックス案内

ボックス白抜き

ボックスタブ

ボックス付箋風

と少し列挙しただけでこれほどあります。もちろん色もそれぞれ変更可能です。

「スタイル」以外にも「ショートコード」といって欲しい情報を表示できる仕組みや、「テンプレート」といって自分がよく使うスタイルをテンプレート化しておけるなどとても便利な機能がcocoonにはあります。

これは初心者には嬉しい限りですね。

これからもcocoonの便利なカスタマイズ方法等あれば発信していくのでよければ見てください。