夫婦でしっかり子育てしたい、パパのための情報サイト

子育てライブラリ

AFFINGER5(WING)をGutenbergに対応させる方法(簡易版)

投稿日:

AFFINGER5(WING)は非常に使い勝手のいいテーマなのですが、Gutenbergに対応していません。

そのため Classic Editor を使用することが前提になっているのですが、Classic Editor のサポートは2021年末まで。

その頃にはGutenbergに対応したバージョンが発売されているとは思いますが、対応しなかったときのためにGutenbergに備え付けられているクラシックブロックに対応させてみたいと思います。

Gutenbergにスタイルを読み込む

AFFINGER5(WING)でクラシックブロックを使えば、 Classic Editor を使わなくてもスタイルタグなどの便利な機能をそのまま使用することができます

ですがCSSが適用されていないので、装飾しても表示がまったく変わりません/(^o^)\ナンテコッタイ

なので Gutenberg でもCSSが適用されるようにしましょう。

やり方は超簡単で、function.php に以下のコードをコピペするだけ!

//▼クラシックエディタ用の設定
function my_custom_editor_style() {
    // Gutenberg にエディター用のスタイルの適用をサポート
    add_theme_support( 'editor-styles' );    
    add_editor_style( 'css/editor_style.css' );
}
add_action( 'after_setup_theme', 'my_custom_editor_style' );

これで Gutenberg のクラシックエディタでも、スタイルタグで装飾を行なうことができるようになりました。

クラシックブロックのデザインを整える

別にデザインなんぞ整える必要はない! って方はやらなくてもいいのですが、上記のコードをコピペしただけでは、こんな感じになって非常に使いづらいです。

なのでクラシックブロックを使いやすくするため、デザインを整えてやりましょう。

小テーマにcssフォルダを作り、その中にeditor_style.cssを放り込みます。

そしてeditor_style.cssに下記のコードをコピペしましょう。

.wp-block {
  max-width: 920px;
}
.editor-post-title__input{
	font-size: 22px;
}

.block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar{
	margin-right: 40px;
}

.mce-container.mce-toolbar.mce-stack-layout-item.mce-first,
.mce-container-body.mce-flow-layout,
.block-library-classic__toolbar .mce-toolbar-grp > div,
.mce-toolbar .mce-btn-group > div{
	margin-bottom: 0;
}

.mce-toolbar .mce-btn-group > div{
	white-space: wrap;
}

これでクラシックブロックの見た目が、

こんな感じになって使いやすくなりました。

クラシックブロックを使って簡易的に対応しているだけなので、文字数のカウント機能などは使えなくなってしまうのが難点ですかね?

しかしAFFINGER5(WING)のいいところと、Gutenbergのいいところを同時に使用することができるので、記事の作成は早くなるんじゃないかなーと。

AFFINGER5(WING)を使いつつGutenbergを使いたいという方は、一度試してみてはいかがでしょう?

-カスタム

Copyright© 子育てライブラリ , 2019 All Rights Reserved.