Meteor主題友鏈頁面自研

發布于：Eucalyptus-Blog

Meteor主題雖然設計簡約現代，但由于缺乏原生的友情鏈接管理功能，許多博主只能將友情鏈接勉強添加在網站底部，這不僅影響頁面美觀，也不便于訪客查找和互動；為了解決這一痛點，本博主對主題進行了深度二次開發，專門打造了一個獨立的友情鏈接頁面，該頁面不僅實現了友鏈分類展示、圖文混排等基本功能，更創新性地開發了前端提交表單，允許其他站長直接在線提交申請，同時配套開發了完善的后臺審核系統，管理員可以便捷地查看申請信息、審核狀態，并一鍵通過或拒絕，整個流程實現了自動化閉環管理，大大提升了友鏈交換的效率和用戶體驗。

文件路徑：

下述文件需放至主題目錄下

page-link.php

下述文件需存放至主題目錄下的自建self-innovate目錄下

default-avatar.jpg
page-links.css
page-links.js
pending-links.php

以下是核心代碼部分，這段代碼實現了系統的關鍵功能，

并且這里對友鏈頭像有三個判斷的邏輯

有頭像 → 正常顯示；
無頭像 → 立即顯示默認頭像；
有頭像但 3 秒仍未加載完成 → 自動替換成默認頭像。

<?php
/** Template Name: 友情鏈接* Description:  極簡友鏈模板（樣式/腳本已分離，含評論）*/get_header(); 
?><div class="hero-title"><?php the_title( '<h1>', '</h1>' ); ?><p class="hero-sub">歡迎交換友鏈 · 攜手點亮彼此的星空</p>
</div><!-- 載入獨立樣式 -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/self-innovate/page-links.css"><div class="page-links"><!-- 搜索框 --><div class="link-search"><input type="text" id="link-search" placeholder="搜索站點名稱或描述…"></div><!-- 友鏈列表 --><?php$cats = get_terms( 'link_category', array( 'hide_empty' => 0 ) );foreach ( $cats as $cat ) :$bookmarks = get_bookmarks( array('category' => $cat->term_id,'orderby'  => 'rating','order'    => 'DESC') );if ( empty( $bookmarks ) ) continue;?><div class="link-cat"><h2><?php echo esc_html( $cat->name ); ?></h2><?php if ( ! empty( $cat->description ) ) : ?><p class="link-cat-desc"><?php echo esc_html( $cat->description ); ?></p><?php endif; ?><div class="links"><?php foreach ( $bookmarks as $link ) : ?><a class="link-card" href="<?php echo esc_url( $link->link_url ); ?>" target="_blank" rel="noopener"><imgsrc="<?php echo esc_url( $link->link_image ?: '' ); ?>"data-default="<?php echo esc_url( get_template_directory_uri() . '/self-innovate/default-avatar.jpg' ); ?>"alt="<?php echo esc_attr( $link->link_name ); ?>"onerror="this.src=this.dataset.default"onload="clearTimeout(this.t)"ontimeout="this.src=this.dataset.default"/><script>(function(img){img.t = setTimeout(function(){ img.src = img.dataset.default; }, 3000);})(document.currentScript.previousElementSibling);</script><div class="info"><div class="name"><?php echo esc_html( $link->link_name ); ?></div><div class="desc"><?php echo esc_html( $link->link_description ); ?></div></div></a><?php endforeach; ?></div></div><?php endforeach; ?><!-- 后臺內容顯示 --><?php if ( get_the_content() ) : ?><div class="link-intro" style="margin-bottom:30px;"><?php the_content(); ?></div><?php endif; ?><!-- 友鏈申請彈窗 --><div class="btn-center"><button id="open-link-modal" class="btn-hero"><span>申請交換友鏈</span></button></div><!-- ===== 評論區 ===== --><?php// while ( have_posts() ) : the_post();if ( comments_open() || get_comments_number() ) : ?><section class="link-comments"><h2 class="comments-title"></h2><?php comments_template(); ?></section><?phpendif;// endwhile;?><!-- 彈窗 --><div id="link-modal-overlay" class="modal-fade"><div class="modal-dialog"><button class="modal-close" aria-label="關閉">×</button><h3 class="modal-title">申請交換友鏈</h3><form id="link-form" class="modal-form"><input type="text"   name="link_name"        placeholder="網站名稱 *" required><input type="url"    name="link_url"         placeholder="網站地址 *" required><input type="email"  name="link_owner_email" placeholder="站長郵箱 *" required><input type="url"    name="link_image"       placeholder="頭像 / Logo *" required><textarea name="link_description" rows="3" placeholder="一句話描述 *" required></textarea><button type="submit" class="btn-submit">提交申請</button><p id="form-msg" class="form-msg"></p></form></div></div>
</div><!-- 載入獨立腳本 -->
<script>var ajax_comment_obj = <?php echo wp_json_encode(array('ajax_url' => admin_url('admin-ajax.php'))); ?>;
</script>
<script src="<?php echo get_template_directory_uri(); ?>/self-innovate/page-links.js" defer></script><?php get_footer(); ?>

