Question

您好我已经创建了一个简单的短代码来显示图像分配器。

将此添加到我的函数php：

add_shortcode( 'divider', 'shortcode_insert_divider' );
function shortcode_insert_divider( ) {
return '<div class="divider"></div>';
}

这是css：

.divider {
  width: 100%;
  height: 55px;
  background-image: url("http....")
}

所以这是短代码：

 [divider]

现在我想为每次使用短代码定义一个不同的背景图像。我该如何实现以下内容：

[divider src="http://domain.com/image.jpg"]

??? 任何想法？

Answer 1

以下是代码：

function shortcode_insert_divider( $atts ) {

    // Assign default values
    $src_default_value = "";
    $color_default_value = "";

    extract( shortcode_atts( array(
        'src' => $src_default_value,
        'color' => $color_default_value,
    ), $atts ) );

    $html = '<div class="divider" style="color:' . $color . ';background:transparent url(\'' . $src . '\') no-repeat 0 0;"></div>';

    return $html;
}
add_shortcode( 'divider', 'shortcode_insert_divider' );

＆＃34; shortcode_atts＆＃34;允许你捕获这些属性和＆＃34;提取＆＃34;函数将允许您以简单的方式从数组中检索数据。

Wordpress创建具有自定义值的短代码

1 个答案: