终极版WordPress友情链接页面

2015-01-14 | 10 条评论分类:折腾标签: #wordpress #友情链接 #折腾

此文转载自Bigfa，仅作分享和个人存档用。点击查看演示地址

之前写过一篇带头像的友情链接页面，当时有朋友说怎么能支持分类，我让他仿照以前不带头像的旧方法修改下，以前旧方法是用SQL语句获取的分类，其实完全可以通过Wordpress 自带的函数来实现，原因你懂的。而且还有一部分朋友不知道如何新建自定义页面，索性我就写成了短代码调用。

实现方法：
1、把下面的代码添加到functions.php中

function get_the_link_items($id = null){
$bookmarks = get_bookmarks('orderby=date&category=' .$id );
$output = '';
if ( !empty($bookmarks) ) {
$output .= '

<ul class="link-items fontSmooth">';
foreach ($bookmarks as $bookmark) {
$output .= '
<li class="link-item"><a class="link-item-inner effect-apollo" href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" rel="noopener noreferrer">'. get_avatar($bookmark->link_notes,64) . '<span class="sitename">'. $bookmark->link_name .'</span></a></li>
';
}
$output .= '</ul>
';
}
return $output;
}
function get_link_items(){
$linkcats = get_terms( 'link_category' );
if ( !empty($linkcats) ) {
foreach( $linkcats as $linkcat){
$result .= '
<h3 class="link-title">'.$linkcat->name.'</h3>
';
if( $linkcat->description ) $result .= '
<div class="link-description">' . $linkcat->description . '</div>

$result .= get_the_link_items($linkcat->term_id);
}
} else {
$result = get_the_link_items();
}
return $result;
}
function shortcode_link(){
return get_link_items();
}
add_shortcode('bigfalink', 'shortcode_link');

2、参考CSS样式

.link-title{font-size:18px;color:rgba(0,0,0,0.44);margin:40px 0 10px}
.link-description{font-size:12px;margin-bottom:10px;font-style:italic;color:rgba(0,0,0,0.3)}
.link-item{display:inline-block;margin:10px;width:64px;vertical-align:top}
.link-item-inner{display:block;overflow:hidden;position:relative;text-decoration:none!important}
.link-item .avatar{border-radius:5px;width:64px;height:64px}
.sitename{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.effect-apollo::before{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5);content:'';-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0)}
.effect-apollo:hover::before{-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}

3、调用方法，调用方法非常简单，新建页面直接添加短代码【bigfalink】即可（【】改成[]），也可新建自定义模版使用以下代码调用

<?php echo get_link_items(); ?>

4、调用头像
WordPress的链接管理器有很多其他选项，我们可以选择其中的一个来储存邮箱，之后就可以调用头像了，我这里用的是“备注”，在“备注”中添加上链接邮箱即可。

10 条评论

评论标识：乍见>=1，时晤>=4，同契>=12

东时晤 · 8°

2015‑01‑14 23:19

页面做的蛮漂亮的，可惜自己是个懒得折腾的人。
从良未遂同契 · 136°

2015‑01‑15 09:25

这个我准备去折腾一下
css代码在谷歌浏览器下超出了边框，你看看撒
1. Xinsenz W 作者
  
  2015‑01‑15 12:15
  
  嗯，看到代码超边界了，有时间在整吧
  1. 从良未遂同契 · 136°
    
    2015‑01‑15 12:38
    
    为毛我那里的头像显示i不全啊
    1. Xinsenz W 作者
      
      2015‑01‑15 22:04
      
      可能和你用七牛缓存有关系吧，我也不是蛮清楚
Aivier 时晤 · 5°

2015‑01‑15 11:26

我都不记得我那个友链页面多久没重写过了
1. Xinsenz W 作者
  
  2015‑01‑15 23:42
  
  有时候，逛来逛去，其实就那些人嘛
草根成春同契 · 35°

2015‑02‑15 10:44

很拉风的友情桌面！
dimo 乍见 · 2°

2015‑05‑10 01:38

大神，头像怎么调用啊能说具体点么我是小白谢谢啦
1. Xinsenz W 作者
  
  2015‑05‑11 22:14
  
  现在这个方法在4.2的版本中貌似不奏效了~~

评论已关闭。

终极版WordPress友情链接页面

相关文章

10 条评论