WordPress 添加友情链接页面 & 样式参考

Kevin's 的“友情链接”模块 / 页面已经丢失几年了，主要是因为现下的友链既无法联络感情又无法释放 SEO 的功能性，且有更高效的方案去实现博友互访。所以，既然 WordPress 官方都把这个模块砍了，我也就一直没弄。

在此，我非常郑重地感谢那些在此前一直保留我链接的博主们，谢谢！正好最近在折腾博客，完善功能，我就又把这个功能折腾起来并完善了页面，您各位瞧瞧：友情链接页面。其中我已尽量将自己记得的博客添加进来，但难免有疏漏忘记的，还请海涵！看到的话请在留言板提示一下。此外还有一些我常去的页面也罗列在此，排名均不分先后。另外如果你觉得本站还算有趣，也可以与我交换链接。

制作该友链页面的步骤大概分为三步，首先是把 WordPress 隐藏的友链恢复，然后是把友链信息从数据库中抓取并输出，最后是对输出的信息做一个个性化的展示。因为本人并不擅长（可以说是不会）搞代码，所以这里边大量借用了 AI 的技术，嘿嘿。

WordPress 从后台默认取消“友情链接”模块的原因主要是为了简化系统。早期版本的 WordPress 默认包含了“友情链接”模块（Links Manager），让用户可以方便地在博客中添加外部链接。但随着版本的更新，WordPress 团队逐渐将其归为“较少使用”的功能，于是在 3.5 版本之后默认隐藏了这一模块。如果需要再次启用“友情链接”模块，可以通过以下方法实现：

1. 安装插件：可以使用“Link Manager”插件。该插件专为恢复此功能设计，安装并激活后会在后台显示“链接”菜单项。
2. 添加代码：也可以在主题的 functions.php 文件中添加以下代码来启用：

// 恢复 WordPress 后台友情链接菜单
add_filter('pre_option_link_manager_enabled', '__return_true');

添加后，WordPress 链接模块就会重新显示在后台菜单中。它是用于管理网站友情链接的工具，包含核心参数如链接名称（link_name）、链接地址（link_url）和链接描述（link_description）。此外，链接模块还支持自定义链接图像（link_image），用于展示链接的图标或头像。

链接模块的其他参数包括分类（link_category）和备注（link_notes）。通过分类，用户可以方便地分组管理不同类型的链接；备注字段则允许站长添加附加信息，例如邮箱地址或其他说明。这些参数赋予了 WordPress 链接模块灵活的设置和功能，不仅便于站长管理简单的链接，还能提供丰富的链接信息展示。

一般的，咱个人博客输出友情链接无非就是名称、链接、头像和说明了，我在给 Kevin's Space 制作友链页面的时候也只考虑了这几个参数。该页面的核心功能代码如下：

// 从数据库中提取友链信息输出到页面
function display_links_with_avatar() {
    $output = '';

    // 获取所有链接
    $links = get_bookmarks(array(
        'orderby' => 'name',
        'order' => 'ASC',
    ));

    if ($links) {
        $output .= '<div class="custom-links">';
        foreach ($links as $link) {
            // 从链接的高级部分获取图片地址
            $avatar_url = $link->link_image ? $link->link_image : ''; // 链接的图片地址
            // 如果没有图片地址，则从备注中获取邮箱地址并生成 Gravatar URL
            if (empty($avatar_url) && !empty($link->link_notes)) {
                $email = sanitize_email($link->link_notes); // 从备注中获取邮箱并进行清理
                $avatar_url = get_avatar_url($email, ['size' => 32]); // 根据邮箱生成 Gravatar URL
            }
            // 使用图片地址生成头像 HTML，并使头像可点击
            $avatar = $avatar_url 
                ? '<a href="' . esc_url($link->link_url) . '" target="_blank"><img src="' . esc_url($avatar_url) . '" alt="' . esc_attr($link->link_name) . '" width="32" height="32" /></a>'
                : '<a href="' . esc_url($link->link_url) . '" target="_blank">' . get_avatar('', 32) . '</a>'; // 使用默认头像

            $output .= '<div class="link-item">';
            $output .= '<div class="link-avatar">' . $avatar . '</div>';
            $output .= '<div class="link-info">';
            $output .= '<a href="' . esc_url($link->link_url) . '" target="_blank" class="link-name">' . esc_html($link->link_name) . '</a>';
            if (!empty($link->link_description)) {
                $output .= '<p class="link-description">' . esc_html($link->link_description) . '</p>'; // 输出描述
            }
            $output .= '</div>';
            $output .= '</div>';
        }
        $output .= '</div>';
    } else {
        $output .= '<p>没有找到友情链接。</p>';
    }

    return $output;
}
add_shortcode('display_links', 'display_links_with_avatar');

本例中display_links_with_avatar() 是一个用于在页面中显示友情链接的 WordPress 函数。它通过 get_bookmarks() 获取所有友情链接，并循环输出每个链接的头像、名称和描述等信息。其中头像显示的逻辑为：优先使用“高级”部分的图片地址作为头像；如果图片地址为空，则检查备注中的邮箱地址，并通过 Gravatar 获取对应头像；若邮箱地址为空，则显示 WordPress 后台设置的默认头像。

最后就是链接页面的美化了…该页面我使用了 WPBakery 插件构建了一个简单的模板，然后将以下 CSS 以 Rawhtml 模块插入了进去。以下 CSS 样式表以表格样式显示链接，每行显示三个链接，并根据链接的设置灵活显示头像、名称和描述。您各位觉得怎样？可以在留言板中提一提美化建议，感恩(´ᴗ`ʃƪ)

.custom-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.link-item {
    display: flex;
    padding: 10px 0;
    align-items: center;
    border-bottom: 1px solid #ccc; /* 每行链接之间用下边框分隔 */
}

.link-avatar {
    flex: 0 0 auto;
    margin-right: 10px;
}

.link-avatar img {
    border-radius: 5px;
    width: 50px;
    height: 50px;
}

.link-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.link-name {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #333;
    text-decoration: none;
}

.link-name:hover {
    text-decoration: underline;
}

.link-description {
    font-size: 0.8em;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 限制显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* 添加鼠标悬停提示 */
.link-description[title] {
    cursor: pointer;
}