..start..fly..

扫一扫
Guestbook

Home / PHP & Wordpress / wordpress添加底部或是任何位置的widget

<< 给力2011,网站手机版本预览非插件实现wordpress缩略图显示相关文章 >>

其实觉得杂志类的主题虽然比较简洁,但是总觉得信息量不够大的,虽然把内容页都做了些改动,但是觉得对于我这个revolution  office主题来说,还是显得展示信息的能力很弱的,所以想着能不能在widget上做点文章的。

首先声明一下,网上在博客底部添加widget的方法是很多的,包括插件的方法,以及通过代码在function.php中添加新的register实现调用,觉得这些方法好是好,但是觉得这样的widget很难和底部的css协调,当然了,很多人说可以修改底部widget的css,其实我想了一下,如果这样的话,我还不如直接通过调用编辑好的页面作为widget呢,这样还可以绕过繁琐的function.php调试的,首先来张截图效果:

底部添加widget

具体过程如下:

一、打开要显示外部widget的地方,因为我是要在底部显示,我就以我自己的说明了的,打开foot.php,然后在合适的地方添加以下这段代码:

  1. <?php include (TEMPLATEPATH . '/widget.php'); ?>


当然,先不考虑处理css的问题的了,所以肯定是很难看的了,这无所谓了的。

二、就是写这个widget.php文件了的,其实这和不用插件实现wordpress中留言板功能是一样的,这个widget.php可以非常灵活的写的,完全可以依照你需要的效果写出来的,比如以下是我的网站的widget.php原始代码:

  1. <div class="clear"></div>
  2. </div>
  3. </div>
  4. <div class='bottomcover'>
  5. <div class='bottom'>
  6. <div class='botbox rounded'>
  7. <h3 class="sidetitl rounded"> Friend Links </h3>
  8. <ul>
  9. <?php get_links(2, '<span>', '</span>', '', TRUE, 'rating', FALSE); ?>
  10. </ul>
  11. <div class="clear"></div>
  12. </div>
  13. <div class='botbox blogbox rounded'>
  14. <h3 class="sidetitl rounded">HOT</h3>
  15. <ul>
  16. <?php $rand_posts = get_posts('numberposts=4&orderby=rand');  foreach( $rand_posts as $post ) : ?>
  17. <a href="<?php the_permalink() ?>" title="<?php the_title() ?>"><img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" width ="110" height="110" alt="<?php the_title() ?>" /></a>
  18. <?php endforeach; ?>
  19. </ul>
  20. </div>
  21. <div class='botbox boxlast rounded'>
  22. <?php include (TEMPLATEPATH . '/sky.php'); ?>
  23. </div>
  24. <div class='clear'></div>
  25. </div>
  26. </div>


三、其实就是美化css了的,但是你可能注意到了我的widget.php中又调用了一个sky.php,其实是因为我还想在底部调用点别的,而且方便以后修改,就避免了直接修改widget.php文件了,这样就比较灵活了的,所以如果你不需要的话,可以直接删除那行代码好了的。我的CSS如下:

  1. /* Bottom */
  2. .bottomcover{
  3. background:none;
  4. }
  5. .bottom{
  6. width:960px;
  7. padding:10px 0px 10px 0px;
  8. margin:0px auto;
  9. }
  10. .bottom a:link,.bottom a:visited{
  11. color:#555;
  12. }
  13. .bottom a:hover{
  14. color:#333;
  15. }
  16. .botbox{
  17. width:284px;
  18. float:left;
  19. margin:0px 20px 0px 0px;
  20. padding:10px;
  21. background:#f4f4f4 url(images/box.png) bottom repeat-x ;
  22. border:1px solid #fff;
  23. }
  24. .boxlast{
  25. float:right;
  26. margin-right:0px!important;
  27. }
  28. .botbox ul{
  29. list-style:none;
  30. }
  31. .botbox ul li{
  32. margin:10px 0px;
  33. height:60px;
  34. }
  35. .boxlast ul li{
  36. margin:5px 0px;
  37. height:auto!important;
  38. padding:10px 0px;
  39. }
  40. .blogbox ul li{
  41. margin:0px 0px;
  42. height:auto!important;
  43. padding:5px 0px;
  44. border-bottom:1px solid #fff;
  45. }
  46. .trapic{
  47. float:left;
  48. margin-right:10px;
  49. }
  50. .botbox h3{
  51. font-size:14px;
  52. color:#222;
  53. font-weight:bold;
  54. }
  55. h3.hoxhed{
  56. color:#018ce3;
  57. padding:7px 0px ;
  58. font-size:16px;
  59. margin-bottom:5px;
  60. }
  61. .pmeta{
  62. color:#666;
  63. font-size:12px;
  64. width:180px;
  65. float:left;
  66. }
  67. .squarebanner ul{
  68. list-style-type:none;
  69. margin: 0px 0px 0px 0px;
  70. padding: 0px 0px 15px 0px;
  71. width:300px;
  72. overflow:hidden;
  73. }
  74. .squarebanner ul li{
  75. list-style-type:none;
  76. margin: 12px 6px 0px 6px!important;
  77. float:left;
  78. padding:5px!important;
  79. display:inline;
  80. background:#fff;
  81. }


通过以上的过程就可以制作出比较个性化的底部或是任何部位的widget.php效果了的,而且我觉得最大的好处是避免了调试function.php文件,也就避免了很多麻烦的,其实一个基本的思路就是:
foot.php引用一个widget.php》》编写这个widget.php,通过代码实现评论、文章等等的显示

最大的优点是可以灵活编辑,而且不会和主题有冲突,即使不支持或是对widget支持不好的主题也可以实现,呵呵,我的主题就是对widget支持不是很好,但是通过这个绕道的方法就可以很好的实现了的,而且不怕主题出现冲突的。

新的一年里,祝大家兔年福气多多 :-x

PS:为了大家调试方便,提供我的这个widget.php文件和sky.php下载,而且这样的widget.php是很多的,尤其是国外的主题,随便下载一个就可以参考一下挖出来了的。

Related Posts

转载原创文章请注明,转载自:SKY..fly..[www.sky.gs]

本文链接: https://www.sky.gs/websites/phpwordpress/wordpress-bottom-and-anywhere-widget-nonfunction-php.html

QR:  wordpress添加底部或是任何位置的widget

598 Responses to “wordpress添加底部或是任何位置的widget”

  1. 你的主题真的很不错,已经能够下载收藏了,谢谢楼主哦,咱都是医学科的啊呵呵,,能和你做个链接么,你的链接我已经做好了呵呵

  2. Firm says:

    在层次上不是很符合国人的阅读习惯。。

Leave a Reply

Code (☆)2+9=?


Websites powered by Wordpress5.7 Copyright © 2009-2021 - All Rights Reserved   SKY..fly..