短代码内部的入队样式，但它加载在页面底部(在页脚脚本之前)

时间：2017-02-17 作者：Zinan

我在短代码中添加了一个样式，它可以正常工作，但加载到页脚（在启动.js文件之前）而不是页眉。我也是这样做的：

Enqueue Scripts / Styles when shortcode is present

在WP中是否正常，或者如何在页眉中加载样式？

此处的示例代码：

class Cbwsppb_Related {

    public function __construct() 
    {
        add_shortcode(\'cbwsppb_related\', array($this, \'shortcode_func\'));
    }

    public function shortcode_func($atts, $content = null) 
    {
        $atts = shortcode_atts( array(
          \'style\'    => \'\',
          \'display_style\'    => \'\',
          \'show\'    => \'\',
          \'orderby\' => \'\'
        ), $atts );

        if ($atts[\'display_style\'] === \'carousel\') {
            wp_enqueue_style(\'flexslider-style\');
        }

        $show = (!empty($atts[\'show\'])) ? $atts[\'show\'] : 2;
        $orderby = (!empty($atts[\'orderby\'])) ? $atts[\'orderby\'] : \'rand\';

        $output = \'\';
        ob_start();

            if ($atts[\'style\'] === \'custom\') {
                $output .= woocommerce_get_template( \'single-product/related.php\', array(
                        \'posts_per_page\' => $show,
                        \'orderby\' => $orderby,
                    ) 
                );                 
            } else {
                $output .= woocommerce_get_template( \'single-product/related.php\');                
            }

            $output .= ob_get_clean();
        return $output;
    }
}

4 个回复

SO网友:Fayaz

为什么在页脚中添加它：

这是预期的行为。

因为您已将样式排入队列within your Shortcode hook function，执行时，WordPress已生成<head> 因为WordPress只会在您的内容中找到短代码后才执行您的短代码功能。

因此，如果您将样式放入shortcode挂钩函数的队列中，那么除了将样式放置在页脚部分之外，别无选择。

如何将其添加到标题中：

如果要将其输出到<head> 节，您必须使用以下命令将其排队：

function enqueue_your_styles() {
    // the following line is just a sample, use the wp_enqueue_style line you\'ve been using in the shortcode function 
    wp_enqueue_style( \'style-name\', get_stylesheet_directory_uri() . \'/css/your-style.css\' );
}
add_action( \'wp_enqueue_scripts\', \'enqueue_your_styles\' );

注意：这将添加样式，即使页面中没有短代码。

注2：One of the answers in the question you\'ve mentioned 已经详细解释了备选方案和优缺点；缺点。

SO网友:majick

您可以预先检查帖子内容中是否存在短代码，如果找到，则将脚本排入标题中。

但是，您还必须回退到将其添加到页脚中，因为短代码可能会从其他地方运行（例如，在小部件、模板或编程方式中）

public function __construct() {
    add_shortcode(\'cbwsppb\', array($this => \'shortcode_func\'));
    add_action(\'wp\', array($this => \'shortcode_check\'));
}

public function shortcode_check() {
    if (is_single() && (is_product()) {
        global $post; $content = $post->post_content;

        // global $wpdb;
        // $query = "SELECT \'post_content\' FROM "\'.$wpdb->prefix.\'"posts WHERE ID = \'".$post->ID."\'";
        // $content = $wpdb->get_var($query);

        // quick and dirty check for shortcode in post content
        if ( (stristr($content,\'[cbwsppb\')) 
          && (stristr($content,\'display_style\')) 
          && (stristr($content,\'carousel\')) ) {
            add_action(\'wp_enqueue_scripts\', array($this,\'enqueue_styles\'));
        }
    }
}

public function enqueue_styles() {
    wp_enqueue_style(\'flexslider-style\');
}

public function shortcode_func($atts, $content = null) {

   // ... $atts = shortcode_atts etc ...

   // change this to:
   if ( ($atts[\'display_style\'] === \'carousel\')
      && (!wp_style_is(\'flexslider-style\',\'enqueued\')) ) {
       wp_enqueue_style(\'flexslider-style\');
   }

   // ... the rest of the shortcode function ...
}

SO网友:Arsalan Mithani

您应该尝试以下操作：

function prefix_add_styles() {
    wp_enqueue_style( \'your-style-id\', get_template_directory_uri() . \'/stylesheets/somestyle.css\' );
};
add_action( \'get_header\', \'prefix_add_styles\' );

SO网友:AddWeb Solution Pvt Ltd

尝试以下代码。参考自wp_enqueue_style.

   function my_shortcode_style(){
      wp_enqueue_style( \'my_css\', plugin_dir_url( __FILE__ ).\'style.css\', array( \'\' ), false, \'all\' );
   }
   add_action(\'wp_enqueue_scripts\', \'my_shortcode_style\');

注意：对于插件目录路径，请使用plugin_dir_url() 对于当前主题路径使用get_template_directory_uri()

小码农CODE

短代码内部的入队样式，但它加载在页面底部(在页脚脚本之前)

为什么在页脚中添加它：

如何将其添加到标题中：

相关推荐

Do not parse shortcode in CPT