之前写过一篇带头像的友情链接页面,当时有朋友说怎么能支持分类,我让他仿照以前不带头像的旧方法修改下,以前旧方法是用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
交换链接,以下要求缺一不可
- 百度快照新鲜
- 网站主题优雅
- 网站内容健康向上
如果是妹子请发送照片到邮箱,可无视以上条件。
请问为什么添加之后,友情链接都是竖着排列的,一行只显示一个
不好意思,是我缓存的问题,现在已经解决了
谢谢
为什么显示的头像 是一个默认的 而且都一样
@秋叶根Blog 链接描述要加上邮箱才行