下面是核心代碼的css樣式

/***  * page-links.css*   * 版本：1.0.0*    * 描述：友情鏈接頁面專用樣式*     * 作者：Eucalyptus*      * 創建日期：2025-08-30*       * 修改記錄：*        *   - 2025-08-30：首版，含友鏈卡片、搜索、彈窗*         *//* ========= 1. 頁面通用 ========= */
.page-links{max-width:960px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}/* ============ 頂部標題（跟隨深淺 + 移動端適配） ============ */
/* 友情鏈接橫幅 */
.hero-title{padding:3.5rem 1.5rem 2.5rem;border-radius:0 0 1.5rem 1.5rem;text-align:center;
}
.hero-title h1{font-size:2.2rem;font-weight:700;letter-spacing:.5px;position:relative;
}
.hero-title h1::after{content:'';display:block;width:60px;height:3px;background:#667eea;margin:8px auto 0;border-radius:2px;
}
.hero-sub{font-size:1rem;color:#666;margin-top:.75rem;
}/* ========= 玻璃態卡片 3.0 ========= */
.links{display:grid;grid-template-columns:repeat(3, 1fr); /* 固定 3 列 */gap:24px;
}.link-card{position:relative;padding:20px;background:transparent;                /* 跟隨深淺 */border:1px solid rgba(var(--color-border,0 0 0),.1);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.08);  /* 深淺通用陰影 */transition:.4s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;
}:root{--color-border: 0 0 0;       /* 深色模式 */
}
[data-theme="light"]{--color-border: 255 255 255; /* 淺色模式 */
}.link-card::before{                               /* 光澤漸變 */content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.3));pointer-events:none;
}.link-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 48px rgba(102,126,234,.25);
}/* 頭像 */
.link-card img{width:64px;height:64px;border-radius:50%;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.08);object-fit:cover;
}/* 文字區 */
.link-card .info{margin-left:16px;
}
.link-card .name{font-size:18px;font-weight:700;letter-spacing:.5px;margin-bottom:6px;
}
.link-card .desc{font-size:14px;color:#555;line-height:1.5;
}/* 右上角角標（純 CSS） */
.link-card{position: relative;           /* 為偽元素定位 */
}
.link-card::after{content: "友鏈";              /* 角標文字 */position: absolute;top: 8px;right: 8px;padding: 2px 6px;font-size: 11px;font-weight: 600;color: #fff;background: linear-gradient(135deg,#ea66d4,#ac5196);border-radius: 4px;opacity: 0;transition: opacity .3s;pointer-events: none;         /* 不影響點擊 */
}
.link-card:hover::after{opacity: 1;
}/* ===== 分類標題 3.0 ===== */
.link-cat{position:relative;margin-bottom:40px;
}
.link-cat h2{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;font-size:20px;margin-bottom: 15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 4px 12px rgba(102,126,234,.25);letter-spacing:.5px;
}/* 分類描述 */
.link-cat-desc{margin: -8px 0 24px 18px;   /* 負值貼緊標題，左側與標題文字對齊 */font-size: 0.9rem;color: #555;letter-spacing: .4px;line-height: 1.5;max-width: 540px;
}/* ========= 移動端適配 ========= */
@media (max-width: 768px) {.links {grid-template-columns: 1fr; /* 1 列 */gap: 20px;}.link-card {padding: 16px;}.link-card img {width: 48px;height: 48px;}.link-card .name {font-size: 16px;}.link-card .desc {font-size: 13px;}
}
/* ========= 4. 搜索框 ========= */
.link-search{display:flex;margin-bottom:40px;
}.link-search input{width:100%;max-width:320px;padding:12px 40px 12px 16px;font-size:15px;color:#333;background:#fff;border:2px solid transparent;border-radius:30px;box-shadow:0 4px 12px rgba(102,126,234,.15);transition:border-color .3s, box-shadow .3s;outline:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;
}/* 懸浮/聚焦高亮 */
.link-search input:focus{border-color:#667eea;box-shadow:0 0 0 4px rgba(102,126,234,.25);
}/* placeholder 樣式 */
.link-search input::placeholder{color:#7f8c8d;font-size:14px;
}/* ========= 5. 按鈕 & 彈窗 ========= */
/* 5.1 觸發按鈕居中容器 */
.btn-center{display:flex;justify-content:center;margin:30px 0;
}/* 5.2 主按鈕樣式 */
.btn-hero{position:relative;padding:12px 32px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea 0%, #764ba2 100%);border:none;border-radius:30px;cursor:pointer;box-shadow:0 6px 20px rgba(102,126,234,.4);transition:all .3s;overflow:hidden;
}
.btn-hero:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 30px rgba(102,126,234,.55);
}/* 5.3 彈窗遮罩 */
.modal-fade{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.35s;z-index:9999;
}
.modal-fade.show{opacity:1;visibility:visible;
}/* 5.4 彈窗主體 */
.modal-dialog{width:92%;max-width:420px;background:#fff;border-radius:16px;padding:32px 36px 36px;position:relative;transform:translateY(-30px) scale(.95);transition:transform .35s;
}
.modal-fade.show .modal-dialog{transform:none;
}/* 5.5 關閉按鈕 */
.modal-close{position:absolute;top:14px;right:18px;font-size:26px;background:none;border:none;color:#999;cursor:pointer;
}/* 5.6 表單元素 */
.modal-form{display:flex;flex-direction:column;gap:14px;
}
.modal-form input,
.modal-form textarea{padding:12px 14px;border:1px solid #e1e5e9;border-radius:8px;
}
.btn-submit{margin-top:8px;padding:12px;color:#fff;border:none;border-radius:30px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);cursor:pointer;
}/* 移動端補丁，溢出鎖死 */
.page-links{overflow-x: hidden;   /* 關鍵：禁止橫向滾動 */
}

