2015-10-18_101449

实现方法

新建一个友情链接页面,下面代码放到你想输出的位置。

  1. <?php
  2. $bookmarks = get_bookmarks();
  3. if ( !emptyempty($bookmarks) ){
  4.     echo '<ul class="link-content clearfix">';
  5.     foreach ($bookmarks as $bookmark) {
  6.         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>';
  7.     }
  8.     echo '</ul>';
  9. }
  10. ?>

参考css

  1. .link-content li{float:left;text-align: center;width: 100px;font-size:12px;margin-bottom:10px}
  2. .link-content li img{border-radius:100%;margin-bottom:5px;transition:0.5s;-webkit-transtion:0.5s}
  3. .link-content li span{display:block}
  4. .link-content li:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

添加方法

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


增强版(显示分类)

  1. function get_the_link_items($id = null){
  2.     $bookmarks = get_bookmarks('orderby=date&category=' .$id );
  3.     $output = '';
  4.     if ( !emptyempty($bookmarks) ) {
  5.         $output .= '<ul class="link-items fontSmooth">';
  6.         foreach ($bookmarks as $bookmark) {
  7.             $output .=  '<li class="link-item"><a class="link-item-inner effect-apollo" 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>';
  8.         }
  9.         $output .= '</ul>';
  10.     }
  11.     return $output;
  12. }
  13. function get_link_items(){
  14.     $linkcats = get_terms( 'link_category' );
  15.     if ( !emptyempty($linkcats) ) {
  16.         foreach$linkcats as $linkcat){
  17.             $result .=  '<h3 class="link-title">'.$linkcat->name.'</h3>';
  18.             if$linkcat->description ) $result .= '<div class="link-description">' . $linkcat->description . '</div>';
  19.             $result .=  get_the_link_items($linkcat->term_id);
  20.         }
  21.     } else {
  22.         $result = get_the_link_items();
  23.     }
  24.     return $result;
  25. }
  26. function shortcode_link(){
  27.     return get_link_items();
  28. }
  29. add_shortcode('bigfalink', 'shortcode_link');

参考CSS样式

  1. .link-title{font-size:18px;color:rgba(0,0,0,0.44);margin:40px 0 10px}
  2. .link-description{font-size:12px;margin-bottom:10px;font-style:italic;color:rgba(0,0,0,0.3)}
  3. .link-item{display:inline-block;margin:10px;width:64px;vertical-align:top}
  4. .link-item-inner{display:block;overflow:hidden;position:relative;text-decoration:none!important}
  5. .link-item .avatar{border-radius:5px;width:64px;height:64px}
  6. .sitename{font-size:14px;overflow:hidden;text-overflow:ellipsis;whitewhite-space:nowrap;display:block}
  7. .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)}
  8. .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)}

调用方法

调用方法非常简单,新建页面直接添加短代码[bigfalink]即可,也可新建自定义模版使用以下代码调用

  1. <?php echo get_link_items(); ?>