折腾:WordPress 友情链接页面

使用Micro-M主题有些天了,发现这主题居然木有“友情链接”页面。

首页友链加起来差不多有30个了,首页太多友链。影响美观啊。所以决定折腾WordPress友情链接页面.

方法Copy网上的。太多太多此类教程了。

以下为转载内容:

首先来说新建一个友情链接的页面,一开始觉得很多网站这样蛮好的,因为出来可以放链接之外还可以放些自己的收藏。但是可惜的是wordpress做起来还蛮麻烦的,要做模板。幸亏这些东西网上很多,直接copy过来也ok。可惜的是我的主题有点特别,然后试了好多次才弄好的。

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

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



再找到如下代码:

 

修改为:

category_orderby=id&before=

  • &after=

&show_images=0&
show_description=1&orderby=name&title_before=

&title_after=

‘); ?>

 

对于我的主题,因为加上category=XX,YY,ZZ后总是显示不出来,估计是没把XX,YY,ZZ换成ID的缘故

&title_after=

‘); ?>

 

参数解释:
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.php,将其上传到主题文件夹的目录下。最后新建一个页面,并在右侧的页面模块中选择刚刚新建的“Links Page Template PAGE”。

二、给友链加 CSS 美化

在 style.css 中加入以下CSS,当然也可以根据个人喜好自己DIY。这里是copy万戈的

