如何使用 wordpress 短代码传递最终成为 class 名称一部分的参数

Question

这是结果 html 我想用简码生成 - 在 WordPress 中编辑页面内容时：

<div class="shadow-wrapper half-shadow im-centered">
<div class="box-shadow shadow-effect-2">
<div class="servive-block servive-block-bluemed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus. 
</div>
</div>
</div>

这就是我想在编辑器框内使用的内容 - 当使用新的短代码时，我将定义：

[box color="bluemed"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus.
[/box]

传递的参数：color="bluemed" 需要成为 div 的 class.. 的一部分，如：<div class="servive-block servive-block-bluemed">（见上面的结果 html代码)

这是我在 functions.php 文件中放入的内容，用于尝试创建这个新的简码：

function colored_box_shortcode($atts) {
   extract(shortcode_atts(array(
      'color' => grey,
   ), $atts));
  return '<div class="shadow-wrapper half-shadow im-centered">
  <div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'.$color.'">';
}

add_shortcode('box', 'colored_box_shortcode');

function colored_box_end() {
    return '</div>
    </div>
    </div>';
}

add_shortcode('/box', 'colored_box_end');

如您所见，我将颜色属性默认内容设置为灰色，但也允许在从短代码传递的参数中覆盖和指定颜色。

此颜色需要成为 div 内 class 名称的一部分。因此，如果没有传递参数，那么 class 名称将变为：“servive-block-grey”。或者如果我传递 color="lavendar" 的参数，那么 class 名称将变为："servive-block-lavendar"。

这可能吗？

如果是这样..有人可以帮助我使用的代码吗..因为我在查看页面时从 WordPress 收到数百个错误。

基本上错误是这 3 个错误的重复（我认为这可能是由于我试图将参数放入 class 名称中时出现语法错误引起的 - 如下所示：servive-block-'.$color.')

Warning: preg_split(): Unknown modifier 'b' in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 244

Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 246

Warning: implode(): Invalid arguments passed in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 297

感谢您的指导！

Answer 1

使用 $content 输出短代码中的内容：

add_shortcode("box", function ($atts, $content = "") {

    $atts = shortcode_atts(array(
        "color" => "grey",
    ), $atts);

    ?>
        <div class="shadow-wrapper half-shadow im-centered">
        <div class="box-shadow shadow-effect-2">
        <div class="servive-block servive-block-<?php echo $atts["color"];?>">
            <?php echo do_shortcode($content);?>
        </div>
        </div>
        </div>
    <?php

});

Answer 2

我认为你的问题出在这一行：

add_shortcode('/box', 'colored_box_end');

这个警告：

preg_split(): Unknown modifier 'b'

可能是您的 '/box' 参数的结果，假设 WordPress 使用正则表达式来解析它（文档对此没有说明任何内容，我也没有查看代码）。您不需要显式添加结束标记，只需使用 add_shortcode('box', 'colored_box_shortcode'); 并将所有内容放在一个函数中而不是两个函数中。

function colored_box_shortcode( $atts, $content = "" ) {
   extract(shortcode_atts(array(
      'color' => grey,
   ), $atts));
  return '<div class="shadow-wrapper half-shadow im-centered">
  <div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'.$color.'">' . $content '</div>
    </div>
    </div>';
}
add_shortcode('box', 'colored_box_shortcode');

Answer 3

请修改您的简码：[/box] 为 [end-box]

[box color="bluemed"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus.
[end-box]

试试这个：我将 [/box] 替换为 [end-box] 并将灰色替换为 'grey'

function colored_box_shortcode($atts) {

   extract(shortcode_atts(array(
      'color' => 'grey',
   ), $atts));
  return '<div class="shadow-wrapper half-shadow im-centered"><div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'.$color.'">';
}

add_shortcode('box', 'colored_box_shortcode');

function colored_box_end() {
    return '</div>
    </div>
    </div>';
}

add_shortcode('end-box', 'colored_box_end');

如何使用 wordpress 短代码传递最终成为 class 名称一部分的参数

How to pass parameter that ends up being part of a class name with wordpress shortcode

php

wordpress

parameter-passing

shortcode