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

恢复链接管理器和添加头像的方法请在上面那篇文章中查看。

实现方法

把下面的代码添加到functions.php中

function get_the_link_items($id = null){

$bookmarks = get_bookmarks('orderby=date&category=' .$id );

$output = '';

if ( !empty($bookmarks) ) {

$output .= '

• ';

foreach ($bookmarks as $bookmark) {

$output .=  '

'. get_avatar($bookmark->link_notes,64) . ''. $bookmark->link_name .'';

}

$output .= '

';

}

return $output;

}

function get_link_items(){

$linkcats = get_terms( 'link_category' );

if ( !empty($linkcats) ) {

foreach( $linkcats as $linkcat){

$result .=  '

'.$linkcat->name.'

';

if( $linkcat->description ) $result .= '

';

$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');

参考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)

}

调用方法

调用方法非常简单，新建页面直接添加短代码