独自のCSSファイルを追加する

自分で作成したCSSファイルや、CSSライブラリなど、外部のCSSを読み込ませたい場合に
cssを読み込むlinkタグを header.php や footer.php に直接追加する事は以下のような理由で非推奨です。

  • テーマのアップデートについて来れなくなる
  • 特定のCSSの後に読み込ませたい時など、読み込み順を指定できない

悪い例

下記のようなコードを header.php などに直接書き込んではいけません。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

正しいCSSファイルの読み込ませ方

WordPressには CSSファイルを登録するための関数 wp_enqueue_style() が予め用意されていますので、それを使ってください。

以下のコードを子テーマの functions.php などに貼れば実現できます。

function my_add_animate_css() {

	// ハンドル名(識別要の文字列).
	$handle = 'animate-css';
	// 追加したいCSSのURL.
	$src = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css';
	// 特定のCSSの後で読み込ませたい場合はそのハンドル名(指定がなければ空の array() でも可).
	$deps = array( 'lightning-design-style' );
	// 読み込むファイルのバージョン(省略可).
	$ver = '3.7.0';
	// 'all'、'screen'、'handheld'、'print' など 対象とするメディア.
	$media = 'all';

	wp_enqueue_style( $handle, $src, $deps, $ver, $media );

}
add_action(
	'wp_enqueue_scripts',
	'my_add_animate_css'
);

子テーマについては下記のレッスンを参照してください。

カスタマイズの準備 1 : Lightningの子テーマの準備

WordPressのカスタマイズ 独自のCSSファイルを追加する 子テーマとは? 適用中の親テーマは絶対直接カスタマイズしない 利用中のテーマのファイルを直接カスタマイズする…

Lightningなら

ビジネスサイトも





ブログも簡単に作れます

有効インストール数6万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

PAGE TOP