Wp add_shortcode 属性不改变属性值

Question

我创建了一个带有属性的短代码（在 google 的帮助下），但它不会更改属性值。我经常 google 遇到这个问题，但没有找到解决方案。
这是我的代码：

function infobox_shortcode( $atts ) {

    $array = shortcode_atts(
        array(
            'Background' => 'rgba(45, 90, 171, 0.1)',
            'Border' => 'rgba(45, 90, 171, 0.5)',
            'Color' => '#2561ea',
        ),
        $atts
    );
        return "<div class='note' style='background-color:{$array['Background']};border-color:{$array['Border']};color:{$array['Color']};'>
                <span class='note-icon'><i class='ti ti-info'></i></span>
                <span class='ml-2'>
                    Want to use this template in Shopify, Wordpress or other platform?
                </span>
            </div>";

}
add_shortcode( 'InfoBox', 'infobox_shortcode' );

我在主题的 index.php 页面中这样调用它：

<?= do_shortcode('[InfoBox Background="red"]'); ?>

但是它并没有改变属性Background的值，我不知道我哪里错了。如果你们帮助我，它会很有帮助。

Answer 1

这是我的错误，我是这样用大写字母创建属性的

'Background' => 'rgba(45, 90, 171, 0.1)',

不过应该是小写的，现在可以了。

'background' => 'rgba(45, 90, 171, 0.1)',

Answer 2

属性为小写字母。

'background' => 'rgba(45, 90, 171, 0.1)',
'border' => 'rgba(45, 90, 171, 0.5)',
'color' => '#2561ea',

Answer 3

Here, some changes in code. Try this one, may this will give you solution or idea about your issue..

<?php
function infobox_shortcode( $atts ) {

$array = shortcode_atts(
    array(
        'background' => 'rgba(45, 90, 171, 0.1)',
        'border' => 'rgba(45, 90, 171, 0.5)',
        'color' => '#2561ea',
    ),$atts);
print_r($atts); // Remove, when you are fine with your atts! 
return 'Hello, World: '.$atts['background'];  //Remove, when you are fine with your expected output! 

$html = '<div class="note" style="background-color:{"'.$atts['background'].'"};border-color:{"'.$atts['border'].'"};color:{"'.$atts['color'].'"};"><span class="note-icon"><i class="ti ti-info"></i></span><span class="ml-2">Want to use this template in Shopify, Wordpress or other platform?</span></div>';
return $html; 
}

add_shortcode( 'InfoBox', 'infobox_shortcode' );
?>

Answer 4

这对我来说非常有用。

function infobox_shortcode($atts, $content = null)
{

    $a = shortcode_atts(array(
        'background' => 'rgba(45, 90, 171, 0.1)',
        'border' => 'rgba(45, 90, 171, 0.5)',
        'color' => '#2561ea',
    ), $atts);

    $content = ($content) ? $content : 'Want to use this template in Shopify, Wordpress or other platform?';

    $output = '<div class="note" style="background-color: ' . $a['background'] . '; border: ' . $a['border'] . '; color: ' . $a['color'] . ';">';
    $output .= '<span class="note-icon"><i class="ti ti-info"></i></span>';
    $output .= '<span class="ml-2">';
    $output .= $content;
    $output .= '</span>';
    $output .= '</div>';

    return $output;

}

add_shortcode('InfoBox', 'infobox_shortcode');

Wp add_shortcode 属性不改变属性值

Wp add_shortcode attributes not changing the attributes value

php

wordpress

wordpress-theming

shortcode