• 解決済 yy_k

    (@yy_k)


    現在、プラグインを作っています。
    わからないことがあり、質問させてください。

    そこで、プラグインが吐き出すhtmlに対してのCSSを適用させたいと思い、プラグインが有効になれば、wp_headから吐き出すようにしました。

    その時に書いた内容が下記です。

    function defoStyle(){
    	//デフォルトのスタイルシートを指定する;
    	$plugin_dir = str_replace(basename(__FILE__),"",plugin_basename(__FILE__));
    	$css_url = WP_PLUGIN_URL.'/'.$plugin_dir.'css/defoStyle.css';
    	wp_enqueue_style( 'wp-defoStyle', $css_url, false, '1' );
    
    }
    
    add_action('wp_print_styles','defoStyle');

    上記で、wp_headerから吐き出されて、

    <link rel='stylesheet' id='wp-updefoStyle-css'  href='http://××,com/wp-content/plugins/Defo/css/defoStyle.css?ver=1' type='text/css' media='all' />

    と言う形で表示されています。
    しかし、対象のhtmlにCSSが適用されない状況です。

    テンプレートに上記cssファイルを置いて読み込ませると、適用されるのでcssに間違いはないと思います。
    プラグインからcssを適用する場合は何かほかに特殊な方法が必要なのでしょうか?

    また、wp_enqueue_styleについても知りたいのですが、これはスタイルシートを追加するときに使うメソッドだと思いますが、引数等の情報もあれば教えてください。
    宜しくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • こんにちは。

    以下の部分のCSSのパスは正しいのが出てますか?

    $plugin_dir = str_replace(basename(__FILE__),"",plugin_basename(__FILE__));
    $css_url = WP_PLUGIN_URL.'/'.$plugin_dir.'css/defoStyle.css';

    試してないのでわからないのですが、私は以下のように記述してるので…。

    $css_url = plugins_url("defoStyle.css", __FILE__);

    ちなみにwp_print_stylesだと管理画面でも出ちゃいません?
    条件分岐入れたほうがいいような気がします。^^

    あっ、管理画面側では動かないみたいっすね。

    トピック投稿者 yy_k

    (@yy_k)

    早速の返信ありがとうございます。
    CSSのファイルのパスは通っている状態です。

    なので、なぜプラグインから出力したCSSが適用されなくて、テンプレートに保存したCSSは問題なく適用されるのかが本当に不明で・・・・

    プラグインからCSSを出力する場合は何か必要なんですかね・・・・

    CSSのパスが通ってて適用されてないのはありえないので、何かイージーミスがあるんでしょうね。^^

    私が作ったプラグインですが参考になれば。
    108行目付近でほぼ同じ事をやってます。もちろん正常に動作しています。(と思います。笑)

    http://plugins.trac.wordpress.org/browser/wp-weatherhacks/trunk/wp-weatherhacks.php

    こんにちは。

    プラグインからCSSを出力する場合は何か必要なんですかね・・・・

    特にないです。

    アクションフックの「wp_head」を使って書きだす方法もありますが「wp_print_styles」とwp_enqueue_style()を使う方法が無難かと。

    パスが大丈夫と仰るなら、記述にミスは無いように見えます。

    CSSを適用しようとされている要素に既に別のCSSが適用されており、単に優先順位の問題と言うことはないですよね。

    トピック投稿者 yy_k

    (@yy_k)

    ご返信ありがとうございます。
    相変わらず解決できません・・・・

    現状なんですが・・・いろいろ試してみました。

    まず、wordpressが吐き出すプラグインから出力されるcssが適用されない状態で、たとえば直接そのCSSを読み込ませてあげれば、思うようにCSSが適用されます。

    なんでしょうか?いったい・・・

    また、プラグインから吐き出されるCSSは記述は改行を行って記述しているのですが、実際出力されているファイルにアクセスすると、改行がない状態で出力されています。

    たとえば、

    a{
    /*CSSの処理*/
    }

    と記述しても、実際に吐き出されるのは

    a{/*CSSの処理*/}

    と言う感じで、全て改行が取り除かれています。
    上記が何か関係してるのでしょうか?

    ご存知の方がいればご教示くださいませ。
    宜しくお願いします。

    たとえば直接そのCSSを読み込ませてあげれば、思うようにCSSが適用されます。

    とありますが、テーマに直接<link>タグを記述されたのでしょうか?

    それからCSSの改行が無視される件ですが、ブラウザでCSSを参照した時に改行が無視されるのですか?

    ブラウザなら、LFもCR/LFもCRも改行と認識してくれるのではないかと思いますが、確かしにこれは奇妙かもしれません。

    ただし、これが原因か否かは分かりません。

    ちなみにプラグインの構成ファイル(PHP以外も)の文字コードや改行コードに注意されていますか?
    UTF-8 BOMなしは必須としては、私の場合、改行コードもLFで統一しています。

    高速化系のプラグイン入ってないですか?
    W3 Total Cache とか。
    プラグインを順番に外していってはどうでしょう?

    改行がCSSから消えるのは、高速化系プラグインでCSS Minifyを有効にしていることも考えられますので。

    トピック投稿者 yy_k

    (@yy_k)

    すみません・・・

    お騒がせしました。
    自己解決しました。

    すごくイージーミスです。

    以前にプラグインの実験をしているときに、phpファイルで動的にCSSを利用しようとおもい、今回の問題となったCSSを入れていたディレクトリに[.htaccess」ファイルで

    AddType application/x-httpd-php .css

    と書いたファイルが入っていました。
    サーバー側では、.htaccessファイルが見えない設定になっていて気が付かなかったのですが、もう一度ローカル側をよく見ていて発見しました。

    別のディレクトリに保存し直してパスを通せば問題なくCSSが適用されました。
    ありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「プラグイン制作時のCSSについて」には新たに返信することはできません。