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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は業務メモとしてスタイルシートの記述方法をご紹介いたします。以下のスクリプトを用いると管理画面に独自の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に追記した例は以下です。

管理画面のソースに出力されています。

管理画面が読み込まれるとアラートが表示される構文なので更新を押すと「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を読み込ませる方法をご紹介いたしました。まだまだ他にも指定方法がたくさんあるので随時追記(または別記事に掲載)させていただきます。ぜひご活用くださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する