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

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

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

注意!

ここからの情報は、PHP でコードが書けたり、ワードプレスのカスタマイズ知識や技術をある程度持っている上級者向けの内容として公開しています。

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

このようなカスタマイズがスラスラできるようになると、ワードプレスを扱う技術力も向上し、自信にもつながります。

もし駆け出しや初心者の方でも「やってみようかなぁ・・・」と、やる気がある方は、ぜひ挑戦してみてください!

サンプルコード

下のコードは、カスタマイズ用のプラグインを作って、プラグインフォルダ内にある「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 を上書きできます。

WordPress テーマ Nishiki Pro

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

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

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

最新情報をチェック!

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

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

など