给WordPress主题添加文章页展开和隐藏的交互效果

虫子君
虫子君
虫子君
588
文章
263
评论
2019年12月21日22:58:08 评论 422 1131字阅读3分46秒

经常看我博客的用户一定看到过,我经常会在文章当中,插入一个展开和收缩的按钮,里面的内容大多都是WordPress主题或者WordPress插件的更新记录,前几天有用户问我,这种功能如何实现,一直以来虫子君都是使用的begin主题,鸟叔已经做好了这个功能,自己不会js所以,对于这个功能不会。所以就一直没有回答这个网友的需求。

不过这几天刚好在莫小雨博客闲逛的时候,看到刊登了一篇利用代码就可以实现“展开、收缩”的功能,所以这里虫子君跟大家分享一下。

给WordPress主题添加文章页展开和隐藏的交互效果

添加功能

首先第一步,自然是需要在主题的function文件当中,添加我们需要的功能,这样方便我们操作这个功能。并且可以再编辑器当中直接添加这个按钮。

function appthemes_add_collapse() {if (wp_script_is('quicktags')){
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapse', '展开/收缩按钮', '[collapse title="说明文字"]这里是需要隐藏起来的内容[/collapse]','' );
// ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

以上代码是为了可以在WordPress编辑器当中增加一个功能按钮。

注意;这个按钮不是在明文编辑窗口,而是在代码编辑窗口。

添加效果

仅仅是在主题当中,添加了功能还不够的,还需要结合JavaScript来实现下滑式显现和影藏的功能,这样可以达到更好的交互效果。

将一下JavaScript代码,粘贴到您主题的</body>标签之前,begin主题可以添加在主题的站长代码验证窗口。其他的主题也都是可以添加在站长验证代码窗口当中。

<script>jQuery(document).ready( function(jQuery){ jQuery('.collapseButton').click(function(){ jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); }); });</script>

最后再补一点,稍微美化的效果吧,大家仁者见仁智者见智,还不够漂亮,大家动起手来吧。

.xControl { padding-left: 32px; }

结语

对于这个功能,其实蛮实用的,很多时候,可以将一些影响排版美观的文字影藏,因为这些内容非常重要,不得不显现出来,但是换一个方法,暂时的隐藏起来,用户想要看的时候,在显示出来,或许会更好一点吧。

分享你的见闻

如果您有好的内容,比如插件或者主题,欢迎来“给我投稿”相信网友会因为你的帮助而感激。

继续阅读
  • 本文由 发表于 2019年12月21日22:58:08
  • 文章链接:https://chonzi.com/8945.html

您必须才能发表评论!