欢迎访问服务器技术网-www.fuwuqijishu.com

WordPress文章页面添加展开收缩功能(提高相关内容互动率)

网站建设 fuwuqijishu 2年前 (2022-09-04) 42次浏览 0个评论 扫描二维码

最近在看到有些人的博客内容有看到内容中有相关的文章是通过展开和搜索隐藏起来的,但是确实可以提高站内内容的相关联互动。这个是如何实现的呢?这里简单的整理方法,后面试试看。

1、功能部分

    //功能部分
    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');  

添加到当前主题功能代码里。

2、JS部分

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

展开和搜索需要用到JS。

3、调用方法

这里根据需要的位置调用包含起来。我们也可以用短代码添加到编辑器中。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Warning: error_log(/www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/#log/log-2214.txt): failed to open stream: No such file or directory in /www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/spider.class.php on line 2900