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 .= '

• ';

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 .= '

' . $linkcat->description . ' ';

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

}

調用方法

調用方法非常簡單，建立頁面直接添加短代碼