为WordPress创建自定义个性化链接页面

发表于 作者
更新于
浏览 4,510 次
4

前些日子从荣斌（链接已失效）的友情链接页面看到他给每个链接前面都挂上了一个图片。那些图片是用程序从网站图标生成的，挺有个性。后来我查了查，发现Google有程序也可以实现类似的功能。有人说Google那个程序不稳定、不全面，但是我注意到Google自己就在用这样的功能，我想也不至于太差吧，就决定用Google的了。

似乎荣斌为了让网站看起来更整洁已经将他的友情链接页面给去掉了，不能让大家看看效果了。只记得他当时提到了 getFavicon 这么个事情，不过我忘记他说的是从哪里学来的了。因为我用的是另一个方法，就不对这个多做介绍了，有兴趣的话可以看看这里（链接已失效），似乎是 getFavicon 的发源地。

下面是我使用Google提供的将网站图标转化为图片的功能，创建的链接页面的完整过程和方法。

内容目录：

  1. 构思简介
  2. 准备单独的页面模板
  3. 添加产生链接的代码
  4. 后记
  5. 更新

一、构思简介

先说说我的思路，做个整体介绍。

大家看到的我的“站外资源”页面包括3个部分，上面2个部分 Blogroll 和 Resources是 调用WordPress内建的链接管理（遗憾的是WordPress Codex上只有英文的介绍，国人似乎不大喜欢参与这种开源创作，也许是使用“免费”软件养成的习惯）内容，后面的Others部分是直接通过编辑页面（像编写普通文章一样）手工添加的已全部改为直接调用 wp_list_bookmarks() 显示 WordPress 内建的链接数据库。

这样设计的好处是，你可以通过WordPress链接管理单元来创建和管理你的友情链接，当你不想使用这样的单独页面而是通过小工具放到动态边栏的时候能够很方便的切换而不需要太多的劳动；还可以通过编辑该页面来单独列出一些其它内容，这部分内容可能会随时更换，或者是比较复杂而不方便放到链接管理里头。

二、准备单独的页面模板

既然需要创建特色内容，页面模板自然需要自己创建，好在这一步很简单。Codex 上说默认主题里有 links.php 模板，但是我的主题里没有。不过没关系，我们可以从默认的 page.php 来创建一个。这里以当前的 WordPress 默认主题 TwentyTen 来举例说明。

1、创建一个新的 page 模板

将你所使用的主题的文件夹里的 page.php 复制一份，将其文件名修改为 links.php。

2、修改新模板页头信息。

使用文本编辑软件（推荐使用 Notepad++）打开 links.php，将前面几行类似于下面的代码：

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.

修改为：

<?php
/**
* Template Name: links

其它内容暂时不要动。保存！

注意，不同主题的模板，其编写方法不一样，所以不能通用；也就是说，如果你要换主题，就可能需要按照这样的方法重新创建一个用于友情链接的页面模板。

三、添加产生链接列表的代码

现在，我们给这个模板里添加代码，目的是从数据库中读取链接信息，并将其显示出来。

1、编辑刚才保存的 links.php 文件

定位到下面的位置：

<div id="content" role="main">

/*我们需要在这里插入本文后面提供的代码*/

<?php
/* Run the loop to output the page.
 * If you want to overload this in a child theme then include a file
 * called loop-page.php and that will be used instead.
 */
 get_template_part( 'loop', 'page' );
 ?>

这样的话我们就可以在保留原来的页面内容的同时，在页面内容的前面插入显示友情链接。如果不想保留原来的静态页面的内容，将上面的代码段中标记为绿色的部分删除即可。

2、对页面进行修整。

TwentyTen 这个主题还比较变态，一个page模板居然还分成了2个文件。将主循环单独放到了 loop-page.php 文件里，然后在 page.php 里调用这个主循环（上面代码中绿色部分就是完成这个功能的）。

这样刚好，方便我们看清楚页面文件的结构。为了简单起见，我们在这里对这一部分进行修整。分两种情况：

  1. 如果你不需要像我这样在后面手动添加一些乱七八糟的链接（即 Others 部分），你直接删除标记为绿色的那一部分；
  2. 如果要保留，需要进行一些改变。比如，你可能不想在页面中保留页面标题吧？还有评论和pingback，还想要吗？如果想保留，那就可以忽略这一步，直接跳到下面的 3 。否则就请按照下面的方法操作：
    1. 使用与 page.php 在同一文件夹下的 loop-page.php 里的代码替换上面标记为绿色的部分；
    2. 将其中部分代码删除： 
      <?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>

      以及，

      <?php comments_template( '', true ); ?>

      前一部分是显示页面标题的，后一部分是显示评论等的。

