首页 » 建站技术 » WordPress » 浏览内容

个性化 WordPress 友情链接页面


2010-08-24 00:38:45 4,034 2 发表评论 字体: 作者:C.K.
标签: WordPress友情链接备忘页面

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

要完成该个性化友链页面需要三步:1、新建页面用函数调用友链。2、给友链加 CSS 美化。3、给友情链接添个 Favicon 美化美化。下面是分解步骤:

  一、新建页面用函数调用友链

  新建一个页面模板,打开所用主题的 page.php 文件,在文件最顶端加上以下声明代码:

<?php
  • /*
  • Template Name: Links Page Template PAGE
  • */
  • ?>
  •   再找到如下代码:

    <div class="entry">
  •     <?php the_content(); ?>
  • </div><!--/entry -->
  •   修改为:

    <div class="linkpage">
  • <ul>
  • <?php wp_list_bookmarks('categorize=1&category_orderby=id&before=<li>&after=</li>&show_images=0&show_description=1&orderby=name&title_before=<h3>&title_after=</h3>'); ?>
  • </ul>
  • </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”。

      用wp_list_bookmarks()函数调用友链的方法转载自http://zeuscn.net/archives/2008/03/28/easily-create-a-link-page.html

      二、给友链加 CSS 美化

      在 style.css 中加入以下CSS,当然也可以根据个人喜好自己DIY。

    /*---------------------Links Page-----------------------*/
  • .linkpage h3 {
  • line-height:20px;
  • }
  • .linkpage ul {
  • list-style-type:none;
  • margin:0;
  • overflow:auto;
  • padding:0 6px;
  • }
  • .linkpage img {
  • float:left;
  • height:16px;
  • padding:3px 0 3px 3px;
  • width:16px;
  • }
  • * html .linkpage ul {height:1%;}
  • .linkpage ul li {
  • color: #333;
  • margin-bottom: 5px;
  • font-size: 12px;
  • }
  • .linkpage ul li ul li {
  • float: left;
  • width: 148px;
  • text-align: left;
  • margin: 3px 3px;
  • line-height: 180%;
  • background-color: #FFFFFF;
  • border: 1px solid #dadada;
  • }
  • .linkpage ul li ul li a {
  • text-decoration: none;
  • color: gray;
  • display: block;
  • }
  • .linkpage ul li ul li a:hover {
  • background-color: gray;
  • color: #FFFFFF;
  • font-weight:bold;
  • }
  • /*---------------------Links Page-----------------------*/
  • 3、给友情链接添个 Favicon 美化美化

    图标调用的是Google的,有些小朋友或者童鞋,就一个蓝色的小球球,杯具……是GG的服务器上没有你站点的缓存,我也米办法。

    <script type="text/javascript">
  • jQuery(document).ready(function($){
  •  
  • $(".linkpage a").each(function(e){
  •     $(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");
  • });
  •  
  • });
  • </script>
  • 上面啥代码,放哪?就放在刚刚建立的模板最后。是jQuery,也就JS,不提醒也要知道必须要加载jQuery库才有用,放页首或者页尾都行,但需先加载jQuery库。

    具体含义就是:命令jQuery游历所有class=“linkp”(需修改!)下的a标签,然后在相对应a标签内添加img,src是GG服务器加对应a标签内的href主网址,并添加样式左浮动填充5px。
    参考:
    http://wange.im/diy-wordpress-links-page.html
    http://immmmm.com/friend-links-add-favicon.html

    另一个获取favicon图标的办法,也就是今天所要说的:GetfaviconAPI

    GetfaviconAPI的地址是:http://getfavicon.appspot.com/

    它获取favicon图标的地址是形如http://getfavicon.appspot.com/http://www.aaa.com
    这样就简单了一些,只需要将原来的代码稍作修改便可以了。

    <script type="text/javascript">
  • jQuery(document).ready(function($){
  • $(".link_main .blogroll a").each(function(e){
  • $(this).prepend("<img src=http://getfavicon.appspot.com/"
  • +this.href.replace(/^(http://[^/]+).*$/,'$1')+" style=border:none;float:left;padding:5px;>")})
  • });
  • });
  • </script>
  • 这样只要有favicon图标的网址,基本都可以获取到了,没有获取到的还是如以前那样,显示为蓝色小地球 。如果获取的图标过大,可以用css控制一下大小。

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5062 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14144372 位访客

    广告区 Guǎng Gào