以下是JavaScript代碼，主要用來實現前端友鏈頁面的實時搜索功能、友鏈提交彈窗（使用模態框組件展示表單，包含必填字段驗證和樣式反饋）以及后端提交申請內容到后端的功能

/* ========= 實時搜索 ========= */
document.getElementById('link-search').addEventListener('input', function () {const kw = this.value.toLowerCase();document.querySelectorAll('.link-card').forEach(card => {card.style.display = card.textContent.toLowerCase().includes(kw) ? 'flex' : 'none';});
});/* ========= 彈窗控制 ========= */
const overlay = document.getElementById('link-modal-overlay');
document.getElementById('open-link-modal').addEventListener('click', () => overlay.classList.add('show'));
overlay.addEventListener('click', e => {if (e.target === overlay || e.target.classList.contains('modal-close')) overlay.classList.remove('show');
});/* ========= Ajax 提交友鏈 ========= */
document.getElementById('link-form').addEventListener('submit', function (e) {e.preventDefault();const data = new FormData(this);data.append('action', 'submit_link_apply');fetch(ajax_comment_obj.ajax_url, { method: 'POST', body: data }).then(r => r.json()).then(res => {document.getElementById('form-msg').textContent = res.data;if (res.success) {this.reset();setTimeout(() => overlay.classList.remove('show'), 1500);}});
});

