これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro:フックを使ってカスタマイズ用の CSS ファイルを読み込む方法

このページでは、Nishiki Pro テーマに独自の CSS を読み込む時のおすすめの方法を解説しています。

注意!

このカスタマイズは、PHP でコードが書けたり、ワードプレスのカスタマイズ知識や技術をある程度持っている上級者向けです。

カスタマイズ用のプラグインを作ったり、子テーマを作って functions.php 内にコードを追記するなどで実装してください。

サンプルコード(プラグインを作って読み込む方法)

下のコードは、カスタマイズ用のプラグインを作って適用する方法の一例です。

// nishiki-pro-custom.css を読み込む場合
if ( ! function_exists( 'nishiki_pro_custom_read_scripts' ) ) {

 function nishiki_pro_custom_read_scripts(){

  // ハンドル名と読み込む CSS ファイルの URL を指定して登録しておく
  wp_register_style( 'nishiki-pro-custom-style', plugin_dir_url( __FILE__ ) . 'nishiki-pro-custom.css' );

  // ハンドル名を指定して読み込む
  wp_enqueue_style( 'nishiki-pro-custom-style' );

 }

 add_action( 'wp_enqueue_scripts', 'nishiki_pro_custom_read_scripts', 20 );
}

wp_enqueue_style」だけ使って読み込むこともできますが、上のコードでは「wp_register_style」で「CSS をいつでも読み込めるよう準備をするよ!」という登録を行い、「wp_enqueue_style」で登録した CSS ファイルの読み込む処理を別々にしています。

読み込みの処理を敢えて分けることで、例えば、if 文で条件分岐をして「特定のページだけ読み込みたい」という場合にも使えます。

僕はこの方法をよく使っています。

おまけ

今時のワードプレスのカスタマイズは、テーマのテンプレートファイルの中身や挙動をガラッと変えるような、とても複雑なカスタマイズを求められない限り、子テーマを作る必要はなく、プラグインを作って適用するといいのではないかと考えています。

ワードプレスに独自のカスタマイズを入れる時は、プラグインでやってしまおう!

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。