为wordpress文章添加折叠区块

为wordpress文章添加折叠区块

在编写文章时,有些内容稍显次要,但仍需要展示在文章中,尤其是占据较长的篇幅的时候,为了保持文章主体结构的完整,我们可能需要将一些内容折叠起来,在希望阅读的时候将之展开,而不需要的时候则保持折叠状态。在Wordpress中可以利用jQuery实现这个功能,而不需要安装复杂的插件,只需要对functions.php进行编辑即可。

functions.php在主题的目录下,即wp-content/themes/主题名/functions.php,在其最后添加这样一个函数,并在函数定义之后使用add_shortcode(),使wordpress能通过shortcode方式快速将区域转换成折叠区块

function xcollapse($atts, $content = null) {
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div style="margin: 0.5em 0;">
    <hr>
    <div class="xControl">

    <a href="javascript:void(0)" class="collapseButton xButton"> 
	<span class="collapseIcon">+</span> 
	<span class="collapseIcon" style="display: none;">-</span>  
    <span class="xTitle">'.$title.'</span></a>

    <div style="clear: both;"></div>
    </div>
    <div class="xContent">'.$content.'</div>
    <hr>
    </div>';
}


add_shortcode('collapse','xcollapse');

其中第8-9行的class="collapseIcon",是表示折叠和展开的图标,这里简单地使用了 + / - ,当然为了美观也可以利用是font-awesome的折叠与展开图标,或者当前主题使用框架的图标库。

折叠的响应动作在footer.php中指定,在functions.php同一目录下。在footer.php的</body></html>之前加入这样的script:

<script>
    jQuery(document).ready(
        function(jQuery){
          jQuery(".xContent").hide();
            jQuery('.collapseButton').click(function(){
                jQuery(this).children('.collapseIcon').toggle();
                jQuery(this).parent().parent().find('.xContent').slideToggle('fast');
    });
    });
</script>

在页面加载之后,会将class含有xContentdiv区域隐藏。点击展开按钮,则响应collapseButton事件,查找当前点击按钮的控制下的xContent区域并进行toggle().

这样,在编写文章时,就可以使用如下方式表示一块折叠区域:

使用效果:


(折叠区域内容)

while (true)
 {
     viewAccessor.ReadArray(0, charsInMMf, 0, BUF_SIZE);
     for (int i = 0; i < 2048 * 2048; i+=2)
     {
         Marshal.WriteByte(imgData,charsInMMf[i]);
     }
     worker.ReportProgress(0);
     frameCount += 1;
     if (worker.CancellationPending)
     {
         break;
     }
     Thread.Sleep(20);
 }
while (true)
{
    viewAccessor.ReadArray<byte>(0, charsInMMf, 0, BUF_SIZE);
    for (int i = 0; i < 2048 * 2048; i+=2)
    {
        Marshal.WriteByte(imgData,charsInMMf[i]);
    }
    worker.ReportProgress(0);
    frameCount += 1;
    if (worker.CancellationPending)
    {
        break;
    }
    Thread.Sleep(20);
}


目前存在的已知问题是collapse区域内使用Codemirror Blocks的代码高亮插件区块,首次展开后的代码段的行号和样式需要点击一下才能显示出来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注