分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » 给WordPress文章内添加一个收缩展开栏
+ 6

给WordPress文章内添加一个收缩展开栏

  • 功能展示
  • 第一步代码
  • 第二步代码
  • 调用代码
  • 总结
  • 给WordPress文章内添加一个收缩展开栏-BanYuner

    好吧,今天打了鸡血的更新了这么多的文章,全部都是自己手敲出来的哦,但是证明今天的收获还是很多的哦,那么不废话了,直接进入正题。

    功能展示

    因为是动态效果,那么我就直接在别人的博客上面录制了一段gif图片,这里就给大家看看吧:
    给WordPress文章内添加一个收缩展开栏-BanYuner

    相信大家看了之后也应该懂了这个功能是干什么用的。虽然我现在的博客用不到这些功能,但是我依然还是将此功能添加进来了,毕竟万一有时候需要的话还是有一定的效果的。

    第一步代码

    代码方面两个步骤:
    1.首先创建一个文本文档并保存为自己命名的一个js文件,如:ss.js

    /* 爲網站添加「點擊展開/收縮」功能開始(由AREFLY.COM製作) */
    jQuery(document).ready(
    function(jQuery){
    jQuery('.collapseButton').click(function(){
    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
    });
    });
    

    按照原作者说的就是将此文件引入网站所引用的JS文件内,这个是什么意思呢,说白了就是让你在加载页面的同时加载这个js文件而已。那么如何引入呢?这里引用百度来的文字:

    1.若母文件在根目录下,则应这样写:

    <script type="text/javascript" src="JS/login.js"></script>
    

    这个时候下面的两种写法是不正确的:

    <script type="text/javascript" src="/JS/login.js"></script>
    <script type="text/javascript" src="../JS/login.js"></script>
    

    2.若母文件在根目录下的一个叫login的文件夹下,则应这样写:

    <script type="text/javascript" src="../JS/login.js"></script>
    

    这个时候下面的两种写法是不正确的:

    <script type="text/javascript" src="/JS/login.js"></script>
    <script type="text/javascript" src="JS/login.js"></script>
    

    同样对CSS文件的引用也是这样的。

    这样的话,我相信大家都懂了,但是要引入到那个文件中去呢,文章页的话,一般都会有一个comment.js文件或者别的JS文件,这个可以通过chrome的F12查看即可,不懂的可以留言。

    第二步代码

    接下来就是将下面一段代码直接添加到functions.php文件中末尾最后一个?>之前即可:

    /* 爲WordPress添加「點擊展開/收縮」功能開始(由AREFLY.COM製作) */
    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');
    

    这个就没有什么需要说明的了,应该都能懂吧

    调用代码

    那么功能方面已经实现了,我们需要做的就是将其表现出来,就需要使用调用代码了:

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

    总结

    其实这个功能在我一开始使用的那个主题里面是内置的,名字叫做手风琴,但是内容方面无法使用HTML语言,只能纯文字,后来就没有使用了。但是这个方法貌似可以解决这个问题,大家可以尝试一下。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    给WordPress文章内添加一个收缩展开栏

    支付宝(点击图片切换)

    扫码,支持我

    给WordPress文章内添加一个收缩展开栏

    微信(点击图片切换)

    扫码,手机看

    给WordPress文章内添加一个收缩展开栏
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress评论上方显示评论用户列表

      WordPress评论上方显示评论用户列表

      一段时间之前,我在我的博客里面添加了下面的功能,这个功能我一开始觉得貌似没有人会喜欢或者说会显得比较多余,但是今天一个朋友问我如何实现这个功...

      点击查看
    • WordPress自动截取文章首段限定字数做为摘要

      WordPress自动截取文章首段限定字数做为摘要

      今天一个朋友问我这个问题,说实话,我也不像百度了,所以直接把 DUX 的方法介绍给大家了,我个人还是比较看好这个方法的。 DUX 实现这个功...

      点击查看
    • WordPress文章内容底部添加相关文章

      WordPress文章内容底部添加相关文章

      这个功能貌似很多人都已经知道了,但是我相信还是有很多新接触 WordPress 的用户还是不了解的,这里我就直接简单的说明一下,不明白的地方...

      点击查看
    给WordPress文章内添加一个收缩展开栏
    0 + 9 =
    1. 2楼
      牧羊人
      还做了个 GIF 图,真是有心。。
      牧羊人 来自天朝的朋友 谷歌浏览器 Windows 10 重庆市 联通 1年前 (2016-01-28)回复
    2. 1楼
      楚书业
      我一直想把原来的手风琴换掉,找不到比较好的手风琴纯代码版的。
      楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省福州市 移动 1年前 (2016-01-24)回复
      • 帅气小琦琦
        @楚书业 这个代码还是不错的 看个人吧
        帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1年前 (2016-01-24)回复
        • 楚书业
          @帅气小琦琦 你说的这个代码我没试过。最近各种不想折腾!
          楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省福州市 移动 1年前 (2016-01-25)回复