.linkpage ul {padding: 5px 6px;list-style-type: none;overflow:auto}
* html .linkpage ul{ height:1%;}
.linkpage ul li {color: #333;margin-bottom: 5px;font-size: 12px;}
.linkpage ul li ul li {float: left;width: 141px;text-align: center;margin: 3px 3px;line-height: 180%;background-color: #FFFFFF;border: 1px solid #dadada;}
.linkpage ul li ul li a {color: gray;display: block;}
.linkpage ul li ul li a:hover {background-color: gray;color: #FFFFFF;font-weight:bold;}

要注意的是这里的linkpage就是你上面对应的定义的div的名称。这样对应了才ok

三、JQ 完善 WordPress 友链的 Favicon

效果就是为了实现为了友情链接页面中带 favicon 小图标的友情链接,图标调用的是Google的,有些小朋友或者童鞋,就一个蓝色的小球球,杯具……是GG的服务器上没有你站点的缓存,我也米办法。

方法如下:

1、加载 JQuery 库这个是所有 JQuery 运行所必须的,你可以调用 google 托管的,也可以下载到自己的主机上调用,可取所需了。

2、载入 JQuery 执行代码

$(".linkpage a").each(function(e){
$(this).prepend("折腾:Wordpress 友情链接页面");
});

所以如果你想放到一个单独的地方的话就可以



就可以了。这里还要说的一下就是这里的linkpage也是要和上面的对应的定义的div对应的。
到此,一个可以实现显示带有Favicon图标的友情链接页面就ok了。。。
还有可以实现的就是首页随机显示友情链接和双栏显示。这个我还在找合适的代码。。。如果知道的方便教下。

PS:Yusky的友情链接页面加网站的小图标老是加不上去。JQ也加载了。神马都试过了。就是不行。还在折腾中。
>PS2:现在Yusky的友链大部分都移至友情链接页面去了。首页太多看着不爽,如果不喜欢做内页友链,可以联系我取消友链

主题测试文章,只做测试使用。发布者:Yusky,转转请注明出处:https://yusky.me/toss-wordpress-links-page.html

(0)
Yusky的头像Yusky
上一篇 2011 年 8 月 16 日
下一篇 2011 年 8 月 20 日

相关推荐

  • WordPress 3.6 “奥斯卡” 正式版下载

    哈。早上进后台看了下,果断更新了啊 立马备份数据,升级到最新版。嘿嘿嘿   新的21 13个主题灵感来自现代艺术将专注于内容丰富多彩,单柱设计,为富媒体博客。 全新改节省每一个变化和新的界面,让您轻松地滚动通过改变看线,由线谁和什么时候改变。 邮政锁定和增强自动转存的网站超过一个作者的工作后,尤其是一个福音。现在每个作者都有其自己的自动保存流,存储…

    Wordpress 2013 年 8 月 2 日
    8.9K160
  • 为WordPress增加“转载自”字段

    写博客免不了有一些转载的东西。因此我起手修改现在正在使用的主题的时候,就通过自定义字段完成了在文章头部杂项部位添加一个“转载自”的项。但是这个功能一直没有使用过,直到现在才拿出来展示一下。 如图所示: 这个功能我使用了两个自定义字段:1.原作者,2.源地址。当这两个自定义字段为空时不显示“转载自”这一项,当“原作者”有内容的时候,就会显示出来。为此我给这两个…

    2011 年 8 月 13 日
    10.0K240
  • 为WordPress模版添加双击滚屏特效

    其实我们使用的操作系统早已提供了这一功能,那就鼠标中键(滚轮),使用起来远比这个按钮方便,不过鼠标中键貌似都不是很抗用,另外,也为点缀一下博客,弄个固定的滚屏按钮也不错。但是那个功能并不是所有的博客都适用,有的博客美观好可能存在一些问题,今天小孙介绍的这段代码就是不需要添加任何点缀,只需要添加一小段JS代码,即可实现双机页面中的任何位置即可出现滚屏效果,点击…

    Wordpress 2011 年 7 月 20 日
    8.7K180
  • WordPress加速之减少数据库查询

    Yusky折腾很久没折腾上去.失败。明天继续折腾。 童鞋们有木有看到分类旁边多了一个“转载自”   减少数据库查询次数在某些情况下会加速wordpress的反映速度,特别是加载页面的时候. 为什么这里说是在某些情况下呢? 因为某些主机的数据库是单独分离出来的,并不是和主机空间在一起的. 所以会存在访问数据库的速度和访问主机空间的速度存在差异. 像那…

    2011 年 8 月 13 日
    8.1K110
  • 知蚁博客站长助手V1.2版强势推出!

    嘿嘿。从流氓兔足迹的博客看到的,第一时间下载来体验了一番,挺不错的。 继上一个版本知蚁站长助手V1.1的发布已经快一个月的时间了,这个版本的更新有点慢了,不过好在1.2版本的功能要比1.1版本的功能要强大的多,尤其是在检测博客最新文章的速度方面。

    2011 年 8 月 27 日
    13.2K250

回复 张海华

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

评论列表(28条)

  • Ryan的头像
    Ryan 2014 年 2 月 11 日 下午 10:22

    求分享!谢谢。我的友链页面丑死了

    • Yu Sky的头像
      Yusky 2014 年 2 月 17 日 下午 3:40

      @Ryan你好,已发你邮件

  • 朱定聪的头像
    朱定聪 2011 年 12 月 16 日 上午 2:03

    :?: 弄不好,不知道是哪个步骤出了问题,博主可以告知下QQ吗?

  • Yeunmin的头像
    Yeunmin 2011 年 10 月 2 日 下午 9:36

    .哈… :sx: :sx: 我也折腾去.; :gl:

    • Yusky的头像
      Yusky 2011 年 10 月 4 日 上午 2:52

      @Yeunmin额。发现的还木有折腾成功啊。哈哈

    • Yeunmin的头像
      Yeunmin 2011 年 10 月 6 日 上午 2:35

      @Yusky..不会折腾 :cry: :cry: :cry: 可以求你的文件么.

    • Yusky的头像
      Yusky 2011 年 10 月 6 日 上午 11:45

      @Yeunmin@Yeunmin 额。我现在在外面。 我回去之后发给你咯。 其实也不难的

  • 大鲨鱼的头像
    大鲨鱼 2011 年 8 月 30 日 下午 9:14

    我在 page.php里找不到


    把你休改过的文件发给我研究下吧我像你的链接页面已样有框框
    我的邮箱
    [email protected] 谢谢啦

    • Yusky的头像
      Yusky 2011 年 8 月 31 日 上午 3:33

      @大鲨鱼嘿嘿。我估计你那CSS是不是木有加进去啊? 那个框框是靠CSS控制的·。 已发送至你的邮箱。

    • 大鲨鱼的头像
      大鲨鱼 2011 年 8 月 31 日 下午 12:25

      @Yusky:twisted: ni 直接把你修改过的文件发发过来 :cry:

    • Yusky的头像
      Yusky 2011 年 9 月 2 日 上午 2:09

      @大鲨鱼已经发给到你邮箱了

    • 大鲨鱼的头像
      大鲨鱼 2011 年 9 月 2 日 下午 12:35

      @Yusky@Yusky :razz: 谢谢了

    • Yusky的头像
      Yusky 2011 年 9 月 2 日 下午 4:18

      @大鲨鱼嗯。不客气

    • 大鲨鱼的头像
      大鲨鱼 2011 年 9 月 2 日 下午 1:37

      @Yusky我好像没收到啊麻烦再发一遍好吗CCS :razz: 也发给我吧 :wink:

    • 大鲨鱼的头像
      大鲨鱼 2011 年 9 月 2 日 下午 1:47

      @大鲨鱼@大鲨鱼 :?: 我是要你修改过的文件啊 :cry: 你给我发的是没修改过的

    • Yusky的头像
      Yusky 2011 年 9 月 2 日 下午 4:19

      @大鲨鱼额,不好意思。确实发错了。 应该是发linkspage也个页面的。 晚上给你发咯

    • 大鲨鱼的头像
      大鲨鱼 2011 年 9 月 3 日 下午 3:55

      @Yusky@Yusky 貌似我还是失败了

    • Yusky的头像
      Yusky 2011 年 9 月 3 日 下午 4:41

      @大鲨鱼汗。你把CSS文件替换了,然后再把PAGE页面上传到MICR-M主题目录下,然后新建一个页面就OK了啊。 或者你加我Q咯。 6783138

    • Yusky的头像
      Yusky 2011 年 9 月 2 日 下午 4:18

      @大鲨鱼好的。晚上回来重新发给你把

  • 小奇的头像
    小奇 2011 年 8 月 20 日 下午 11:04

    :lol: 折腾 —-生活之本 幸福之源

  • 言冬的头像
    言冬 2011 年 8 月 20 日 下午 10:52

    折腾万岁 :ymy:

    • Yusky的头像
      Yusky 2011 年 8 月 20 日 下午 11:45

      @言冬继续折腾。得把友情链接旁边的小图标折腾出来

  • 蓝飞Blue的头像
    蓝飞Blue 2011 年 8 月 20 日 上午 11:21

    继续折腾!!

    • Yusky的头像
      Yusky 2011 年 8 月 20 日 下午 11:45

      @蓝飞Blue每天都在不断的折腾

    • 雨帆的头像
      雨帆 2011 年 9 月 15 日 上午 5:21

      @Yusky好复杂的说哦~!学不会哦。最后直接将你的网站的友链的源码Copy过去了,(*^__^*) 嘻嘻……

  • 张海华的头像
    张海华 2011 年 8 月 20 日 上午 10:00

    我没看到你的友情链接有美化效果哟!!

    • Yusky的头像
      Yusky 2011 年 8 月 20 日 上午 10:18

      @张海华:kbz: 木有美化之前。是一排竖的。。。 也木有框框。
      还有个小图标。不会折腾。。。 :idea:

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:[email protected]

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
自6.2开始主题新增页头通知功能,购买用户可免费升级到最新版体验