WordPress5 新エディタにCSSを適用する方法

  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

WordPressはバージョン5から、編集画面とその中身の処理が大幅に変更になりました。新エディタ(Gutenberg)の採用です。

エディタがブロック形式でコンテンツを作成することになったので、CSSの適用方法も変わりました。

GutenbergでのCSSの適用方法を分かりやすく解説します。

GutenbergでCSSを適用する方法はかんたんです。まずは追加するコードから。これをfunctions.phpやプラグインのルートの.phpファイルに追加します。

ブロックエディタとフロント(表示するWebページ)の両方にCSSを適用
add_action( 'enqueue_block_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );
ブロックエディタだけにCSSを適用
add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

plugins_url()は、プラグインのホームディレクトリにあるedito.cssファイルのurlを作ります。テーマの場合は、

get_stylesheet_directory_uri() . '/editor.css'

のようにします(テーマのホームディレクトリにeditor.cssがある場合)。

追加するコードはこれだけです。

'enqueue_block_assets'は、ブロックエディタ(編集画面)とフロントの両方に適用します。ほとんどは、このアクションフックに処理を追加するだけでよいです。

'enqueue_block_editor_assets'は、ブロックエディタだけにCSSを適用させたい時に使います。

ブロックでは、エディタのメニューやオプション設定もカスタマイズできるので、このような、エディタだけで表示するコンテンツのCSSを適用するときに使います。

これまでのビジュアルエディタでは、add_editor_style(), add_theme_support()を使ってエディタ用のCSSを用意していましたが、Gutenbergではその必要はありません。

クラシックエディタを使うときは

クラシックエディタを使っている場合、エディタはブロックエディタではなく、ビジュアルエディタを使うことになるので、さきほどのスタイルは適用されません。

WordPress5以前の、ビジュアルエディタのスタイル適用を使う必要があります。

WordPress5以前のエディタにスタイルを適用
// テーマのホームディレクトリにeditor-style.cssを配置すること!
add_action( 'admin_init', function() {
	add_editor_style( [ 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', 'editor-style.css' ] );
	add_theme_support( 'editor-style' );
} );

クラシックエディタとブロックエディタを両方使う場合は、2つともコードを追加する必要があります。

WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずに、インターネット上にある情報だけで学んでいけます。


WordPressの本5選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!