WP的友情链接只在首页底部横向显示

重庆SEO分享:关于在WordPress中设置友情链接的不同显示方法。

从用户体验和SEO优化方面考虑,常常会对我们的友情链接显示进行设置,一要满足网站优化的要求,二还要对用户的体验考虑。让它更能符合我们网站的需要,从而让链接显示更加美观大方而且满足网站优化要求,所以在很多时候我们都会对自己的的友情链接进行设置。

一、友情链接只在首页底部横排显示设置步骤:

必须要了解wordpress的友情链接调用函数wp_list_bookmarks,具体函数详解请参照重庆陈江林的文章《WordPress友情链接函数wp_list_bookmarks介绍》。既然wp_list_bookmarks有这么多参数可供设置,那么其实用一句调用函数就好了,剩下的就是根据你主题的情况,来调整CSS了,下面附上《重庆SEO》的友情链接打码,有错误遗漏之处在所难免,希望您能告知错误,不胜感激!

1、在主页模版适当的位置(一般放在文章主体和侧边栏代码之后,footer之前)加上这段代码:

<!--links-->
<div class="links">
<div class="links_title">
<h2><font color="#990000">友情</font>链接:</h2>
</div>
<?php if (is_home()) { ?>
<p><div class="links_info">
<ul><?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&show_images=0'); ?></ul>
</div></p>
<?php } else {?>
<?php } ?>
</div>
<!--end links-->

Ps:大家可以看到,我用div盒子来放这些友链,并且加上了条件判断is_home(),这样就可以做到这段代码只在主页生效,也就是底部的友情链接只会显示在主页底部了。至于调用函数wp_list_bookmarks其中的那些参数控制,请看文章头提到的那篇文章。

2、在样式表 (style.css)适当的位置加上如下代码:

/* links */
.links {
background-color: #fafafa;
margin:0 auto -15px;
width:1035px;
height:65px;
line-height: 25px;
list-style: none;
border: 1px solid #CCC;
}
.links_title {
float: left;
width:1000px;
margin:0 10px;
}
.links_info {
padding: 5px;
}
.links_info ul {
list-style: none;
}
.links_info ul li {
float: left;
margin: 0 0 0 8px;
}

Ps:以上代码针对重庆SEO的布局控制CSS样式,可以根据自己的主题对以上代码进行修改。
2、根据《重庆SEO》主题修改代码和显示效果如下:

<!--links-->
<div id="container">
<div class="links">
<div class="links_title">
<h2><font color="#990000">友情</font>链接:</h2>
</div>
<?php if (is_home()) { ?>
<p><div class="links_info">
<ul><?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&show_images=0'); ?></ul>
</div></p>
<?php } else {?>
<?php } ?>
</div>
</div>
<!--end links-->

links
二、友情链接底部横排全站显示设置步骤:

更加第一种方法很容易修改出友情链接底部横排全站显示,只需要修改下代码和代码位置,就能实现友情链接全站横向显示,具体修改步骤如下:

1、在底部模版(footer.php)适当的位置加上如下代码:

<!--links-->
<div class="links_title">
<h2><font color="#990000">友情</font>链接:</h2>
</div>
<p><div class="links_info">
<ul><?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&show_images=0'); ?></ul>
</div></p>
<!--end links-->

2、在样式表 (style.css)适当的位置加上如下代码:

/* links */
.links_title {
float: left;
width:1000px;
margin:0 10px;
}
.links_info {
padding: 5px;
}
.links_info ul {
list-style: none;
}
.links_info ul li {
float: left;
margin: 0 0 0 8px;
}

Ps:以上内容需要对代码进行修改,才能在不同主题显示不同的效果,修改代码需要一定的代码基础,否则是修改不出你想要的效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注