WordPress 友情链接页面终极版

Wordpress 友情链接页面终极版

演示地址

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

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

实现方法

把下面的代码添加到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" >'. 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');

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

调用方法

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

<?php echo get_link_items(); ?>

PS

交换链接,以下要求缺一不可

  • 百度快照新鲜
  • 网站主题优雅
  • 网站内容健康向上

如果是妹子请发送照片到邮箱,可无视以上条件。

13

Related Posts

Comments : 13

  1. 博主好,我想问一下为什么获取到的头像都是神秘人呢。谢谢啊

    1. @肖扬

      你没填邮箱吧

  2. 所以要伪装成妹子 :razz:

  3. 我用了,但链接名称显示不全 是怎么回事呢? :!:

    1. @stan

      想帮你看看,但是贵站打开速度实在感人。推测是链接名过长自动把部分转化为…了。 :x

    2. @bigfa 谢谢,已经解决了,css里宽度64改成100即可
      然后还有问题还请教下,我看你演示里有灰色字注释的,这个哪里设的啊? :grin:
      用https之后速度明显慢了好多,再加上有时候我这条线路会抽一下,所以有时候碰巧就那么。。。。

    3. @stan

      你添加链接的适合不是有描述选项么

  4. 所以得装成是妹子的样子?

  5. 带头像的友情链接页面,这个文章链接已经没有了。。。

    1. @幸福理财师

      难道这篇文章没有头像么

  6. 网站整体很简洁啊,但是加载很慢的感觉啊

    1. @skyb

      直接关闭页面就可以了

发表留言

Post Comment