给wordpress添加友情链接页面

一般情况下wordpress没有“友情链接”模板的页面,这次就记录下我是如何创建一个带头像的友情链接页面。

《给wordpress添加友情链接页面》

复制一份主题的 page.php,重命名为 page-links.php

在 page-links.php 找到文章内容输出函数

<?php the_content(); ?>

,在这个位置改成如下面的代码:

<h2>以下链接刷新后随机排列</h2>
<div>
<?php
$bookmarks = get_bookmarks('title_li=&orderby=rand'); //全部链接随机输出
if ( !empty($bookmarks) ){
    echo '<ul class="link-content clearfix">';
    foreach ($bookmarks as $bookmark) {
        $friendimg = $bookmark->link_image;
        if(empty($friendimg)){
           echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" >'. get_avatar($bookmark->link_notes,64) . '<span class="sitename">'. $bookmark->link_name .'</span></a></li>';
        } else {
           echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" >'. '<img src="'. $bookmark->link_image. '" />' . '<span class="sitename">'. $bookmark->link_name .'</span></a></li>';
        }
    }
    echo '</ul>';
}
?>
</div>
<?php the_content(); ?>

为了美观点,可以给 page-links 这个class定义样式,可以参考此例的代码如下:

 
/**友情链接**/

.link-content li{float:left;text-align: center;width: 100px;font-size:14px;margin-bottom:10px;list-style-type: none;}
.link-content li img{border-radius:100%;margin-bottom:5px;width:64px;height=64px;transition:0.5s;-webkit-transtion:1.5s}
.link-content li span{display:block}
.link-content li:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

建立一个页面,别名(slug)为 links 即可。

使用方法:
WordPress的链接管理器有很多其他选项,我们可以选择其中的一个来储存邮箱,之后就可以调用头像了。

我这里的做法是默认调用link_image即设置友情链接时候设置的图像地址,如果没有设置此项,则调用notes即在“备注”中填写上邮箱即可,如果都没有设置,这为系统默认图片.

演示:
友情链接页面模板之一

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

  1. 乱云/Akay 说道:

    感谢分享,不知道为啥css里边添加了样式代码后,不起效果。

  2. guyuehu 说道:

    请问这个 page-links class样式写在哪个文件里?

    1. 黑鸟 说道:

      加到主题目录下 style.css 末尾