我目前正在爲WordPress創建一個簡單的插件,以便使用[newsletter]簡碼。短代碼有很多可以定義的屬性,所以我在$ atts數組中捕獲它們。如何訪問變量之外的變量?
現在,我想要這些屬性來定義按鈕的外觀。爲此,我想將「填充」的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爲主,我覺得。
你爲什麼嵌套函數? –
@MarkBaker它當初(最好應該是)在主要短代碼函數 –