如何在wordpress短代碼內添加內聯css/j

Question

我正在創建一個短代碼，旨在根據情況爲該短代碼動態更改css和js。現在的問題是我沒有得到關於如何在add_shortcode()內使用add_action()的線索。我給大家舉一個例子代碼片段讓你們能更好地理解我：

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>'; 
    }); 

}); 

現在很明顯，它不工作，所以我希望如果你們可以指導我如何將類似的事情在適當的辦法。

如果可以，請幫忙，而不是負面投票的問題。

Answer 1

應該有更好的方式來做到這一點，但目前只是使它工作，去掉ADD_ACTION（）的一部分，只是讓你的代碼的字符串，並將其返回：

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; 
});