子比主题友情链接 HTML 代码 2 列卡片式适配 GO 跳转

教程开始

添加位置：在 WordPress 后台 → 外观 → 小工具，添加「自定义 HTML」模块到侧边栏或页脚，粘贴上述代码即可。
修改内容：将每个链接中的 href（网址）、src（Logo 图片地址）、网站名称和介绍文字替换成你的友链信息。
主题色适配：代码中使用了 var(--theme-color) 自动继承子比主题的主色调，无需手动修改。
Logo 建议：尺寸建议 96×96px 正方形，加载更快且显示清晰。

这一款的话是点击直接跳转，如果要走主题的go跳转的话可以看一下最下面的这个，两个代码的样式都是一样的，看个人喜欢吧。

此处内容已隐藏，请评论后刷新页面查看.

布局特点

PC 端 4 列、平板 3 列、手机 2 列 / 1 列，完全响应式
左侧 48px 固定尺寸 Logo，右侧文字自适应
网站名称加粗置顶，介绍文字两行自动省略
悬停时卡片上浮 + 边框变色，与子比主题交互风格统一

第二款

因为WordPress 古腾堡编辑器的常见机制问题

把<style>样式直接写在页面的「自定义 HTML」区块里，会被 WordPress 的自动格式化函数（wpautop）拆分、插入多余的<p>标签，导致 CSS 语法彻底失效，样式完全不生效

正确做法

CSS 和 HTML 分离：样式放到主题全局 CSS 里，页面只放纯 HTML 结构。这是 WordPress 官方推荐的标准方式，也完美适配子比主题。

第一步：先添加全局 CSS 样式

进入 WordPress 后台 → 外观 → 自定义 → 额外 CSS
把下面这段 CSS 完整复制进去，点击「发布」保存

/* 友情链接卡片容器 */
.zib-links-page {
    margin: 20px 0;
}
.zib-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 核心：固定一排2个 */
    gap: 15px;
}
.zib-link-card {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    color: inherit;
    box-shadow: none;
}
.zib-link-card:hover {
    border-color: var(--theme-color, #409eff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    color: inherit;
}
.zib-link-logo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 12px;
    background: #f5f5f5;
    border: none;
}
.zib-link-info {
    flex: 1;
    min-width: 0;
}
.zib-link-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zib-link-desc {
    font-size: 12px;
    line-height: 1.4;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 响应式：手机端自动变成1列，避免文字挤压 */
@media (max-width: 640px) {
    .zib-links-grid { 
        grid-template-columns: 1fr; 
    }
}