【スタイルシート基礎】CSSをhead内にインライン記述する方法

本日は業務メモとしてスタイルシートの記述方法をご紹介いたします。以下のスクリプトを用いると管理画面に独自のCSSをインラインで適用できます。もちろんですが、管理画面内には「#sample（id）」は存在していないので、実際に書くCSSは必要に応じて変更すればOKです。

【スタイルシート基礎】CSSをhead内にインライン記述する方法

function css_inline_code_admin_style() {
	echo '<style type="text/css">
	#sample { color:#333333; }
	</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'css_inline_code_admin_style');

上記を有効中のテーマ（functions.php内）に記述すれば管理画面で動作します。

管理画面でソースを確認するとタグが出力されていますね。

改行が気になる場合はタブやスペースを詰めて追記すれば反映されます。ちなみにCSS以外ではJavascriptも同様の記述方法でインラインに追加可能です。以下は管理画面で「Hello world!」と表示される命令文。

function js_inline_code_admin_script() {
	echo '<script type="text/javascript">
	alert("Hello world!");
	</script>'.PHP_EOL;
}
add_action('admin_print_styles', 'js_inline_code_admin_script');

functions.phpに追記した例は以下です。

管理画面のソースに出力されています。ちなみに「admin_print_scripts」であれば出力位置が少し変わります。

管理画面が読み込まれるとアラートが表示される構文なので更新を押すと「Hello wordl!」が表示されました。

CSSとJavascriptともに管理画面内で読み込まれているのが確認できました。ちなみにCSSやJavascriptを読み込ませる関数はまだあといくつか方法が残っているので併せてご紹介させていただきます。

head内で外部ファイル（CSS）を読み込む

function my_admin_css_layout_style(){
	wp_enqueue_style( 'my-admin-css-layout-style', get_template_directory_uri().'/style.css' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_css_layout_style' );

head内で外部ファイル（JavaScript）を読み込む

function my_admin_js_code_script(){
	wp_enqueue_script( 'my-admin-js-code-script', get_template_directory_uri().'/script.js' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_js_layout_script' );

Javascript時で条件を追加する場合

wp_enqueue_scriptはいくつか実行条件を指定できます。

// jQuery のコードだった場合
wp_enqueue_script( 'my-admin-js-code-script', get_template_directory_uri().'/script.js', array('jquery'));
 
// body 終了タグ直前で読込みたい場合（読込み位置をフッターにする場合は第4引数を true に）
wp_enqueue_script( 'my-admin-js-code-script', get_template_directory_uri().'/script.js', '', '', true);
 
// body 終了タグ直前で jQuery のファイルを読込みたい場合
wp_enqueue_script( 'my-admin-js-code-script', get_template_directory_uri().'/script.js', array('jquery'), '', true);

ページファイル名を指定する場合

下記はsingle.phpの指定例となります。page.phpなど自由に変更可能です。

// ファイルを読み込む
add_action('admin-head-single.php', 'my_admin_css_or_js_code');
 
// スタイルを直接書き込む
add_action("admin-print-styles-single.php", 'css_inline_code_admin_style');
 
// スクリプトを直接書き込む
add_action("admin-print-scripts-single.php", 'js_inline_code_admin_script');

まとめ

本日はCSSとJavascriptを読み込ませる方法をご紹介いたしました。

まだ他も指定方法がたくさんあるので随時追記（または別記事に掲載）させていただきます。細かい点で言えば「styles」と「scripts」でわずかに扱いが違ったりと状況に応じて各々を使い分けることも可能です。

ぜひご活用くださいませ。