第一步：给WordPress添加CSS样式 登录WordPress后台，点击左侧导航【外观】，再点击【自定义】，然后在【额外CSS】一栏添加下面的代码：
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} .clearfix{height:1%} .clearfix{display:block} .clearfix{min-height:1%} .UI-bubble{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) 0px 0px no-repeat;} .UI-ask{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) -25px 0px no-repeat;} /* questions */ #questions{width:100%;margin:5px auto;border-top:1px solid #e7e7e7;} #questions p{margin:0;font-size:14px;color:#666;} #questions li h5 .UI-ask,#questions li h5 .UI-bubble{position:absolute;left:0px;top:9px;} #questions li{padding:0 0 5px 0;vertical-align:bottom;} #questions li h5{height:40px;position:relative;color:#666;font-size:15px;cursor:pointer;line-height:40px;height:40px;overflow:hidden;padding:0 0 0 26px;} #questions li .foldContent{border-left:3px solid #018ccb;padding:10px 10px 10px 15px;border-top:1px dashed #e2e2e2;line-height:24px;background:#f3f3f3;color:#888;}第二步：给WordPress边栏添加html代码 登录WordPress后台，点击左侧导航【外观】，再点击【小工具】，然后找到【自定义HTML】小工具添加到目标边栏。然后在【自定义HTML】小工具内添加下面的代码：
<div id="questions"> <ul> <li class="clearfix"> <h5><b class="UI-ask"></b>是在云服务器官方购买吗？</h5> <div class="foldContent"> <p>是的，我们只提供优惠链接，代金券，折扣码，所有产品均在云服务器官网购买。</p> </div> </li> <li class="clearfix"> <h5><b class="UI-ask"></b>云服务器是在自己账号里面吗？</h5> <div class="foldContent"> <p>是的，云服务器在您注册的云服务器账号里面。</p> </div> </li> <li class="clearfix"> <h5><b class="UI-ask"></b>购买云服务器怎么付款？</h5> <div class="foldContent"> <p>直接在阿里云、腾讯云等云服务器官方付款购买云产品，我们在原则上不收取客户的任何产品购买费用。</p> </div> </li> <li class="clearfix"> <h5><b class="UI-ask"></b>"优惠链接"和"官网购买"有区别吗？</h5> <div class="foldContent"> <p>当然有。除了享受折扣价购买云服务器外，您可以和本站客服取得联系，享受云服务器购买咨询及技术支持。</p> </div> </li> <li class="clearfix"> <h5><b class="UI-ask"></b>"云期刊"提供哪些技术服务呢？</h5> <div class="foldContent"> <p>我们为您提供云服务器基本维护、性能优化、网站数据备份等多种技术支持，详情请点 <a href="https://www.xxx.cn/5178.html" style="font-weight:500;font-style:italic;color:#fe791a;">更多服务</a></p> </div> </li> </ul> </div>第三步：给WordPress添加jQuery代码 这里需要说明一下，不同的主题添加jQuery代码的位置不同，通常有三种方法：
1、把下面的代码也复制粘贴到【自定义HTML】小工具内，放在HTML代码的下面即可。
2、把下面的代码输入到【统计代码】位置，因为每个主题都有粘贴统计代码的位置。
3、如果您的主题恰巧么有，那就把下面的代码复制粘贴到主题的js文件中即可，这种方法得熟悉WordPress才能操作。
<script> $(function(){ $("li>h5","#questions").bind("click",function(){ var li=$(this).parent(); if(li.hasClass("fold")){ li.removeClass("fold"); $(this).find("b").removeClass("UI-bubble").addClass("UI-ask"); li.find(".foldContent").slideDown(); }else{ li.addClass("fold"); $(this).find("b").removeClass("UI-ask").addClass("UI-bubble"); li.find(".foldContent").slideUp(); } }); }) </script>第四步：上传FAQ图片
通过上面三步，基本已经成功了，但是您会发现没有演示中的图片，在您的WordPress主题根目录新建一个images文件夹，把下面的图片保存并且上传到images文件夹即可。注意：图片的名称不能更改，改变后会不能显示。
链接：https://pan.baidu.com/s/1aeOKU_GCDIEjOlvFEGDUVQ 提取码：tiug
文件中包括：html页面代码、Css样式代码、jQuery展开收缩代码，大家可以下载使用。在这里感谢代码库的分享，祝代码库越来越好！
链接：https://pan.baidu.com/s/1WddjwKZGDmkMhbak-iY4vg 提取码：bu3z
