通过WordPress的自定义HTML添加友情链接

张承辉博客建立于2009年,期间有数年断更。最近重拾博客写作,网站也全新改版,从之前的zblog博客程序更换为Wordpress,卢松松博客模板也替换成现在的简洁大气付费模板了。
经过几天的努力,博客初期建设工作基本结束,唯一遗憾的是以前一款很好用的友情链接插件”Link Manager“已经停止更新。无奈只能自己写代码修改源文件来实现友情链接的功能。

通过WordPress的自定义HTML添加友情链接

WordPress中内置了一个“自定义HTML”的小工具,我们可以通过它来实现“友情链接”的功能。
操作步骤主要分成两部分:
分别是添加:HTML代码 和 css样式控制代码
HTML代码:添加友情链接的主体信息。
css代码:控制友情链接的显示样式和位置。
添加HTML代码
首先,先调出wordpress中的“自定义HTML”小工具,将其放置在合适的位置。
在“自定义HTML”里添加以下代码,并根据情况做一定的修改。

<ul style="padding: 12px 13px 10px 0px;" class="wailian">
	<li><a href="http://www.zhangchenghui.com/" target="_blank">张承辉博客</a></li>
	<li><a href="http://www.zhangchenghui.com/" target="_blank">网赚博客</a></li>
</ul>

以上的代码,只需要修改标签内容即可,一条标签表示一条“友情链接”。

(2)添加css样式控制代码
在网站主题的css控制样式文件中,追加以下代码。
wordpress站点的css样式控制文件一般为主题下的“style.css”文件,大家根据自己的情况修改即可。

/******* 友情链接 css 控制  ******/
.wailian li{ float:left}
.wailian li a {
    background: #FAFAFA;
    border: 1px solid #e9e9e9;
    display: block;
    text-align: center;
    margin-left: 15px;
    margin-bottom: 5px;
    padding: 0 4px;
    border-radius: 2px;
    width:120px;
    color: #5e5e5e;
    line-height: 30px;
    white-space:nowrap;
    overflow:hidden;
	}
.wailian li a:hover {
    color: #fff;
    background: #428BCA;
    }

至此,“友情链接”添加成功。(如果你觉得你的“友情链接”框体过大,或者出现错位的情况,那么只需要修改 以上css代码中的【width:120px;】参数即可!)

如若转载,请注明出处:http://www.zhangchenghui.com/87.html