Hello! 欢迎来到盒子萌!

添加WordPress友情链接页面


avatar
DarkT 2012-10-17 35

昨天换了个主题,发现尽然没有友情链接页面,内页也没有,于是就折腾了下

具体实现的步骤和方法如下:

1.复制一份你主题的 page.php,改名为 page-links.php(或者你自己起).在最上面添加代码:

<?php
/*
Template Name: page-links
*/
?>

2.在 page-links.php 找到文章内容输出函数 类似< ?php the_content(); ?>
在其下面加入下面的代码,可以参考下结尾的函数说明:

<div id="linkcontent">
            <div class="linkpage" >
             <ul>
            <?php wp_list_bookmarks('categorize=1&category_orderby=id&before=<li>&after=</li>&show_images=0&show_description=0&orderby=date&title_before=<h3>&title_after=</h3>'); ?>
             </ul>
            </div>  
        </div>]

3.找到头部输出函数get_header();在下面添加显示效果代码:

<script type="text/javascript">
jQuery(document).ready(function($){
$("#linkcontent .linkpage a").each(function(e){
    $(this).prepend("<img src=http://www.google.com.hk/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=border:0;float:left;padding-left:10px;padding-top:3px;>");
});
});
</script>

4.最后是添加样式,可以给linkpage自定义下样式,比如:

#linkcontent .linkpage h3{background:url(images/linkline.png) no-repeat scroll 0 10px transparent;height:40px;color:#5e6069;text-align:center;font-size:14px;font-weight:400;margin-left:5px}
#linkcontent .linkpage ul{list-style-type:none;overflow:auto;margin-top:20px;margin-bottom:30px}
#linkcontent .linkpage ul li ul li{float:left;height:30px;line-height:23px;list-style-type:none;text-align:center;margin:9px}
#linkcontent .linkpage ul li ul li a{color:#3AA2B4;display:block;text-decoration:none;float:left;height:22px;overflow:hidden;width:110px;border:1px solid #FFF;background:#F9F9F9;-moz-box-shadow:0 0 3px #AAA;-webkit-box-shadow:0 0 3px #AAA;box-shadow:0 0 3px #AAA;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}

5.新建页面,选择page-links模版.完.

附录:友情链接函数wp_list_bookmarks()的一些参考:

categorize=1 — 是否显示分类友情链接(书签)标题,0是不显示,1是显示.
category_orderby=id — 分类按照 ID 号进行排列;
show_images=0 — 不显示链接的图片;
show_description=1 — 显示连接的描述;
orderby=name — Blogroll 的链接根据其名称排序;
title_before 和 title_after — 分类标题前后用 h3 标签套起来.

暂无评论

发表评论