如何将<li>元素添加到相邻图像列表中?

时间:2019-03-25 作者:szalalala

我正在尝试创建一个相邻图像的html列表(由用户添加,例如在帖子内容中)。现在输出代码如下所示

<ul class="myclass">
<img src="">
<img src="">
</ul>
但我想将其转化为:

<ul class="myclass">
<li><img src=""></li>
<li><img src=""></li>
</ul>
我曾尝试定义regex,它可以在ul class=“myclass”中找到带有“/”符号的元素,但它似乎适用于没有换行符的代码。是否有可能匹配我想要获得的结果/使用函数过滤器是否是正确的方法?

现在我的功能。php如下所示:

    function add_carousel( $content) {
      $pattern = \'((<img.*?>){2,})\';
      $replacement = \'<div class="orbit" role="region" data-orbit>
        <div class="orbit-wrapper">
          <div class="orbit-controls">
            <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
            <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
          </div>
          <ul class="orbit-container">
          $0
          </ul>
          </div>
          </div>\';
          $content = preg_replace( $pattern, $replacement, $content );
      return $content;
    }
    add_filter(\'the_content\', \'add_carousel\');
function add_carousel_items( $content ){
$content = preg_replace(\'/<ul class="orbit-container">\\\\s*?(<img.*?>)?\\\\s*<\\\\/ul>/s\', \'\\1\', $content);

return $content;

}
add_filter(\'the_content\', \'add_carousel_items\');

1 个回复
SO网友:mrben522

这里有一些问题。你的正则表达式坏得很。您应该使用以下工具regex101 来验证这一点
我认为对于第一个函数,您需要在图像标记之间添加换行符,如下所示:

/(<img.*?>\\r?\\n?){2,}/
您可以添加*?\'如果您想在多个图像标记之间有多个换行符时获取多个图像标记。对于您的第二个函数,它看起来像您的逃逸不准确。尝试以下操作:

/<ul class="orbit-container">\\s*?(<img.*?>)?\\s*<\\/ul>/
您的第二个潜在问题是,您正在同一个过滤器上运行这两个函数,我猜它们的运行顺序对您很重要。将优先级添加到add_filter 作为第三个参数调用。默认值是(我想)10。所以,做你的10和11或9和10之类的,任何对你最合适的。

相关推荐

Adding Images into API

我正试图将特色图片添加到我的API中,但这是一种不同类型的帖子。http://example.com/wp-json/wp/v2/directory我一直在使用WP REST API控制器,但它没有显示图像选项。我也尝试使用“更好的RESTAPI特色图片”,但运气不好。这开始让我恼火了。