Owl Carousel新闻轮播空项问题及HTML列表截取方案求助

问题根源 #

新闻轮播出现额外空项，是因为新闻文章开头包含HTML列表（<ul>/<ol>），直接按单词截取内容的方式会截断未闭合的<li>/<ul>标签，导致页面DOM结构错乱，进而引发Owl Carousel渲染异常。

解决方案：提取前2个列表项并保证HTML结构合法 #

通过DOM解析文章内容，精准提取列表项并保留完整HTML结构，无列表时则生成纯文本摘要，具体代码替换如下：

1. 替换循环内的内容处理逻辑 #

将原代码中截取内容的部分，替换为以下DOM解析处理代码：

foreach ( $my_posts as $key => $p ){
    $date = date('d F Y', strtotime($p->post_date));
    $content = $p->post_content;
    $display_content = '';

    // 启用HTML解析错误抑制，避免无效标签触发警告
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    // 转码为UTF-8兼容格式，防止乱码
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    libxml_clear_errors();

    // 优先查找无序列表，不存在则查找有序列表
    $lists = $dom->getElementsByTagName('ul');
    if ($lists->length === 0) {
        $lists = $dom->getElementsByTagName('ol');
    }

    if ($lists->length > 0) {
        // 取第一个列表容器
        $target_list = $lists->item(0);
        $list_items = $target_list->getElementsByTagName('li');
        // 创建新的列表标签，用于存放截取后的项
        $new_list = $dom->createElement($target_list->tagName);

        // 只保留前2个列表项
        for ($i = 0; $i < min(2, $list_items->length); $i++) {
            $new_list->appendChild($list_items->item($i)->cloneNode(true));
        }

        // 将新列表转为HTML字符串
        $display_content = $dom->saveHTML($new_list);
    } else {
        // 无列表时，生成纯文本摘要（截取前20个单词）
        $plain_text = strip_tags($content);
        $words = explode(' ', $plain_text);
        $display_content = implode(' ', array_slice($words, 0, 20)) . '....';
    }

    // 输出轮播项
    echo '<div class="banner_block banner_bg">
        <div class="inner_container">
            <div class="content">
                <h2 class="banner_title">'. $p->post_title . '</h2>
                <span class="text"> <span>'.$display_content.'</span> <a href="' . get_permalink( $p->ID ) . '">'.$read_more.'</a></span>
                <span class="date">'.$date.'</span>
            </div>
        </div>
    </div>';
}

2. 关键说明 #

• DOM解析保证结构完整：通过DOMDocument操作HTML元素，截取的列表项会保留完整的闭合标签，不会破坏页面结构；
• 兼容性处理：启用libxml_use_internal_errors(true)避免不规范HTML触发警告，转码处理防止中文/特殊字符乱码；
• ** fallback逻辑**：无列表的文章会自动切换为纯文本截取，保持原有展示逻辑。

内容的提问来源于stack exchange，提问作者Waqas Rahman