wordpress中如何创建个性化的友情链接页面 -wordpress教程

吾爱互联

                                <b>[文章目录]</b>
                                <ul id="index-ul">
<li>一、新建页面用函数调用友链</li>
<li>二、给友链加 CSS 美化</li>
</ul>
                        </div>
同学们大家好，今天<span style="color: #ff0000; font-size: 14pt;"><span style="color: #ff0000;"><strong>吾爱互联</strong></span></span>将与大家分享如何创建个性化的友情链接页面
如何建立一个个性化的 WordPress 的友情链接页面，效果可以见友情链接资源导航页面。要完成该个性化友链页面需要两步：1、新建页面用函数调用
友链。2、给友链加 CSS 美化。下面是分解步骤：
<h2 id="title-0">一、新建页面用函数调用友链
新建一个页面模板，打开所用主题的 page.php 文件，在文件最顶端加上以下声明代码：
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><?php</li>
<li><span class="comment">/*</span></li>
<li class="alt"><span class="comment">Template Name: Links Page Template PAGE</span></li>
<li><span class="comment">*/</span></li>
<li class="alt">?></li>
</ol>
</div>
再找到如下代码：
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><div <span class="keyword">class</span>=“entry”></li>
<li><?php the_content(); ?></li>
<li class="alt"></div><!–/entry –></li>
</ol>
</div>
修改为：
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><div <span class="keyword">class</span>=“entry”></li>
<li><?php wp_list_bookmarks(‘categorize=1&amp;category=XX,YY,ZZ&amp;</li>
<li class="alt">category_orderby=id&amp;before=<li>&amp;after=</li>&amp;show_images=0&amp;</li>
<li>show_description=1&amp;orderby=name&amp;title_before=<h3>&amp;title_after=</h3>’); ?></li>
<li class="alt"></div><!–/entry –></li>
</ol>
</div>
参数解释：
categorize=1 — 显示所有 Blogroll 的分类；
category=XX,YY,ZZ — 指定显示 ID 为 XX YY ZZ 的 Blogroll 分类，如果您的 Blogroll 没有一个总的大分类话，这个参数可以去掉，因为上一个
参数已经指定了显示所有分类；
category_orderby=id — 分类按照 ID 号进行排列，假如 XX>ZZ>YY 那么最终显示的顺序就是：XX 分类下的链接、ZZ 分类下的链接、YY 分类下的链
接；
before 和 after — 每个连接前后都用 li 标签套起来；
show_images=0 — 不显示链接的图片；
show_description=1 — 显示连接的描述；
orderby=name — Blogroll 的链接根据其名称排序；
title_before 和 title_after — 分类标题前后用 h3 标签套起来（这个因站而异）。
修改好代码之后将该文件另存为一个 php 文件，比如：link_temp.php，将其上传到主题文件夹的目录下。最后新建一个页面，并在右侧的页面模块中
选择刚刚新建的“Links Page Template PAGE”。
<h2 id="title-1">二、给友链加 CSS 美化
在 style.css 中加入以下CSS，当然也可以根据个人喜好自己DIY。
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="comment">/*———————Links Page———————–*/</span></li>
<li></li>
<li class="alt">#mainlink {</li>
<li>clear: both;</li>
<li class="alt">margin: 0 40px;</li>
<li>width: 900px; <span class="comment">/* Prevents IE6 miscalculation */</span></li>
<li class="alt">background: #fff;</li>
<li>}</li>
<li class="alt">.linkpage ul {</li>
<li>padding: 5px 6px;</li>
<li class="alt">list-style-type: none;</li>
<li>overflow:auto</li>
<li class="alt">}</li>
<li>* html .linkpage ul{ height:1%;}</li>
<li class="alt">.linkpage ul li {</li>
<li>color: #333;</li>
<li class="alt">margin-bottom: 5px;</li>
<li>font-size: 12px;</li>
<li class="alt">}</li>
<li>.linkpage ul li ul li {</li>
<li class="alt">float: left;</li>
<li>width: 141px;</li>
<li class="alt">text-align: center;</li>
<li>margin: 3px 3px;</li>
<li class="alt">line-height: 180%;</li>
<li>background-color: #FFFFFF;</li>
<li class="alt">border: 1px solid #dadada;</li>
<li>}</li>
<li class="alt">.linkpage ul li ul li a {</li>
<li>color: gray;</li>
<li class="alt">display: block;</li>
<li>}</li>
<li class="alt">.linkpage ul li ul li a:hover {</li>
<li>background-color: gray;</li>
<li class="alt">color: #FFFFFF;</li>
<li>font-weight:bold;</li>
<li class="alt">}</li>
<li>.linkpost {</li>
<li class="alt">display:inline;</li>
<li>float:left;</li>
<li class="alt">margin:0 20px;</li>
<li>padding:0 5px;</li>
<li class="alt">width:920px;</li>
<li>}</li>
<li class="alt">#linkcontent {</li>
<li>margin-top:8px;</li>
<li class="alt">width:970px;</li>
<li>float:left;</li>
<li class="alt">}</li>
</ol>
</div>
写了一大堆，看似复杂，实则简单，因为我已经给出了需要的代码，剩下的事情只需要复制粘贴即可，赶快试试吧。