テクノロジー

WordPress5.0のGutenbergについて色々模索中

Tags: /
Written by Kishimoto

2018年12月6日に、WordPressのメジャーアップデート バージョン5.0が公開されましたね。

さて、新しいエディターのGurenbergですが、サイトに組み込むために色々つついているのだけれど、使うこと自体に慣れる必要があるなぁということと、カスタマイズするのもまだまだ理解力が足りない。

ひとまず、Gutenbergを利用する上で、必要なadd_theme_supportを載せてみます。

Gutenbergで使用するadd_theme_support達

// align-wideとalign-fullを使用するためには必要
add_theme_support('align-wide');

// デフォルトのブロックスタイルを読み込む
add_theme_support('wp-block-styles');

// Embedコンテンツのレスポンシブ化
add_theme_support('responsive-embeds');


// エディターのCSSを適用するのは、以前と同様のままになっているようです。
// ただ、クラシックエディターに対応するにはこちらを使い、Gutenberg用はアクションAPIからエンキューしたほうが、管理しやすそうです。
add_editor_style('editor-style.css');

以下のアクションでブロックエディターにCSSを追加できる。

function my_enqueue_block_editor_assets() {
    wp_enqueue_style('my-block-editor-style', get_theme_file_uri('editor-block.css'));
}
add_action('enqueue_block_editor_assets', 'my_enqueue_block_editor_assets');

後は、フォントサイズと色の項目もあるのですが、説明できるほどまだ理解できてないので、公式ドキュメントをご覧ください。
Theme Support – The new Gutenberg editing experience — WordPress

株式会社MIRAIでは、Webマーケティング・コンサルティングから
ホームページ制作・動画制作など、様々なご相談を承っております。

お仕事のご依頼・ご相談はこちら