2016-08-14 5 views
0

私は状況に基づいてそのショートコードのためにcssとjsを動的に変更することを意図したショートコードの作成に取り組んでいます。今問題は、add_shortcode()の中でadd_action()を使用する方法の手がかりを得られないことです。あなたたちは私をもっとよく理解できるように、私はあなたの例のスニペットコードを与えてみましょう:wordpressショートコードの中にインラインCSS/jsを追加するには

add_shortcode('example', function($atts) { 
    //extracting the shortcode attributes 
    extract(shortcode_atts(array(
     'value1' => null, 
     'value2' => null, 
     'value3' => null 
    ), $atts)); 

    //Now here I wll do my code for the shortcode 
    // But the shortcode needs some js and css to work 
    // so, I'm trying like this 

    //For the CSS 
    add_action('wp_head', function() { 
     echo '<style type="text/css"> 
      .class { 
       background-color: '. $value2 .'; 
      } 
     </style>'; 
    }); 

    //For the JS 
    add_action('wp_footer', function() { 
     echo '<script type="text/javascript"> 
      var a = '. $value3 .' 
     </script>'; 
    }); 

}); 

は今、明らかにそれが動作していないので、あなたのいずれかが適切で同様のことをどのように私を導くことができる場合、私は期待していました方法。

可能であれば、質問に否定的な投票をするのではなく、助けてください。

そこにこれを行うには良い方法であることが、現在それを動作させるために、(add_actionを削除する)一部なければならない、ちょうどあなたのコードで文字列を作成し、それを返す
+0

質問:それはショートコードにjsとcssを付けるには本当に必要です。 CSSをstyle.cssに入れ、javascriptの部分をjsファイルに入れます。 – meck373

+0

@ meck373私はあなたが適切なサンプルコードを読んでいないと思います。 CSS&JS値がショートコード値に基づいて動的に変更されるため、私はそれを行わなければならなかったのです。上記のように、私は '$ value2'と' $ value3'をcss&jsセクションで使いました。どちらもショートコードから来ています。だからこそ私はこのアプローチをとったのです。他に質問がある場合はお知らせください。 – iSaumya

答えて

0

add_shortcode('example', function($atts) { 
    //extracting the shortcode attributes 
    extract(shortcode_atts(array(
     'value1' => null, 
     'value2' => null, 
     'value3' => null 
    ), $atts)); 

    //For the CSS 
     $result = '<style type="text/css"> 
      .class { 
       background-color: '. $value2 .'; 
      } 
     </style>'; 

    //For the JS 
     $result .= '<script type="text/javascript"> 
      var a = '. $value3 .' 
     </script>'; 

    return $result; 
}); 
+0

お返事ありがとうございました。しかし、これは、スタイルタグが 'body'の中に入れられるので、これを行う良い方法ではありません。多くの研究をした後、私はこのようなアプローチをとっています:http://pastebin.com/eYi6RAbTそれがうまくいくかどうかわかりません。あなたはそれを見て、あなたの考えを分かち合ってください。 – iSaumya

関連する問題