现在的位置: 首页 > 互联网络 > WP相关 > 正文

谈谈WordPress博友链接页面的制作

2010-08-08 17:10 WP相关 ⁄ 共 2135字 ⁄ 字号 暂无评论

    现在谈谈如何建立个性化的 WordPress 友情链接页面,效果可以见我的友情链接。要完成该个性化友链页面需要三步:

    1、确认已经加载jquery库;

    2、新建模板页面,调用友链函数;

    3、CSS 美化友链。

一、jquery库的加载与使用

    首先,在header文件里检查下自己的主题是否有jquery.js这个文件,一般主题本身就带有;如果没有的话,也不要紧,自己动手在header文件里加入下列代码<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>,当然,也可以把这段代码放在你的主机空间。

    其次,加载jquery控制代码,用以获取Google服务器上缓存图标。把下面这段代码另存为.js文件,然后再在header.php的head标签中调入。

$(".linkpage a").each(function(e){ 

$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">"); 

});

二、新建友链页面模板

  打开所用主题的 page.php 文件,在文件最顶端加上以下声明代码:

<?php
/*
Template Name: Links Page
*/
?>

  再找到如下代码:

<div class="entry">
    <?php the_content(); ?>
</div><!--/entry -->

  修改为:

<div>
<?php wp_list_bookmarks();?>
</div><!--/entry -->

 关于wp_list_bookmarks函数

<?php wp_list_bookmarks('categorize=1&category=XX,YY,ZZ&
category_orderby=id&before=<li>&after=</li>&show_images=0&
show_description=1&orderby=name&title_before=<h3>&title_after=</h3>'); ?>
</div><!--/entry -->

  参数解释

  categorize=1 — 显示所有 Blogroll 的分类;
  category=XX,YY,ZZ — 指定显示 ID 为 XX YY ZZ 的 Blogroll 分类,如果您的 Blogroll 没有一个总的大分类话,这个参数可以去掉,因为上一个参数已经指定了显示所有分类;
  category_orderby=id — 分类按照 ID 号进行排列,假如 XX>ZZ>YY 那么最终显示的顺序就是:XX 分类下的链接、ZZ 分类下的链接、YY 分类下的链接;
  before 和 after — 每个连接前后都用 li 标签套起来;
  show_images=0 — 不显示链接的图片;
  show_description=1 — 显示连接的描述;
  orderby=name — Blogroll 的链接根据其名称排序;
  title_before 和 title_after — 分类标题前后用 h3 标签套起来(这个因站而异)。

  修改好代码之后将该文件另存为一个 php 文件,比如:link_temp.php,将其上传到主题文件夹的目录下。最后新建一个页面,并在右侧的页面模块中选择刚刚新建的“Links Page ”。

三、利用CSS 美化友链

  在 style.css 中加入以下CSS,当然也可以根据个人喜好自己DIY。

/*linkpage*/

.linkpage {display:inline;float:left;margin:3px 20px;padding:0 5px;width:100%;} 

.linkpage h3{line-height:20px;} 

.linkpage ul{margin:0;padding:0 6px;list-style-type:none;overflow:hidden;} 

.linkpage img{float:left;height:16px;width:16px;padding:3px 0 3px 3px;} 

.linkpage ul li{float:left;width:141.3px;text-align:center;margin:5px;line-height:180%;background-color:#E9EAEA;border:1px solid #808080;} 

.linkpage ul li a{color:#666667;display:block;} 

.linkpage ul li a:hover{background-color:#FFF;color:gray;font-weight:700;}

  写了一大堆,看似复杂,实则简单,。不过,问题很多可能会出在第一步里。怎么样?感兴趣吧?赶快去折腾吧~~
 
特别鸣谢木木木木木

给我留言

留言无头像?