wordpressで特定のページにのみにCSSを適用させる方法
wordpressで特定のページにだけCSSを適用する方法。
外部cssを読み込む方法、head要素内に記述する方法、
body内に記述する方法(HTML5のみ)の3通り紹介します。
メモ的エントリーです。
外部CSSを読み込む
カスタムフィールドを使います。
function.phpに以下を記述します。
ここではカスタムフィールドの名前を"includeCSS"としてます。
function include_custom_css(){
if(is_single()||is_page()){
if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
}
}
}
add_action('wp_head','include_custom_css');
wordpressの管理画面では、カスタムフィールドの名前を"includeCSS"にして、
値を読み込みたいCSSファイルの絶対パスを入力します。

head要素内に記述する
カスタムフィールドを使います。
function.phpに以下を記述します。
ここではカスタムフィールドの名前を"insertCSS"としてます。
function insert_custom_css(){
if(is_single() || is_page()){
if(have_posts()): while (have_posts()):
the_post();
$css =get_post_meta(get_the_ID(), "insertCSS", true);
echo "<style type=\"text/css\">\n{$css}\n</style>\n";
endwhile; endif;
rewind_posts();
}
}
add_action('wp_head','insert_custom_css');//wp_head読込み時に実行
wordpressの管理画面では、カスタムフィールドの名前を"insertCSS"にして、
値を読み込みたいCSSファイルの絶対パスを入力します。

body要素内に記述する(HTML5のみ)
HTML5ではscope属性を指定して、いくつかのルールに従うことで
body要素内にもcssを記述することができます。
scoped属性を指定したstyle要素に記述されたスタイルは、
ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。
参考:HTML5のstyle要素が持つscoped属性について
<p>ここのテキストは通常の表示です</p>
<section>
<style scoped="scoped">
p{
color:red;
}
</style>
<h1>scoped test</h1>
<p>ここのテキストは赤字になります</p>
</section>
ただし、現在主要なブラウザはscopedに対応してないので、
下記のような書き方にしておきます。
<p>ここのテキストは通常の表示です</p>
<section id="post">
<style scoped="scoped">
#post p{
color:red;
}
</style>
<h1>scopet test</h1>
<p>ここのテキストは赤字になります</p>
</section>
Comment
コメント(0)
コメントする
Trackback(1)
田園ライフ