分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 给WordPress文章内添加一个收缩展开栏
  • 给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文章内添加一个收缩展开栏
    8 + 4 =
    最新评论 7条评论 | 4人参与
    1. 3楼
      电人超万
      最后评论时间:2018/04/01 10:45
      来自天朝的朋友 谷歌浏览器 Windows 10 广东省珠海市 联通
      电人超万 评论于3周前 (04-01)感谢回复者回复
      请问博主本博客的评论是什么插件?感觉好好看 undefined
    2. 2楼
      牧羊人
      最后评论时间:2017/03/18 10:41
      来自天朝的朋友 谷歌浏览器 Windows 10 重庆市 联通
      牧羊人 评论于2年前 (2016-01-28)感谢回复者回复
      还做了个 GIF 图,真是有心。。
    3. 1楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省福州市 移动
      楚书业 评论于2年前 (2016-01-24)感谢回复者回复
      我一直想把原来的手风琴换掉,找不到比较好的手风琴纯代码版的。