WordPress短代码实现TAB切换（非插件）

  • WordPress短代码实现TAB切换（非插件）已关闭评论
  • 65
  • A+
所属分类：WordPress

把下面的代码放在主题functions.php文件中。

function mufeng_tabs_shortcode($atts, $content = null) {
    // 提取所有 [tab] 内容
    preg_match_all('/\[tab(.*?)\](.*?)\[\/tab\]/s', $content, $matches, PREG_SET_ORDER);

    if (empty($matches)) {
        return ''; // 如果没有子tab，返回空
    }

    $output = '<div class="mufeng-tabs">';
    $tab_titles = '<ul class="mufeng-tab-titles">';
    $tab_contents = '<div class="mufeng-tab-contents">';

    foreach ($matches as $index => $match) {
        // 提取每个 [tab] 的属性和内容
        $tab_atts = shortcode_parse_atts($match[1]);
        $tab_title = isset($tab_atts['title']) ? esc_html($tab_atts['title']) : 'Tab ' . ($index + 1);
        $tab_content = do_shortcode($match[2]);
        $class = 'mufeng-tab-' . ($index + 1);

        // 第一个 tab 和内容加上 active 类
        $active_class = ($index === 0) ? ' active' : '';

        // 生成 tab 标题
        $tab_titles .= '<li class="mufeng-tab-title' . $active_class . '" data-tab="' . $class . '">' . $tab_title . '</li>';

        // 生成 tab 内容
        $tab_contents .= '<div class="mufeng-tab-content ' . $class . $active_class . '">' . $tab_content . '</div>';
    }

    $tab_titles .= '</ul>';
    $tab_contents .= '</div>';
    $output .= $tab_titles . $tab_contents . '</div>';

    return $output;
}

function mufeng_tab_shortcode($atts, $content = null) {
    return $content; // 占位符，主要逻辑在父短代码中处理
}

// 注册短代码
add_shortcode('tabs', 'mufeng_tabs_shortcode');
add_shortcode('tab', 'mufeng_tab_shortcode');

// 添加前端样式和脚本
function mufeng_tabs_scripts() {
    ?>
<style>
    .mufeng-tabs {
        border: 1px solid #ccc;
        padding: 10px;
    }
    .mufeng-tab-titles {
        list-style: none;
        padding: 0;
        display: flex;
        border-bottom: 1px solid #ccc;
        margin: 0 0 10px 0;
    }
    .mufeng-tab-title {
        padding: 10px 15px;
        cursor: pointer;
        background: #f9f9f9;
        border: 1px solid #ccc;
        border-bottom: none; /* 默认去掉底部边框 */
        margin-right: 5px;
    }
    .mufeng-tab-title.active {
        background: #fff;
        font-weight: bold;
        border-bottom: 1px solid #fff; /* 激活状态去掉边框，看起来和内容连成一体 */
        position: relative;
        top: 1px; /* 微调标题位置，避免内容部分的上边框露出 */
    }
    .mufeng-tab-content {
        display: none;
        padding: 10px;
        border: 1px solid #ccc;
        border-top: none; /* 去掉内容部分的上边框，与标题连接 */
    }
    .mufeng-tab-content.active {
        display: block;
    }
</style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tabs = document.querySelectorAll('.mufeng-tabs');
            tabs.forEach(tabArea => {
                const tabTitles = tabArea.querySelectorAll('.mufeng-tab-title');
                const tabContents = tabArea.querySelectorAll('.mufeng-tab-content');
                tabTitles.forEach((tabTitle, index) => {
                    tabTitle.addEventListener('click', function () {
                        // 移除所有 active 类
                        tabTitles.forEach(t => t.classList.remove('active'));
                        tabContents.forEach(c => c.classList.remove('active'));
                        // 激活当前 tab 和内容
                        tabTitle.classList.add('active');
                        tabContents[index].classList.add('active');
                    });
                });
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'mufeng_tabs_scripts');

使用方法如下。

[tabs]
[tab title="Tab1"]Tab1内容[/tab]
[tab title="Tab2"]Tab2内容[/tab]
[/tabs]

其中title表示标签切换的标题，每个标题根据序号自动类名。

打赏微海报分享
weinxin
独角兽驿站
公众号