也想出现在这里?联系我们

为WordPress添加“点击展开/收缩”短代码 功能

2024.01.29 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要为WordPress添加“点击展开/收缩”短代码功能,你可以使用以下步骤:

  1. 编辑主题的 functions.php 文件:首先,你需要编辑你的WordPress主题的functions.php文件。你可以通过WordPress仪表板的外观编辑器或通过FTP客户端访问这个文件。

  2. 添加短代码函数:在functions.php文件中,你可以添加以下代码来创建一个用于展开/收缩的短代码函数。

function expand_collapse_shortcode($atts, $content = null) {
    extract(shortcode_atts(array(
        'title' => '展开/收缩',
    ), $atts));

    ob_start();
    ?>
    <div class="expandcollapse">
        <span class="expandcollapsetitle"><?php echo $title; ?></span>
        <div class="expandcollapsecontent">
            <?php echo do_shortcode($content); ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('expandcollapse', 'expand_collapse_shortcode');

这段代码创建了一个名为expandcollapse的短代码,它接受一个标题和内容,并在点击标题时展开或收缩内容。

  1. 样式设计:你还需要为这个短代码添加一些CSS样式,以便使其外观更加漂亮。你可以在你的主题样式文件(通常是style.css)中添加以下样式,根据你的需要进行自定义:
.expandcollapse {
    border: 1px solid #ddd;
    padding: 10px;
    marginbottom: 10px;
}

.expandcollapsetitle {
    fontweight: bold;
    cursor: pointer;
}

.expandcollapsecontent {
    display: none;
}

这些CSS样式将创建一个带有边框的容器,标题将显示为粗体,内容默认是隐藏的。

  1. 在文章中使用短代码:最后,你可以在你的WordPress文章或页面中使用[expandcollapse]短代码,像这样:
[expandcollapse title="点击展开/收缩"]这里是你的内容[/expandcollapse]

这样,你的内容将被包裹在一个展开/收缩容器中,并在点击标题时展开或收缩。

记得在编辑完functions.php文件后保存你的主题,并确保备份你的网站数据,以防万一出现问题。如果你不熟悉编辑WordPress主题文件,最好在测试环境中进行这些更改。

有用0
  • 2024.01.29初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