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

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki(Pro)
  4. 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

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

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

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

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など