注，如果使用其它的主题，方法与此类似。可能一般的主题都不会把主循环单独拿出来，所以只要按照 2.B 进行操作就可以了。

3、植入代码

将下面的代码插入到橘红色文字标记的位置，该代码包含了样式、javascript 代码、执行语句等。

<!-- Resources page links lists START -->
<style type="text/css"> <!--
/* 设置显示样式 link-list class */
/* Resources page link-list class
----------------------------------- */
.link-list ul {
    list-style:none
}
.link-list li {
    padding: 5px;
    margin: 0 5% 0 0;
    float: left; /* 这两行控制分两列显示 */
    width: 40%;
}
.link-list li:hover {
    background: #EFEFEF /* 鼠标悬停时的背景色 */
}
--> </style>

// 输出负责显示链接对应网站 Favicon 的代码
<?php wp_print_scripts('jquery'); ?>
<script type="text/javascript"> jQuery(document).ready(function($){   $(".resources-links a").each(function(e){ $(this).prepend("<img src=https://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=vertical-align:middle;width:14px;height:14px;padding-right:5px;>"); });   });</script>

// 这一部分是设置 wp_list_bookmarks 的参数
// 如果在 WordPress 中的链接管理里面设置了多个分类，每个分类
// 都将以一个 div 单独包围起来
<?php $args = array(
    'categorize' => 1, // 是否分类别显示链接表
    'category' => null, // (string) Comma separated list of numeric Category IDs to be displayed. If none is specified, all Categories with bookmarks are shown. Defaults to (all Categories).
    'exclude_category' => null, // (string) Comma separated list of numeric Category IDs to be excluded from display. Defaults to (no categories excluded).
    'category_name' => null, // (string) The name of a Category whose bookmarks will be displayed. If none is specified, all Categories with bookmarks are shown. Defaults to (all Categories).
    'category_before' => '<div class="link-list">', // 分类别显示时，分类名称前置代码
    'category_after' => '</div>',
    'class' => '', // (string) The class each category li will have on it. Defaults to 'linkcat' . (This parameter was added with Version 2.2)
    'category_orderby' => 'id', // (string) Value to sort Categories on. Valid options:'name' - Default; 'id'; 'slug'; 'count'; 'term_group' (not used yet)
    'category_order' => 'ASC', // (string) Sort order, ascending or descending for the category_orderby parameter. Valid values: ASC - Default; DESC

// When categorize set to 0, the following 3 params become active
    'title_li' => null, // (string) Text for the heading of the links list. Defaults to '__('Bookmarks')', which displays "Bookmarks" (the __('') is used for localization purposes). Only used when categorize are set to 0 [false] (else the category names will be used instead). If 'title_li' is set to null (0) value, no heading is displayed, and the list will not be wrapped with <ul>, </ul> tags (be sure to pass the categorize option to 0 [false] to this option takes effect).
    'title_before' => '<h2>', // (string) Text to place before each Category description if 'categorize' is 1 [true], or text defined in "title_li" if 'categorize' is 0 [false]. Defaults to '<h2>'.
    'title_after' => '</h2>', // (string) Text to place after each Category description if 'categorize' is 1 [true], or text defined in "title_li" if 'categorize' is 0 [false]. Defaults to '</h2>'.
// Overall sets for individual bookmark
    'show_private' => '', // (boolean) Should a Category be displayed even if the Category is considered private. Ignore the admin setting and show private Categories (TRUE) or do NOT show private Categories (FALSE). 1 (True); 0 (False) - Default
    'include' => null, // (string) Comma separated list of numeric bookmark IDs to include in the output. For example, 'include=1,3,6' means to return or echo bookmark IDs 1, 3, and 6. If the include string is used, the category, category_name, and exclude parameters are ignored. Defaults to (all Bookmarks).
    'exclude' => null, // (string) Comma separated list of numeric bookmark IDs to exclude. For example, 'exclude=4,12' means that bookmark IDs 4 and 12 will NOT be returned or echoed. Defaults to (exclude nothing).
// Per category
    'orderby' => '', // (string) Value to sort bookmarks on. This can be a COMMA separated list of values. Defaults to 'name' unless you pass the value of '' (empty), in which case it sets to 'id'.
    'order' => 'DESC', // (string) Bookmarks display sorting order, ascending or descending as defined in the 'orderby' parameter. Valid values: ASC - Default; DESC
// Overall
    'limit' => -1, // (integer) Maximum number of bookmarks to display. Default is -1 (all bookmarks).
// Overall sets for individual bookmark
    'before' => '<li><dt>', //
    'after' => '</dd></li>', // (string) Text to place after each bookmark. Defaults to '</li>'.
    'link_before' => '', // (string) Text to place before the text of each bookmark, inside the hyperlink code. There is no set default. (This parameter was added with Version 2.7)
    'link_after' => '', // (string) Text to place after the text of each bookmark. There is no set default. (This parameter was added with Version 2.7)
    'between' => '</dt><dd>', // (string) Text to place between each bookmark/image and its description. Defaults to '\n' (newline).
    'show_images' => 0, // (boolean) Should images for bookmarks be shown (TRUE) or not (FALSE). 1 (True) - Default; 0 (False)
    'show_description' => 1, // (boolean) Should the description be displayed (TRUE) or not (FALSE). Valid when show_images is FALSE, or an image is not defined. 1 (True); 0 (False) - Default
    'show_name' => 0, // (boolean) Displays the text of a link when (TRUE). Works when show_images is TRUE. (This parameter was added with Version 2.7) 1 (True); 0 (False) - Default
    'show_rating' => 0, // (boolean) Should rating stars/characters be displayed (TRUE) or not (FALSE). 1 (True); 0 (False) - Default
    'show_updated' => 0, // (boolean) Should the last updated timestamp be displayed (TRUE) or not (FALSE). Note that link_updated does not track local modifications. It tracks when whatever the link points to is updated via remote requests to pingomatic. 1 (True); 0 (False) - Default
    'hide_invisible' => 1, // (boolean) Should bookmark be displayed even if it's Visible setting is No. Abides by admin setting (TRUE) or does no abide by admin setting (FALSE). 1 (True) - Default; 0 (False)
    'echo' => 1, // (boolean) Display bookmarks (TRUE) or return them for use by PHP (FALSE). 1 (True) - Default; 0 (False)
);
?>

