WordPress主题实现折叠功能的时光轴

2019年5月22日17:49:17 评论 247

今天逛叶忠文博客的时候发现他的可折叠时光轴功能不错,就想搬到我博客来,来实现站点历程这个效果。之前折腾的微语(说说)功能,感觉有些鸡肋,因为每次发一条动态都算创建一篇文章,这对数据库是增加的,而实现可折贴时光轴功能则是在单页中实现,大大减少的数据库的数据。是个很不错的选择。

折腾开始

一:在我们所使用的WordPress主题的style.css文件最后面添加以下代码

  1. /* 站点动态时间轴 */
  2. #teamnewslist ol{list-style:none;padding-left14px;border-left2px solid #eee;font-size15px;color#666;}
  3. #teamnewslist b{font-size12px;font-weightnormal;color#999;displayblock;positionrelative;margin-bottom:5px;}
  4. #teamnewslist b::after{positionabsolute;top6px;left: -22px;content'';width14px;height14px;border-radius: 50%;background-color#fff;border2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
  5. #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
  6. #teamnewslist li:hover{color#555;}
  7. #teamnewslist li:hover b::after{border-color#C01E22;}
  8. #teamnewslist li:hover b{color#C01E22;}
  9. #teamnewslist{padding-left:33px;}
  10. #timedd dd{margin:0;padding:0;}
  11. #timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
  12. #timedd dt,dt a{width:100%;height:auto;display:block;font-weightbold;color:#333;font-size:18px;cursor:pointer;padding1px 0 0 14px;}
  13. #timedd dt a:hover{color#FF0000;}

二:打开后台的页面,新建一个页面,将编辑器调整为文本模式,然后复制下列代码到页面上

  1. <div id="timedd">
  2.     <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">2019</a></dt>
  3.     <dd id=LM1>
  4.         <div id="teamnewslist">
  5.             <ol>
  6.                 <li><b>2019年05月01日</b>关闭谷歌广告提升阅读体验。</li>
  7.                 <li><b>2019年04月30日</b>Emlog今夕何夕模板发布。</li>
  8.                 <li><b>2019年04月26日</b>Google广告审核通过,正式在PC端启动</li>
  9.                 <li><b>2019年01月21日</b>网站重新在京备案审核通过;京ICP备19003457号。</li>
  10.                 <li><b>2019年01月02日</b>网站取消备案审核通过,准备在京重新备案,关站一个月。</li>
  11.             </ol>
  12.         </div>
  13.     </dd>
  14.     <dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">2018</a></dt>
  15.     <dd id=LM2 style="DISPLAY: none">
  16.         <div id="teamnewslist">
  17.             <ol>
  18.                 <li><b>2018年03月19日</b>旧站(www.xsyrz.cn)只做存档.</li>
  19.                 <li><b>2018年02月25日</b>启用qsh5.cn域名作为主要博客。</li>
  20.                 <li><b>2018年02月24日</b>博客放弃Emlog,迁移至WordPress,采用正版知更鸟主题</li>
  21.                 <li><b>2018年02月12日</b>qsh5.cn备案通过。</li>
  22.                 <li><b>2018年02月03日</b>购买(qsh5.cn)域名</li>
  23.                 <li><b>2018年01月31日</b>站点开启百度熊掌号。</li>
  24.                 <li><b>2018年01月06日</b>与久伴一起弄社区(9b5.cn)。</li>
  25.             </ol>
  26.         </div>
  27.     </dd>
  28. </div>

大家可以看出来第一个年份代码和第二个是一样的,其实就是一段代码一直循环。如果需要添加年份,就复制其中一段代码粘贴到后面就可以了。

这上面代码里面的2018 2019都是年份,里面的ShowFLT(1)和ShowFLT(2)还有dd id=LM1和dd id=LM2这个1和2就是顺序,也相互对应。

如果你想添加一个2017年的年份的话,就把上面循环的那段代码复制一遍按照格式粘贴在下面,然后把ShowFLT和LM改成3就可以了。

如果你想默认展开时间轴记录,就把<dd id=LM2 style="DISPLAY: none">中的style="DISPLAY: none删除,比如以上代码中我默认展开的是2019年的时间轴,所以我删除了style="DISPLAY: none"如果你想默认全部展开,就全部删除,反之全部添加!

三:在你的博客footer.php文件里面的</body>之前添加下面js内容。

  1. <script>
  2.     var number = 2; //定义条目数
  3.     function LMYC() {
  4.         var lbmc;
  5.         for(i = 1; i <= number; i++) {
  6.             lbmc = eval('LM' + i);
  7.             lbmc.style.display = 'none';
  8.         }
  9.     }
  10.     function ShowFLT(i) {
  11.         lbmc = eval('LM' + i);
  12.         if(lbmc.style.display == 'none') {
  13.             LMYC();
  14.             lbmc.style.display = '';
  15.         } else {
  16.             lbmc.style.display = 'none';
  17.         }
  18.     }
  19. </script>

注明:这段js需要修改的地方就是上面的定义条目数,这个定义条目数是和上面有几个年份对应的,如果你有三个年份你就修改成3,4个你就修改成4。再说简单一点就是这篇文章最上面的那段代码,你循环了几次就填写几!上面我循环了两次所以我这里是2!

折腾结束,感谢叶忠文博客教程

weinxin
微信公众号
博客微信公众号,欢迎关注。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: