投稿・固定ページに個別にCSSを適用したい

  • 解決済 nico nico

    (@nico-nico)


    13年前

    WordPress3.4.2 親テーマにTwentyeleven 子テーマを作りカスタマイズしています・

    プラグインを使わずに一つ一つの投稿ごとにCSSを適用したいと思い、functions.phpに以下を記述しました。

    add_action('admin_menu', 'custom_css_hooks');
	add_action('save_post', 'save_custom_css');
	add_action('wp_head','insert_custom_css');

	function custom_css_hooks() {
	    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
	}
	function custom_css_input() {
	global $post;
	    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}

	function save_custom_css($post_id) {
	    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	    $custom_css = $_POST['custom_css'];
	    update_post_meta($post_id, '_custom_css', $custom_css);
	}
	function insert_custom_css() {
	    if (is_page() || is_single()) {
	        if (have_posts()) : while (have_posts()) : the_post();
	            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
	        endwhile; endif;
	        rewind_posts();
	    }
	}

    管理画面の新規投稿に新しいフィールド「Custom CSS」が出現したので、テストとして

    p { color:#F00;}

    と記述し、本文<p></p>が赤字になるのを確認できました。ページのソースを見ると

    `<head>
    <style type=”text/css”>p { color:#F00;}</style>
    </head>
    `
    と追加されていました。

    しかし、固定ページpage.phpと投稿の個別ページsingle.phpではCSSは反映されますが、トップページ（index.php)ではCSSが反映されません。

    お知恵拝借願えませんでしょうか？よろしくお願い致します。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • Tsuyoshi.

    (@andante0727)

    13年前

    if (is_page() || is_single()) {
    で、個別ページかシングルページの場合という条件が入っているため、ではありませんか？

    トピック投稿者 nico nico

    (@nico-nico)

    13年前

    ありがとうございます。ご指摘のとおり、
    is_page()は固定ページにCSSを読ませており、
    is_single()は個別記事ページ（single.php）にCSSを読ませているようです。

    is_home()を足しましたが、変化は無く、トップページの表示にindex.phpを使用しているから？と思いindex.phpをhome.phpにリネームしたところ、トップページのみCSSが適用されましたが、

    ・CSSを適用していないはずの他の投稿にまで反映されている。
    ・トップページのみCSSが適用され、次ページ以降には適用されていない。

    nobita

    (@nobita)

    13年前

    こんにちは、

    <head>
<style type="text/css">p { color:#F00;}</style>
</head>

    このような、スタイルを埋め込んだだけだと、ループページで表示する場合は、すべてのP要素が、赤になるのが通常の動作です。
    また、このメタボックスの入力値は、カスタムフィールドと同じような、投稿メタデータになるので、ループで表示された場合に、多分一番最後のメタボックスの値が埋め込まれるだけになるのではないかと思います。
    なので、必要件数文ループさせる必要があります。

    私が作っているレインドロップステーマというテーマがあるのですが、そのテーマでは、
    カスタムフィールドをつかって、それを実現しています。

    動作サンプルは、以下です
    http://www.tenman.info/wp3/raindrops/2012/11/10/%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/

    http://www.tenman.info/wp3/raindrops/2012/11/10/%E6%8A%95%E7%A8%BF%E6%97%A5%E3%82%84%E6%8A%95%E7%A8%BF%E8%80%85%E5%90%8D%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%82%8B/

    http://www.tenman.info/wp3/raindrops/2012/11/12/%E7%B8%A6%E6%9B%B8%E3%81%8D%E3%82%82%E5%87%BA%E6%9D%A5%E3%82%8B%E3%82%88/

    http://www.tenman.info/wp3/raindrops/2012/11/06/raindrops%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E6%A9%9F%E8%83%BD/

    テーマは、
    http://wordpress.org/extend/themes/raindrops

    にありますので、よろしければ、コードを読んでみてください　:)
    （　バグの指摘　熱烈募集中です。）

    トピック投稿者 nico nico

    (@nico-nico)

    13年前

    ちょっと拝見させていただいて、まだ深部まで覗いていませんが、パッと見ただけでもステキなテーマですね！
    「人に使ってもらう」ということに重点を置いている事がわかります。

    <head>
<style type="text/css">p { color:#F00;}</style>
</head>

    はソースを見ると適用されている固定ページとsingle.phpのみインサートされています。
    投稿AにCSSを設定しない場合はその投稿Aのsingle.phpにもインサートされていません。

    私はTwentyten+子テーマ、Twentyeleven+子テーマで２つのブログを作っていますが、必要な時に必要なものを・・・どうせ人に配布するわけではないので自分がわかればと作っていくうちにかなりカオスになっています(T_T)

    カスタムフィールドを使う方法も沢山の方が書いて居られたのですが、ものぐさな私は「コッチ」のほうが簡単そうという理由で採用した結果が余計手間のかかる事態を招いたようです。

    ううむ、カスタムフィールドを使うか・・・ちょっと考えて見ます。

    nobita

    (@nobita)

    13年前

    カスタムフィールドを使う方法も沢山の方が書いて居られたのですが、ものぐさな私は「コッチ」のほうが簡単そうという理由で採用した結果が余計手間のかかる事態を招いたようです。

    nico nicoさんのやり方のほうが、ゴージャスです。本当は、そういうやり方のほうが、やっていることが明確になるのですが、公式テーマの場合フィールドを追加したりできないルールなので、カスタムフィールドを使っているだけで、問題は、何もないと思います。

    公式テーマは、概ね、批判と、要望だけで成り立っているので、お世辞でもほめられると、とてもうれしいです。

    シングル表示で、そのページに特有のスタイルなどを適用する方法は、比較的多く行われていると思いますが、ループページでもスタイルが適用できるようになると、コンテンツの表現の幅が、これまでになく広がると、私は思っています。
    私のテーマも、やっとそれを始めたばかりなので、ユーザーの試練を乗り越えられるものか、未知数です。

    ヘッダーの　/*start custom fields style for loop pages*/　から　end custom…迄が、ループページでの、個別スタイルの埋め込み部分です。
    お役に立てば、幸いです

    トピック投稿者 nico nico

    (@nico-nico)

    13年前

    テーマraindropsを適用して、ソースを見ると、なるほど、　ヘッダー部分に/*start custom fields style for loop pages*/・・・が用意されている事がわかりました。

    その昔プラグインを使わずカスタム投稿タイプをつかって「お知らせ」表示をするようにしたときに散々苦労したので、カスタムフィールトやカスタムポストってめんどくさい！とっつきにくい！と思ってきましたが、3.4から（でしたっけ？）気軽に使えるようになったようなので、ちょっと挑戦していきたいと思います。

    仕事で関わっているサイトでサーバによってPHPのバージョンが対応せず、Wordpress2.9.2どまりのHPがまだ多数あるため、「古い知識」も使えるようにしておかないと、と思いあえて、プラグインに頼らないなど過酷な環境に自分を追いやっています（笑）

6件の返信を表示中 - 1 - 6件目 (全6件中)

トピック「投稿・固定ページに個別にCSSを適用したい」には新たに返信することはできません。