Question

我目前正在为WordPress创建一个简单的插件，可以使用[newsletter]短代码。短代码有很多可以定义的属性，所以我在$ atts数组中捕获它们。

现在，我希望这些属性定义按钮的外观。为此，我想在标签中添加它＆＃34;填充＆＃34;的CSS。要做到这一点，我使用的是add_action('wp_head', 'append_css_to_head')，但这并不起作用，因为add_action似乎根本不会从show_newsletter_signup_btn()函数中触发

所以我尝试将add_action('wp_head', 'append_css_to_head')放在函数之外，并且触发得很好，但是通过短代码设置的变量在它们定义的函数之外是不可用的。

所以这基本上就是我所要求的：如何从函数中获取这些变量？

从下面的代码中我可以看到，我已经使用了$ GLOBALS（我知道这不是最好的做法，但我不知道如何做到这一点），但即便如此这不是帮助。

我已经阅读了这个网站上的许多主题，但没有设法找到一个包含适合我的解决方案。

我的代码如下。

<?php
add_shortcode('newsletter', 'show_newsletter_signup_btn');
function show_newsletter_signup_btn($atts) {
    $atts = shortcode_atts(
        array(
            'link_text'                 => '',
            'text_color'                => '#fff',
            'border_color'              => '#e02d7f',
            'background_color'          => '#e02d7f',
            'bg_gradient_color1'        => '#e02d7f',
            'bg_gradient_color2'        => '#a31c57',
            'hover_text_color'          => '#fff',
            'hover_border_color'        => '#e02d7f',
            'hover_background_color'    => '#e7599a',
            'hover_bg_gradient_color1'  => '#e7599a',
            'hover_bg_gradient_color2'  => '#cf236e'
        ),
        $atts
    );

    // Requirements:
    $active_link        = '/newsletter';
    $link_text          = $atts['link_text'];

    // Colors:
    $GLOBALS['nl_text_color']           = $atts['text_color'];
    $GLOBALS['nl_border_color']         = $atts['border_color'];
    $GLOBALS['nl_background_color']     = $atts['background_color'];
    $GLOBALS['nl_bg_gradient_color1']   = $atts['bg_gradient_color1'];
    $GLOBALS['nl_bg_gradient_color2']   = $atts['bg_gradient_color2'];

    $GLOBALS['nl_hover_text_color']     = $atts['hover_text_color'];
    $GLOBALS['nl_hover_border_color']   = $atts['hover_border_color'];
    $GLOBALS['nl_hover_background_color']   = $atts['hover_background_color'];
    $GLOBALS['nl_hover_bg_gradient_color1'] = $atts['hover_bg_gradient_color1'];
    $GLOBALS['nl_hover_bg_gradient_color2'] = $atts['hover_bg_gradient_color2'];

    function append_css_to_head() {
        echo '<style type="text/css">
            a.newsletter-button {
                font-size: 170%;
                font-weight: 100;
                line-height: 1.8em;
                display: block;
                text-transform: uppercase;
                text-align: center;
                margin: 1em 0;
                -webkit-transition: .5s all ease;
                -moz-transition: .5s all ease;
                transition: .5s all ease;

                color: '.$GLOBALS['nl_text_color'].';
                border: 1px solid '.$GLOBALS['nl_border_color'].';
                background: '.$GLOBALS['nl_background_color'].';
                background: linear-gradient(to bottom,'.$GLOBALS['nl_bg_gradient_color1'].' 0,'.$GLOBALS['nl_bg_gradient_color2'].' 100%)
            }
            a.newsletter-button::after {
                content: url(' .plugin_dir_url( __FILE__ ). 'img/arrow.svg);
                height: 0.8em;
                width: 0.8em;
                display: inline-block;
                vertical-align: middle;
                margin-left: 0.3em;
                margin-top: -0.1em;
                line-height: 0em;
                -webkit-transition: .5s all ease;
                -moz-transition: .5s all ease;
                transition: .5s all ease;
            }
            a.newsletter-button:hover {
                color: '.$GLOBALS['nl_hover_text_color'].';
                border: 1px solid '.$GLOBALS['nl_hover_border_color'].';
                background: '.$GLOBALS['nl_hover_background_color'].';
                background: linear-gradient(to bottom,'.$GLOBALS['nl_hover_bg_gradient_color1'].' 0,'.$GLOBALS['nl_hover_bg_gradient_color2'].' 100%)
            }
            a.newsletter-button:hover::after {
                -webkit-transform: translateX(0.3em);
                transform: translateX(0.3em);
            }
        </style>';
    }
    add_action('wp_head', 'append_css_to_head');

    $output = '
    <div class="newsletter-signup">
        <a class="newsletter-button" href="' . $active_link . '">' .$link_text. '</a>
    </div>';

    return $output;
}

编辑：是的，我知道其中有特定于WordPress的代码，但我觉得我的问题主要与PHP有关。

Answer 1

你的问题不是变量范围，而是时间。 CSS代码在wp_head中运行，而短代码在the_content执行时执行。

如果您需要$post->post_content中的属性，则必须检查global $post（不要忘记wp_head）并查看您的短代码是否存在。如果它在那里（has_shortcode($shortcode)），您可以使用output buffers和do_shortcode()或使用get_shortcode_regex()及其shortcodes.php中的兄弟函数来获取属性。

如何访问定义函数之外的变量？

1 个答案: