サイト全体に「モダンブラック 」スキン適用中。

ブロックエディター(Gutenberg)でCocoon用ブロックを利用する方法

ブロックエディター

WordPressも5.0となりブロックエディター(Gutenberg)が標準化されました。

Cocoonテーマでも今後、できる限りブロックエディターに対応していければと思っています。

尚、「ブロックエディターはまだ必要ない」という方は、以下の手順で旧エディター表示にすることも可能です。

ブロックエディター(Gutenberg)を使用しないで旧ビジュアルエディターを利用する方法
投稿画面のGutenbergエディターを無効にして旧式のエディターで編集する方法です。
スポンサーリンク

ブロックエディター対応Cocoon Blocks

Cocoon1.6.4以降Cocoon Blocksはテーマ内に組み込まれました。テーマをインストールするだけでCocoon用のブロックを利用できます。
Cocoon Blocksプラグインを利用している場合は、無効にすることをおすすめします

Cocoonでは、ブロックエディターに対応させるために、開発した「Cocoon Blocks」というプラグインをインストールして利用します。

テーマのバージョンチェック

Cocoon Blocksプラグインを利用するには、Cocoon1.4.9.1以上が必要です。

バージョンが満たない場合はWordPress管理画面の「ダッシュボード→更新」からアップデートを行ってください。

Cocoonテーマを最新版に更新する

Cocoon Blocksのインストール

プラグインを利用するには、まず以下からCocoon Blocksプラグインをダウンロードしてください。

ダウンロード後は、WordPress管理画面から「プラグイン → 新規追加 → プラグインのアップロード」からインストールしてください。

WordPress管理画面から「プラグイン → 新規追加 → プラグインのアップロード」からインストール

インストールを終えたら、投稿画面の「+」をクリックして「Cocoonブロック」カテゴリからご利用ください。

Cocoonブロックカテゴリーから利用

Cocoon Blocks現在の対応状況

現在Cocoon Blocksが対応しているブロックデザインはこちら。

Cocoon Blocksの現在の対応状況
Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

Cocoon Blocks利用の注意点

Cocoon Blocksプラグインは、Cocoon1.6.4からテーマ内に正式版として組み込まれました。

まだ不慣れなため、以下の注意点を踏まえた上でご利用ください。

  • Cocoon BlocksはCocoonテーマ専用のプラグインです
  • 他テーマで利用してもエラーは出ませんがスタイルは反映されません
    (※Cocoonスタイルを当てれば利用できるけど)
  • Cocoonテーマのバージョンは常に最新版を推奨します
  • Cocoon Blocksプラグインはベータ版です
  • 今後暫くは仕様が安定しない可能性があります
  • 作り始めたばかりなのでまだ機能は少ないです
  • 必ずしも旧エディターと同じ仕様になるとは限りません(仕組みが違うので)

上記を踏まえた上で、「試しに使って問題があったら報告してあげる」という方がおられれば、是非フォーラムに報告いただければ幸いです。

僕自身、React(JSX)を触ってまだ1週間程度(公開時点)です。

言語の作法など、まだ完全に理解しておらず「もう少しスッキリと書く方法があるのでは」と思いつつも、何となくで書いている部分も多少あります。

ですので、今後開発をしていくい中で、良い方法があれば、出来る限り以前の状態を守りつつも仕様変更する可能性はあるのでをご了承ください。

とりあえず公開して、様々な方のご意見を聞きながら、今後とも発展させていければと思います。

GitHubリポジトリはこちら。

yhira/cocoon
100%GPLの無料Wordpressテーマです。. Contribute to yhira/cocoon development by creating an account on GitHub.

ブロックエディター
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
○アダルト・出会い系サイト可

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
○アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント

  1. WP4.9.9ユーザー より:

    「Classic Editor」ではブロック形式のデザインに対応できない
    ということですね

    結構手強そうだな、Gutenberg。

    • わいひら わいひら より:

      「Classic Editor」プラグインを使うと、強制的に旧式のビジュアルエディターになるのでブロックは使えないと思います。

タイトルとURLをコピーしました