新プラグイン「Cocoon Blocks」でライティングを快適に!

WordPress

こんにちは、富男です。

現在、TomioBlogではWordPressのテーマは「Cocoon」を使用しています。
また、記事を書く際、新エディタのGutenberg(グーテンベルク)を使って記事を書いています。しかし、Gutenbergを使用する場合、旧エディタで使えたCocoonの様々な便利機能が使えませんでした。

今回はその便利な機能を新エディタGutenbergでも簡単に使えるようになるプラグイン「Cocoon Blocks」をご紹介します。

Gutenbergとは?

そもそも、ずっと旧エディタを使用してきた方はGutenbergとはなんだろうと思うかもしれません。

GutenbergはWordPress 5.0から搭載されたエディタで、 ブロックエディタ方式が採用されています。今までの旧エディタだと、一つの枠の中に段落や見出し、画像などをまとめて記載していたと思いますが、Gutenbergではそれぞれがブロックとして別の要素として配置されます。

旧エディタの場合

旧エディタの場合、以下の画像のようにすべて一つのまとまりです。

Gutenbergの場合

Gutenbergの場合、少し分かりづらいですが一つのまとまりではなく、各要素がブロック(段落)として記載されています。これがブロックエディタ方式と呼ばれるものですね。

「Cocoon Blocks」プラグインのインストール方法

事前確認

まだベータ版ということらしいので、以下の注意点をプラグインを入れる前に確認してください。

詳細については、わいひらさんの公式サイトに記載されています。そちらも確認してみてください。

・Cocoon BlocksはCocoonテーマ専用のプラグインです

・他テーマで利用してもエラーは出ませんがスタイルは反映されません
(※Cocoonスタイルを当てれば利用できるけど)

・Cocoonテーマのバージョンは1.4.9.1以上推奨です

・Cocoon Blocksプラグインはベータ版です

・今後暫くは仕様が安定しない可能性があります

・作り始めたばかりなのでまだ機能は少ないです

・必ずしも旧エディターと同じ仕様になるとは限りません(仕組みが違うので)

Cocoonでブロックエディター(Gutenberg)用プラグインを利用する方法
Gutenberg対応プラグイン「Cocoon Blocks」インストールして利用する方法の紹介です。

Cocoon Blocksのダウンロード

プラグインを追加するために、 Cocoonの公式サイトからプラグインをダウンロードします。
サイトに移動後、以下画像のように”Cocoon Blocks”をダウンロード」をクリックしてください。そうするとプラグインのZIPファイルがパソコンにダウンロードできます。

Cocoon Blocksプラグインのダウンロード
Cocoonの旧ビジュアルエディタースタイルをブロックエディター(Gutenberg)に移植したプラグインです。

Cocoon Blocksのインストール

WordPressの管理画面より先ほどダウンロードしたZIPファイルをインストールしていきます。
プラグインのインストールは左側の「プラグイン」>「新規追加」からできます。
インストールが完了したらプラグインの有効化をしてください。

Cocoon Blocksを使ってみよう!主な機能の紹介

インストールが完了したので、さっそくプラグインを使ってみましょう。

追加された機能は大きく分けて2つになります。

インラインの装飾

まず一番このプラグインでうれしい機能と感じたのが、インラインの装飾です。
Gutenbergではブロック全体で色の装飾が反映されてしまうため、
GutenbergでCocoon機能のマーカーなどを使用するためには、以下のような手順が必要でした。

  1. 新規ブロックの追加
  2. 「クラシック」を選択し追加
  3. 「スタイル」から「マーカー」で好みのマーカーを選択

「Cocoon Blocks」を使えば文字入力後、すぐにマーカーを使用することができます。
文字入力画面の上部にペンのイラストがありますが、それをクリックするだけです。

今まで3手順もかかっていた作業なので、かなり楽になりましたね。

案内・アイコンボックスなどの追加

Gutenbergでは、案内ボックスやアイコンボックスを使う場合にも、上記のインラインの装飾と同様に、「クラシック」から追加するしかありませんでした。

アイコンボックスとは、このようなボックスのことです。

しかし、プラグインを使用すると簡単に追加することができます。

新規ブロックを追加する際、プラグインを有効化していると「Cocoonブロック」といった要素を選択できます。
こちらから案内ブロックやタブブロック、ブログカードなどが追加できるようになりました。

ブロックのデザインは、右のプルダウンから変更できます。

こちらも表示するのに手順が少なくなったので、便利になりましたね。

まとめ

今回はCocoonのプラグイン「Cocoon Blocks」をインストールしました。

もともとCocoonは無料とは思えないほど高機能なテーマですが、さらにエディタが使いやすくなりました。

「Cocoon Blocks」はまだベータ版ということなので、これからもまた便利な機能が追加されるかもしれません。(すでにかなり便利ですが。)今後のアップデートを期待して待つことにしましょう。

それではまた!

トップへ戻る