WordPress制作圆形头像友情链接页面的方法

网上看见过很多种友情链接页面，我比较喜欢的是圆形头像的这种，先看看效果吧：传送门

就是这种上面是圆形的友链用户头像，下面是友链用户网站名，然后鼠标移上去头像会旋转，怎么实现这种效果呢？我在网上找了很多都不是很详细，于是打算自己写一篇文章方便大家：
操作之前先看看我的另外两篇文章：【这两篇文章很重要，网上很多的方法不详细就是少了很多的步骤】
1.WordPress设置圆形旋转头像的方法
这个里面的功能有很多，但是在这里我叫你们查看这篇文章主要是为了利用里面设置友链用户头像大小，不操作这一步的话设置出来的头像会很大
2.WordPress后台添加友情链接管理功能
这一步主要是为了管理链接，很重要哦
好了，如果上面都实现了的话就看下面的步骤：
1.到cpanel面板复制一份page.php然后改名为links.php，然后上传到和page.php一个路径下。
2.在cpanel面板中打开links.php编辑，在页面的最上面添加下面代码：

1 2 3 4 5

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

3、在links.php中找到文章内容输出函数，在后面插入以下代码：

1 2 3 4 5 6 7 8 9

<?php $bookmarks=get_bookmarks();   if ( !empty($bookmarks) ){     echo '<ul class="link-content clearfix">';     foreach ($bookmarks as $bookmark) {       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>';     }     echo '</ul>';   } ?>

4.在style.css中添加下面的代码：（和网上不同，我删改过部分代码）

1 2 3 4 5

/*圆形友链头像*/ .link-content li{float:left;text-align: center;width: 100px;font-size:12px;margin-bottom:10px;list-style-type:none !important;} .link-content li img{border-radius:100%;transition:0.5s;-webkit-transtion:0.5s} .link-content li span{display:block} .link-content li:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

5.打开左边的链接按钮添加链接，在这里添加的链接之后会自动显示在友链页面的最下面（见最上面的图片）

添加链接的时候注意最下面备注的地方要填写友链用户的邮箱地址（如图），如果不填写，或者友链用户没有注册过Gravatar的话，那么这里就会显示默认的Gravatar头像，比如我上面的图片中的两个友链都是默认的Gravatar头像，

6.新建一个页面名字就写友链（名字根据你自己写），然后正文内容可以像我一样添加一些文字说明，添加的文字会显示在上面，而上一步添加的所有链接会自动
显示在最下面，然后在页面右边的模板选择links.php，之后保存一下就可以了，然后给你的菜单中添加一个友链页面的链接即可。