<div class="entry-content">
    <?php wp_list_bookmarks( $args ); ?>
</div>
<br style="clear:both" />
<!-- Resources page links lists END -->

说明：

a、该代码采用了 WordPress 2.1.0 版中开始引入的 wp_list_bookmarks() 函数来从数据库中查询并显示链接。

b、链接管理中如果建立了多个分类，如 Blogroll 和 Resources，则每个分类都用分类名称做为该部分的标题，并使用 <h2></h2> 包裹。

c、对于 Google 服务的调用采用了 https 加密链接形式，是为了防止遇到被和谐的网站而导致获取图标进程被中断。

四、后记

这种东西还真不容易说清楚，如果有什么问题请留言。请一定先仔细研究然后再提问题。

五、更新

2013.05.23

修改了大部分内容，特别是修改了代码。现在使用一个统一的 wp_list_bookmarks() 参数，而且只调用一次 wp_list_bookmarks() 函数。利用 wp_list_bookmarks() 内在的分类功能按照链接分类显示成几个区块（<div>）。

现在的代码简洁多了。之所以看着挺庞大的，是因为在 wp_list_bookmarks() 的参数定义中将其所有参数都列出来了。可以按照需要修改。几乎每个参数后面都有说明。

2013.04.10

因为有的主题可能不会默认调用 jQuery 代码，所以对上面的代码（二、3 节所述）进行修订，在

<script type="text/javascript">

前面增加 WordPress 调用输出 jquery 的代码（蓝色标记）：

<?php wp_print_scripts('jquery'); ?>

©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/build-customized-links-page-in-wordpress/>。转载请保留此信息及相应链接。

相关文章

4 条关于 “为WordPress创建自定义个性化链接页面” 的评论

  3. 引用通告： 优化WordPress中JavaScript加载位置 « 水景一页

雁过留声，人过留名

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

特别提示：与当前文章主题无关的讨论或相关但需要较多讨论或求助信息请发布到水景一页讨论区的相应版块，谢谢您的理解与合作！请参考本站互助指南。
您可以在评论中使用如下的 HTML 标记来辅助表达： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>