このページでは、Nishiki Pro テーマをカスタマイズする際、独自で用意した CSS ファイルをインラインで読み込む方法について解説しています。

サンプルコード

下のコードは、カスタマイズ用のプラグインを作って、プラグインフォルダ内にある「nishiki-pro-custom.css」をインラインで読み込んでいます。

// 独自の CSS　ファイルをインラインで読み込む
if ( ! function_exists( 'nishiki_pro_custom_read_scripts' ) ) {
 function nishiki_pro_custom_read_scripts(){
  // 読み込むファイルのパスを指定する
  $path = plugin_dir_path( __FILE__ ) . 'nishiki-pro-custom.css';

  //　ファイルがなければ処理しない
  if( ! file_exists( $path ) ){
   return false;
  }

  // バッファさせる
  ob_start();

  // ファイルを読み込む
  include_once( $path );

  // バッファした内容を変数に格納する
  $custom_css = ob_get_contents();

  // バッファ終了
  ob_end_clean();

  // インラインで出力
  return wp_add_inline_style( 'nishiki-pro-main-style', $custom_css );
 }

 //実行の優先度を「101」以降にする←ここ重要
 add_action( 'wp_enqueue_scripts', 'nishiki_pro_custom_read_scripts', 110 );
}

コードがやっていること

上のコード中にコメントで補足しているので、だいたい理解できると思います。minify（最小化）などの処理は書いてませんので、お好みで実装ください。

特に重要なポイントは、アクションフックを使う際、実行優先度を「101」以降に指定することです（サンプルコードでは「110」を指定）。

Nishiki Pro テーマでは、フロント側で読み込む CSS、カスタマイザー関連の CSS 、管理画面で読み込む CSS などをインラインで読み込むようにしています（設定で変更可能）。

それらの CSS の読み込みを終えた後に独自で用意した CSS を読み込むことで、Nishiki Pro テーマ側で用意している CSS を上書きできます。