プラグイン「my-unitone」から独自CSSを読み込む方法

ブロックテーマのCSSカスタマイズはどのように行っているでしょうか?

基本的には、テーマに追加CSSを書くことになると思います。

ただ、この方法では多くのCSSを書く場合に不便です。

そんな時は、unitoneの専用プラグイン「my-unitone」に独自CSSファイルを用意して読み込む方法がオススメです。

方法は3ステップです。

①プラグインを準備する

unitone公式サイトから、my-unitoneをダウンロード。

プラグインをWordPressにインストールします。

②独自CSSファイルを用意

FTPソフトなどで、my-unitoneプラグインファイル内に、CSSファイルを作成します。

ファイル名は「style.css」としておきましょう。

③コードを記述

my-unitoneプラグインファイル内のfunction.phpファイルに、以下のコードを記述します。

// 独自CSSファイルの追加
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-unitone-css',
			MY_UNITONE_URL . '/style.css'
		);
	}
);

//独自CSSファイルを編集画面にも反映
add_action(
	'unitone_enqueue_block_editor_assets',
	function() {
		wp_enqueue_style(
			'my-unitone-editor-css',
			MY_UNITONE_URL . '/style.css'
		);
	}
);

あとは、追加したCSSファイルにカスタマイズを施すだけです。

2025年3月にアクションフック「unitone_enqueue_block_editor_assets」が新しく追加されました。

これのおかげで、フロント画面だけでなく、ブロックエディターの編集画面にも安定してCSSを反映させることができます。

CSS管理も格段に楽になったので、ぜひ活用してみてください。

ホームページ制作受付中

伴走型のホームページ制作サービスを行なっています。集客に強いホームページをあなたとともに作り上げます。また、スキルマーケット「ココナラ」でも出品中です。合わせてご活用ください。