文章
文章用户商铺文档快讯圈子网址导航
!
也想出现在这里？ 联系我们吧
广告位

WordPress文章添加展开阅读两种方法

使用 WordPress 编写文章的时候我们常常会遇到这样一个问题：为了能满足不同用户对文章内容的理解，我们希望能够将文章内容编写的尽可能详细，但是过于详细的内容对于某些已有一定知识基础的用户来说难免显的啰嗦。这时候我们就需要使用“展开/收缩”功能将文章中某些可说可不说的内容隐藏起来，从而使得文章内容更加简洁有条理性。网上关于实现文章内容“展开/收缩”效果的方法有很多，但是有很多代码似乎已经不可用，而另一些虽然可用但是前端显示效果不怎么美观，于是我便根据网上的一些代码进行了些许的改动便有了这篇文章，今天有空就手写一个简单的示例吧，大家结合自己的需要再在此基础上整合到自己的主题就好了。

方法一

次方法采用的是 CSS+jQuery 方式，不仅仅可以在 wordpress 上使用，也适用于所有网站。

  1. <!doctype html>
  2. <html lang="en">
  3. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="Generator" content="EditPlus®">
  7. <meta name="Author" content="">
  8. <meta name="Keywords" content="">
  9. <meta name="Description" content="">
  10. <title>Document</title>
  11. <script src="jquery.min.js" type="text/javascript"></script>
  12. <style> body{
  13. position: relative;
  14. }
  15. .show_text{
  16. width: 100%;
  17. margin:0 auto;
  18. }
  19. .show_text p{
  20. height:71px;
  21. overflow:hidden;
  22. }
  23. .mask{
  24. width:100%;
  25. position: absolute;
  26. top:0;
  27. height: 71px;
  28. background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
  29. background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
  30. background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
  31. background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
  32. }
  33. .showall{text-align:center;}</style>
  34. </head>
  35. <body>
  36. <div class="show_text">
  37. <p>他一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。</p></div>
  38. <div class="mask"></div>
  39. <p class="showall">展开阅读全文<svg viewBox="0 0 10 6" width="10" height="16" aria-hidden="true" style="height: 16px; width: 10px; margin-left: 8px; vertical-align: text-bottom;"><title></title><g><path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z"></path></g></svg></p>
  40. <script>
  41. $(function(){
  42. $('.showall').click(function(){
  43. $(".show_text p").css("height","100%");
  44. $(".mask").css("display","none");
  45. $(".showall").html("");
  46. })
  47. })
  48. </script>
  49. </body>
  50. </html>

方法二

此方法仅适用于 WordPress 主题

第一，首页我们需要添加一个 JS 效果代码在 header.php 中，放在 body 标签前面，当然你也可以只添加在 sinlge.php 内。

  1. // 添加文章页展开收缩JS效果
  2. <script type="text/javascript">
  3. jQuery(document).ready(
  4. function(jQuery){
  5. jQuery('.collapseButton').click(
  6. function(){
  7. jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
  8. }
  9. );
  10. }
  11. );
  12. </script>

第二，需要编辑 wordpress 主题的 functions.php 文章，将下面代码添加到你的主题的 funtions.php.文件中

  1. // 文章页添加展开收缩效果
  2. function xcollapse($atts, $content = null){
  3. extract(shortcode_atts(array("title"=>""),$atts));
  4. return '<div style="margin: 0.5em 0;">
  5. <div class="xControl">
  6. <span class="xTitle">'.$title.'</span><i class="fa fa-plus-square" aria-hidden="true"></i><a href="javascript:void(0)" rel="external nofollow" class="collapseButton xButton">展开/收缩</a>
  7. <div style="clear: both;"></div>
  8. </div>
  9. <div class="xContent" style="display: none;">'.$content.'</div>
  10. </div>';
  11. }
  12. add_shortcode('collapse', 'xcollapse');

完成上面内容，我们就可以通过短代码来编辑内容文章实现内容的展开全文功能了

  1. [collapse title="说明文字"]需点击展开的内容[/collapse]

为了方便我们后面对文章内容的操作，可以将短码直接写进我们的编辑器中，继续复制下面的代码到 function.php 文章中，就可以在文本编辑器内直接点击使用。

  1. //添加展开/收缩快捷标签按钮
  2. function appthemes_add_collapse() {
  3. ?>
  4. <script type="text/javascript">
  5. if ( typeof QTags != 'undefined' ) {
  6. QTags.addButton( 'collapse', '展开/收缩按钮', '[collapse title="说明文字"]','[/collapse]' );
  7. }
  8. </script>
  9. <?php
  10. }
  11. add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

美化展开收缩功能

如果你想要改变“展开/收缩”字符在前端的显示效果，可以通过添加、、等标签来实现，例如下面的代码。

  1. <span style="font-size: 18pt; font-family: impact, sans-serif;"><em><strong><span style="color: #ff0000;">展开/收缩</span></strong></em></span>

当然，如果你不会编辑这些标签，一个简单的方法是你先在 WordPress 文章可视化编辑窗口编辑好字符样式，然后进入代码窗口复制代码即可。如果你的主题支持 Font Awesome 字体，你可以通过在上面 functions.php 文件中代码内的“展开/收缩”字符前面添加 Font Awesome 图标标签来为你的展开/收缩按钮添加一个美化图标；当然如果主题不支持 Font Awesome 字体也没关系，你可以安装 Font Awesome 4 Menus 插件进行拓展。具体设置代码可参照下面示例。

  1. <i class="fa fa-plus-square" aria-hidden="true"></i> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>

通过上面的代码添加就完成了我们 wordpress 添加文章内容展开收缩的功能，是不是很简单。

给TA打赏
共{{data.count}}人
人已打赏
CSSDIVwordpress代码价格
WordPress教程

WordPress文章页面添加字体增大减小

2024-6-3 7:28:36

WordPress教程

为wordpress文章添加目录方便阅读

2024-6-4 9:34:13

下载说明

  • 1、微码盒所提供的压缩包若无特别说明，解压密码均为weimahe.com；
  • 2、下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
  • 4、资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程，这里不一一讲解。

站长声明

本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有；若为付费资源，请在下载后24小时之内自觉删除；若作商业用途，请到原网站购买；由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部