最后是后端處理前端請求并為link_manager新增待審核列的代碼，審核邏輯基于鏈接是否在前端隱藏，關閉私密功能即可前端展示

<?php
/*** 待審核友鏈提示* 包含：后臺列表新增“待審核”列 + 紅色氣泡菜單提示 + Ajax 接收*//* --------------------------------------------------* 1. 后臺列表新增“待審核”列，純文本，系統默認樣式* -------------------------------------------------- */
/* 新增“待審核”列（鍵名 review） */
add_filter( 'manage_link-manager_columns', function ( $cols ) {$cols['review'] = '待審核';return $cols;
} );/* 單元格輸出紅色氣泡 */
add_action( 'manage_link_custom_column', function ( $col, $link_id ) {if ( $col === 'review' ) {echo get_bookmark_field( 'link_visible', $link_id ) === 'N'? '<span style="display:inline-block;background:#e60026;color:#fff;font-size:11px;padding:2px 6px;border-radius:10px;margin-left:4px;">待審</span>': '';}
}, 10, 2 );/* --------------------------------------------------* 2. 后臺“鏈接”菜單右上角紅色數字氣泡* -------------------------------------------------- */
add_action( 'admin_menu', function () {$count = 0;foreach ( get_bookmarks( [ 'hide_invisible' => 0 ] ) as $link ) {if ( $link->link_visible === 'N' ) $count++;}if ( $count ) {global $menu;foreach ( $menu as &$item ) {if ( $item[2] === 'link-manager.php' ) {$item[0] .= ' <span class="awaiting-mod"><span class="pending-count">' . $count . '</span></span>';break;}}}
} );/* --------------------------------------------------* 3. Ajax 接收端（無郵件）* -------------------------------------------------- */
add_action( 'wp_ajax_nopriv_submit_link_apply', 'handle_link_apply' );
add_action( 'wp_ajax_submit_link_apply',        'handle_link_apply' );
function handle_link_apply() {$name  = sanitize_text_field( $_POST['link_name'] ?? '' );$url   = esc_url_raw        ( $_POST['link_url']  ?? '' );$email = sanitize_email      ( $_POST['link_owner_email'] ?? '' );$desc  = sanitize_text_field( $_POST['link_description'] ?? '' );$img   = esc_url_raw        ( $_POST['link_image']       ?? '' );if ( empty( $name ) || empty( $url ) || ! is_email( $email ) ) {wp_send_json_error( '請完整填寫必填項' );}wp_insert_link( ['link_name'        => $name,'link_url'         => $url,'link_description' => $desc,'link_image'       => $img,'link_owner_email' => $email,'link_visible'     => 'N',] );wp_send_json_success( '已收到申請，審核后顯示，感謝！' );
}

上傳代碼至Meteor主題目錄完成部署，最后在functions.php中啟用link_manager并調用pending-links.php處理后臺任務。

WordPress的functions.php文件中添加指定代碼可實現特定功能，需注意代碼正確性和備份以防出錯。


/* 開啟后臺鏈接 */
add_filter( 'pre_option_link_manager_enabled', '__return_true' );/* 后臺新增友鏈提示功能 */
require_once get_theme_file_path( '/self-innovate/pending-links.php' );