特定のページのみのスタイルシートを条件付きでエンキューするにはどうすればよいですか?


11

始める前に、ページ/投稿のコンテンツに基づいてスクリプトを条件付きでエンキューする方法を対象とする本当に良い記事があることを認めたいと思います。

これらは素晴らしいですが、私がやりたいことよりもはるかに進んでいます。

答えは組み込みis_page()関数(codex)を使用しているように感じますが、それを使用しようとすると、サイトが壊れるか、機能しません。

条件付きロジックを間違った場所で実行しているだけだと思います。

これが、functions.phpに追加しようとしたものです。

function wpse39130_register_more_stylesheets() {
    wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/stylesheet.css' );
}
add_action( 'init', 'wpse39130_register_more_stylesheets' );

function wpse39130_conditionally_enqueue_my_stylesheet() {
    // only enqueue on product-services page slug
    if ( is_page( 'products-services' ) ) {
        wp_enqueue_style( 'stylesheet_name' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );

条件付きの部分を削除すると、スタイルシートが正常にキューに登録されるので、それが機能することがわかります。


実際、私もあなたのコードとその作業を完全に強力なテキストで
abhishek abhi Abhi

回答:


4

私はあなたのコードを私の開発環境にコピーして貼り付け、ページ名以外は何も変更しませんでした。エンキューされておらず、誤って指摘されているだけなのか、ページの名前が間違っていないのか、何かありますか?


1
ありがとう、動作します!どうして以前は動かなかったのか分かりません。見知らぬことが起こったと思います。うまくいけば、これは他の誰かに役立つでしょう。
エヴァンマットソン2012年

2

あなたが持っているものは正しいです-あなたはそれを間違ったアクションに引っ掛けているだけです。「init」の代わりに「wp」アクションを試してください。initが実行されると、is_page()はまだ適切に機能しません。

編集: 私は間違っています。add_my_stylesheetがinitにフックされていると思いましたが、そうではありません。is_pageは、enqueue_scriptsアクションから機能するはずです。申し訳ありません...続けて...


-1

同じコードに従って、同じ結果が得られるかどうかを確認しようとしていましたが、is_page()が期待どおりに機能しないことに気付きました。したがって、グローバル変数$ postをたどってカテゴリ名/スラッグをチェックし、後者は単純なテキスト比較を使用してアクションを決定しました。

    global $post;
    $postcat = get_the_category( $post->ID );
if ( ! empty( $postcat ) ) {
 echo esc_html( $postcat[0]->ID );   // Debug 
 echo esc_html( $postcat[1]->name ); // Debug 
 echo var_dump($postcat ); // Debug 
}

(サブカテゴリではなく)1つのカテゴリのみの場合のカテゴリの値

echo esc_html( $postcat[0]->name ); //Display name on screen

サブカテゴリの場合、次の変数が入力されます

echo esc_html( $postcat[1]->name ); //Display name on screen

今あなたの必要性に基づいて、私がサブカテゴリ名をチェックするために使用しているように、以下のコードを使用します:

//Use $postcat[0]->name for parent category name Can be your sub category name 
        if ( $postcat[1]->name == 'Shopping' ) { 

                wp_enqueue_style( 'stylesheet_name' );
            }else{
        // other code 
        }

完全なコード:

        function wpse39130_register_more_stylesheets() {
        wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/whatsqshop.css' );
    }
    add_action( 'init', 'wpse39130_register_more_stylesheets' );

    function wpse39130_conditionally_enqueue_my_stylesheet() {
        // only enqueue on product-services page slug
    global $post; //GLobal Post variable 
    $postcat = get_the_category( $post->ID ); // Get the Category info from POST ID

    if ( ! empty( $postcat ) ) { // IF POST CATEGORY IS NOT EMPTY
    //    echo esc_html( $postcat[0]->slug );   //Display SLUG On output screen <Debug option>
  //echo esc_html( $postcat[0]->name ); //Display name on screen
     //echo esc_html( $postcat[1]->name ); //Display name on screen

    //echo var_dump($postcat ); // For debug 
    }
    //  if( is_single(88)) {
       if ( $postcat[1]->name == 'Shopping' ) {
            wp_enqueue_style( 'stylesheet_name' );
        }else{
    //wp_enqueue_style( 'stylesheet_name' );
    }

    }
    add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );

例:*追加のCSSはありません http://whatsq.com/category/gst16/

*上記のカテゴリのみの背景付きの追加のCSS http://whatsq.com/information-technology/shopping-information-technology/mothers-day-gift-plan-show-mom-the-love-with-flowers-and-もっと/


質問した?現在のトピックへのそのちょうど私の答え。より詳細です。
Piclaunch S 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.