公開する記事にスタイルシート（CSS）を設定してみる:【67日目】WordPress1日１プラグイン

ようこそのお運びで、厚く御礼申し上げます。
６７日目です。記事に設定するスタイルシート(CSS)についてちょっと調べてみました。

公開する記事にスタイルシート（CSS）を設定してみる。

functions.phpやプラグインファイルで公開する記事にスタイルシートを設定してみます。

まずは訂正。今までの勘違い。

間違いではないけれど、実は過去の記事とかで作成しているのを見ると・・・

add_action('wp_head', 'paka3_admin_css');

とか

add_action('wp_print_styles', 'paka3_admin_css');

とかでwp_headやwp_print_stylesを使っていたのですが、スタイルシートの操作や安全性においてあまりよろしくなさそう。
参照:WordPress Codex:wp_print_stylesにもかいてますが、wp_enqueue_scriptsを使っていきます。

それではあらためて、前提条件から。

前提条件として、テンプレート（ヘッダー部：header.php）に

<?php wp_head();?>

と書いていることが前提です。

直書きのスタイルシート（CSS）を埋め込んでみる。

//管理画面全体に反映
add_action('wp_enqueue_scripts','paka3_css');
function paka3_css() {
   echo <<< EOS
     <style  type="text/css">
       body{background:#f00};
     </style>
EOS;
}

条件分岐を行う場合

記事ページと固定ページのみ反映させる場合はif文でis_single()やis_page()を使いましょう。

//記事ページと固定ページのみ反映
add_action('wp_enqueue_scripts', 'paka3_css');
function paka3_css() {
  if(is_single() && is_page()){
   echo <<< EOS
     <style  type="text/css">
       body{background:#f00};
     </style>
EOS;
  }
}

外部スタイルシート(CSS)を設定する場合は

外部スタイルシートファイル(css)を安全に呼び出す場合は、wp_enqueue_styleを使います。
WordPress Codex 日本語版：wp_enqueue_style

add_action( 'wp_enqueue_scripts', 'paka3_css' );
function theme_name_scripts() {
	wp_enqueue_style( 'paka3style.css', get_stylesheet_uri() );
}

※wp_enqueue_styleはバージョン等細かい設定もできるみたいなので使い方を考えてみてもよさそうです。

今回のまとめ

今回は公開記事のスタイルシートについて書きました。記事にも述べた通り、「使えてるから大丈夫」っていうのが所々あって、調べてみると「あれ？こっちを使った方が良さそうだ」っていうのがありましたね。
管理画面のスタイルシートについても、admin_print_stylesを使っているので再度見直しが必要みたいです。