在wordpress主题开发中友情链接功能是必不可少的,大挖通常使用的是菜单功能来替换友情链接功能,这里不多说了,因为今天只讲wordpress程序默认的友情链接功能wp_list_bookmarks,这个功能其实在wordpress3.x版本时就已经相当成熟了,后面更新的情况也不多,但是对于网站来讲友情链接还是必不可少的。因为可以和朋友的站互联,而且可以提升网站的权重。
那链接的功能我们通常是只添加在首页位置的,并且不会出现在分类或是文章页面,这会导致整站权重下降,那同时我们也需要知道链接是可以分类的,可以通过链接的分类链接来进行特定内容链接的显示。
1 |
<?php wp_list_bookmarks('orderby=id&categorize=0&category=11&title_li='); ?> |
我们通常用以上的函数来调用wordpress的链接,但是需要我们注意一点的是category=11,他的意思是显示分类为11的链接,以链接的ID排序,并且不显示链接分类目录名。
如何只在首页上显示,也很简单,就是一个if语句,代码如下:
1 2 3 |
<?php wp_reset_query(); if ( is_home()) { ?> <?php wp_list_bookmarks(); ?> <?php } ?> |
附上一个简单的首页底端的友情链接代码及样式:
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php wp_reset_query(); if (is_home()) { ?> <div class="yqlj"> <div class="yqljbt"> </div> <div class="yqljlb"> <ul> <?php wp_list_bookmarks('orderby=id&categorize=0&category=11&title_li='); ?> </ul> </div> </div> <?php } else {?> <?php } ?> |
CSS如下
/* 首页指定友链分类显示======================================================================= */
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.yqlj { background-color: #FFF; clear: both; height: 116px; display:table; margin: auto; text-align:center; margin-bottom:15px; border-radius: 4px; border: 1px solid #eaeaea } .yqljbt { line-height: 50px; height: 50px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e8e8e8; margin-right: auto; margin-left: auto; clear: both; } .yqljbt_l{ float:left;} .yqljbt_l a { height: 18px; margin-left: 16px; border-left-width: 5px; border-left-style: solid; border-left-color: #51ADED; padding-left: 10px; color: #3e4142; font-size: 16px; } .yqljbt_r{float:right;margin-right:30px;_margin-right:15px;} .yqljbt_r a { height: 18px; color: #999999; font-size: 14px; } .yqljbt_r a:hover{color:#0081e6;} .yqljlb { float: left; width: 1200px; } .yqljlb ul { margin-left: 6px; padding-top:8px; padding-bottom:8px; } .yqljlb ul li { line-height: 30px; float: left; padding-right: 10px; padding-left: 10px; } .yqljlb ul li a { color: #60717e; } .yqljlb ul li a:hover{color:#0081e6;} @media screen and (max-width: 1024px){ .yqlj { display: none; } } |