[i折腾]WordPress微调:浮动导航、Widget “Meta” 改造

2

Author: 峄峰 | Categor: 伪极客 | Date: 05-12-2010 | 2,696 views

部分版权保留,转载请注明:
本文发表于樽前小筑™ 原文链接: [i折腾]WordPress微调:浮动导航、Widget “Meta” 改造

这两天对樽前小筑的微调内容,录以备忘

  • 浮动导航(返回顶部、查看评论、查看评论)

代码取自木木的博文:《“返回顶部”加强版代码及释义》

footer.php 增加:

  1. <?php if (!is_singular()) { ?>
  2. <div id=”shangxia”><div id=”shang” title=’返回顶部’></div><div id=”xia” title=’查看评论’></div></div>
  3. <?php } else { ?><div id=”shangxia”><div id=”shang” title=’返回顶部’></div>
  4. <div id=”comt” title=’查看评论’></div><div id=”xia” title=’查看页尾’></div></div><?php } ?>
    /*以上设定导航条内容,post 和 page 中显示“查看评论”,其他页面只显示返回顶部和查看页尾;
    以下使用 jQuery 实现滚屏效果*/
  5. <script type=”text/javascript”>
  6. jQuery(document).ready(function($){
  7. var s=$(‘#shangxia’).offset().top;
  8. $(window).scroll(function (){  $(‘#shangxia’).animate({top : $(window).scrollTop()+s+’px’},{queue:false,duration:500});});
  9. $(‘#shang’).click(function(){$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
    /*点击id=”shang”对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为800毫秒*/
  10. $(‘#comt’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#idc-container’).offset().top}, 800);});
    /*点击id=”comt”对象时,滑动至id=”idc-container”相对浏览器滚动条的距离,时间为800毫秒;
    一般 WordPress 主题默认的应当是 id=”comments” 标示评论,这里用  id=”idc-container” 是由于使用了 IntenseDebate 插件*/
  11. $(‘#xia’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#footer’).offset().top}, 800);});
  12. });

Style.css 增加:

  1. #shangxia{position:fixed;top:38%!important;left:50%;margin-left:180px;display:block;}
    /*使用 fixed 使 id=“shangxia” 的对象固定于浏览器中,相对的上距离为38%,左距离为50%(即居中),然后向右移动180px;
    先居中再移动的方式可以适应不同宽度的浏览器。
    实际使用时这个 ”shagnxia“ 对象会距上边愈来愈远,我是代码小白找不出原因,祭出”!important”大法,囧。*/
  2. #shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:50px;width:50px;margin:10px 0;}
    /*想着再换套图标,现在这个有些太扎眼了点*/
  3. #xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:50px;width:50px;margin:10px 0;}
  4. #comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:50px;width:50px;margin:10px 0;}

WordPress 自带的 widgets 中有一个叫做 “Meta”,功能包括注册、登入与登出,WordPress 官网链接, 文章、评论 Rss 神马的。其中链接和 RSS 俺都有了别处安放,就对这个进行简单改造,增加点更实用的功能咯。

../wp-includes/default-widgets.php295 行左右,改为:

  1. echo $before_widget;
  2. if ( $title )
  3. echo $before_title . $title . $after_title;
  4. ?>
  5. <ul>
  6. <?php wp_register(); ?>
    /*注册*/
  7. <li><?php wp_loginout(); ?></li>
    /*登入登出*/
  8. <li><a href=”#top”>Back2Top</a></li>
    /*回到顶部(无滑动效果)*/
  9. <li><a href=”<?php the_permalink() ?>?mobile” rel=”nofollow” title=”MobilePress”>Mobile Edition</a></li>
    /*转到移动版(MobilePress 支持)*/
  10. <?php echo edit_post_link(‘Edit this entry.’, ‘<li>’, ‘</li>’); ?>
    /*编辑当前文章/页面(登入状态显示)*/
  11. <?php wp_meta(); ?>
  12. </ul>
  13. <?php
  14. echo $after_widget;

Posted on yeFoenix' Vineyard | Licensed under Creative Commons License



藏·荐:



  1. Pingback: 浮动导航(返回顶部、查看评论、查看页尾) | 嗨,CC!

微信扫描二维码分享文章:

无觅相关文章插件,快速提升流量