将内联样式添加到使用了快捷代码的页面

时间:2017-04-03 作者:Alen

我正在尝试向标题添加样式,使用此方法,样式仅加载到单个帖子上,但如果我使用快捷码加载帖子内容,则样式不会加载到标题中:

add_action( \'wp_head\', \'output_styles\')
function output_styles($base_ID){
   $global post;
     echo \'<style type="text/css">\'. get_post_meta($post->ID, \'append_css\') .\'</style>\';
}
如果我调用ouput_styles 来自shortcode函数的函数:

output_styles($pass_id);
那么output_style 已打印,但不在页眉中。它就在短代码输出之前。

使用短代码时,如何在标题中输出样式?

2 个回复
SO网友:Paul \'Sparrow Hawk\' Biron

在这种情况下,has_shortcode() 是你的朋友。

首先,我们加入wp_print_styles, 而不是wp_head. 在func中,我们钩住并检查帖子是否包含我们的短代码。如果是这样,我们将得到所需的CSS并将其作为内联输出<style>.

add_action (\'wp_print_styles\', \'wpse_enqueue_shortcode_css\') ;

function
wpse_enqueue_shortcode_css ()
{
    global $post ;

    if (is_single () && has_shortcode ($post->post_content, \'my_shortcode\')) {
        $append_css = get_post_meta ($post->ID, \'append_css\', true) ;

        echo <<<EOF
        <style type=\'text/css\'>
            $append_css
        </style>
EOF;
        }

    return ;
}

SO网友:Paul \'Sparrow Hawk\' Biron

@bosco,thanx的评论。。。我误解了@Alen想要实现的目标(theglobal $post 在问题中包含的代码中)。

如果我现在的理解是正确的,那么下面应该可以做到(虽然有点难看)。它通过钩住wp_print_styles within 处理短代码的函数。

add_shortcode (\'my_shortcode\', \'my_shortcode\') ;

function
my_shortcode ($atts)
{
    $defaults = array (
        \'id\' => \'\',
        // other atts for the shortcode
        ) ;
    $atts = shortcode_atts ($defaults, $atts) ;

    if (!empty ($atts[\'id\'])) {
        global $my_shortcode_css ;

        // grab the CSS from the post whose ID was passed in the \'id\' attribute of
        // my_shortcode, e.g., [my_shortcode id=\'123\']
        // and store it in a global
        $my_shortcode_css = get_post_meta ($atts[\'id\'], \'append_css\', true) ;

        // no need to hook into wp_print_styles IF we don\'t have any CSS to output
        if (!empty ($my_shortcode_css)) {
            // hook into wp_print_styles with an anonymous func
            add_action (\'wp_print_styles\', function () {
                global $my_shortcode_css ;

                if (empty ($my_shortcode_css)) {
                    return ;
                    }

                echo <<<EOF
    <style type=\'text/css\'>
        $my_shortcode_css
    </style>
EOF;

                // clean up, since we no longer need this global
                unset ($my_shortcode_css) ;
                }) ;
            }
        }

    // insert code to produce the output of the shortcode
    $output = ... ;

    return ($output) ;
}
Note: 如果你能想象[my_shortcode] 在一篇给定的帖子中被多次使用,最好在上面添加逻辑,以检查是否已经为给定的帖子ID输出了CSS。我将此作为“读者练习”:-)

相关推荐

Namespaced shortcode?

我正在改造一个旧的WP站点,该站点有许多自定义的短代码,显然由于代码当前的组织方式,这些短代码在性能方面付出了代价。当然,我可以修复优化不好的代码,使用十几个短代码,并且一天就可以完成,但我想知道如何更好地组织它们。根据WordPress\'documentation, 建议将它们放在插件中并在上初始化init. 我们可以通过这样“命名”它们来减少这个钩子中的负载吗?[com.company shortcode attr=\"attr\" prop=\"prop\"] 有人尝试过这样的解决方案吗