WordPress文章美化 为博客内容页添加展开收缩功能

前言：

在 WordPress 平台上撰写博客时，我们经常需要在文章中嵌入代码块。尽管我们倾向于保持代码的格式化显示，以便于阅读和理解，但这样做往往会使文章内容显得冗长，影响读者的浏览体验。为了解决这一问题，本文将介绍一种实现文章内容展开/收缩功能的方法。

教程：

首先，您需要在 WordPress 的主题文件中进行一些简单的修改。具体步骤如下：

1. 在`header.php`文件中，您可以添加以下代码，或者将其保存为一个独立的JavaScript文件，并在`header.php`中引入该文件。我选择了后者，以保持代码的整洁性和可维护性。

/*网站名称：汇站网*/
/*原文链接：https://www.huizhanii.com/?p=38646*/
<script type=\"text/javascript\">
    jQuery(document).ready(function(jQuery) {
        jQuery(\'.collapseButton\').click(function() {
            jQuery(this).parent().parent().find(\'.xContent\').slideToggle(\'slow\');
        });
    });
</script>

2. 接下来，在`functions.php`文件中，您需要加入特定的代码，以实现展开/收缩功能的核心逻辑。

/*网站名称：汇站网*/
/*原文链接：https://www.huizhanii.com/?p=38646*/
//展开收缩功能
function xcollapse($atts, $content = null){
    extract(shortcode_atts(array(\"title\"=>\"\"),$atts));
    return \'<div style=\"margin: 0.5em 0;\">
        <div class=\"xControl\">
            <span class=\"xTitle\">\'.$title.\'</span>
            <a href=\"javascript:void(0)\" class=\"collapseButton xButton\">展开/收缩</a>
            <div style=\"clear: both;\"></div>
        </div>
        <div class=\"xContent\" style=\"display: none;\">\'.$content.\'</div>
    </div>\';
}
add_shortcode(\'collapse\', \'xcollapse\');

3. 为了进一步提升视觉效果，您可以对代码进行一些优化。默认情况下，控制按钮位于左侧，可能不够美观。您可以通过调整 CSS 样式，使其居中显示，以获得更佳的视觉效果。这一步是可选的，但推荐进行调整。在`diy.css`文件中，添加以下代码即可实现：

/*网站名称：汇站网*/
/*原文链接：https://www.huizhanii.com/?p=38646*/
.xControl {
    padding-left: 32px;
}

4. 最后，您可以在文章中通过插入以下短代码来使用展开/收缩功能：

[ collapse title=”标题”]需点击展开的内容[/ collapse]

其中，`title`属性用于添加提示内容，提高用户体验。如果不需要提示，也可以省略`title`属性。

通过实现这一功能，您不仅可以优化 WordPress 主题的内容页面加载速度，还能有效提升用户的阅读体验。当文章中包含大量代码时，这一功能尤其有用，可以让读者根据自己的需要选择是否展开查看代码，从而避免页面内容过于冗长。

转载请注明：汇站网 » WordPress 文章美化 为博客内容页添加展开收缩功能