欢迎光临
我们一直在努力

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

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

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

添加短代码函数:在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的短代码,它接受一个标题和内容,并在点击标题时展开或收缩内容。

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

.expandcollapse {
    border: 1px solid #ddd;
    padding: 10px;
    marginbottom: 10px;
}

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

.expandcollapsecontent {
    display: none;
}

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

在文章中使用短代码:最后,你可以在你的WordPress文章或页面中使用[expandcollapse]短代码,像这样:

[expandcollapse title="点击展开/收缩"]这里是你的内容[/expandcollapse]

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

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

赞(0) 打赏
未经允许不得转载:WORDPRESS大侠 » 为WordPress添加“点击展开/收缩”短代码 功能

评论 抢沙发

评论前必须登录!

 

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册