WordPress纯代码实现指定文章内容折叠点击查看抽屉效果

这个教程也是在钻芒博客看到的,感觉自己确实也需要这个功能,所以转载一下。感谢钻芒博客无私提供教程。
期初感觉不需要这方面的功能,最近突然发觉对于有些经常更新的文章来说,一下子太长的篇幅的确显得有些臃肿,在这个快速的信息时代来说,大多数人不喜欢太长篇大论的文章,所以说有时候折叠一部分内容显得还是很有必要的,用户可以选择查看自己感兴趣的内容,那么接下来结合本站实践来实现这一功能。

效果展示

 

添加代码

把下方代码添加到当前主题的footer.php文件中。

  1. <script src=“https://cdn.bootcss.com/jquery/3.4.1/jquery.js”></script>
  2. <script>
  3. /* 为wordpress主题添加“内容展开/收缩”功能开始 */
  4. jQuery(document).ready(
  5. function(jQuery){
  6. jQuery(‘.collapseButton’).click(function(){
  7. jQuery(this).parent().parent().find(‘.xContent’).slideToggle(‘slow’);
  8. });
  9. });
  10. /* 为wordpress主题添加“内容展开/收缩”功能开始 */
  11. </script>

将下方代码添加至主题目录下的functions.php

  1. // 文章页添加展开收缩效果
  2. function xcollapse($atts, $content = null){
  3. extract(shortcode_atts(array(“title”=>“”),$atts));
  4. return
  5. <style>.xControl {
  6. font-size: 15px;
  7. font-weight: bold;
  8. padding: 5px 0;
  9. box-shadow:0 0 20px #d0d0d0;/* 阴影 */
  10. background-color: #FFFFFF;/* 背景颜色 */
  11. border-bottom: 2px solid #e74c3c;/* 边 */
  12. transition: all 0.1s linear;
  13. text-align: center;
  14. border-radius: 0 0 5% 5%;
  15. border-radius:4px;
  16. }
  17. .xControl a{
  18. text-decoration: none;
  19. display: block;}
  20. .xControl a:hover {
  21. text-decoration: none;
  22. display: block;
  23. color:red;
  24. }
  25. .xControl i{font-style:normal;}
  26. </style>
  27. <div style=”margin: 0.5em 0;”>
  28. <div class=”xControl”>
  29. <a href=”javascript:void(0)” class=”collapseButton xButton”> <i class=”fa fa-toggle-on” aria-hidden=”true”>&nbsp;</i><span class=”xTitle”>’.$title.‘</span></a>
  30. <div style=”clear: both;”></div>
  31. </div>
  32. <div class=”xContent” style=”display: none;”>’.$content.‘</div>
  33. </div>’;
  34. }
  35. add_shortcode(‘collapse’, ‘xcollapse’);

添加后台快捷按钮

把下面代码添加到主题目录下的functions.php,去掉第6行【collapse title=”点击展开 查看更多】前的斜杠/

  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’ );

使用方法

下面就可以直接使用了

 文章折叠代码使用演示

Posted in WordPress建站笔记.