Meteor主题友链页面自研

发布于Meteor主题友链页面自研 | Eucalyptushttps://blog.eucalyptus.cc/2025/08/31/Meteor%E4%B8%BB%E9%A2%98%E5%8F%8B%E9%93%BE%E9%A1%B5%E9%9D%A2%E8%87%AA%E7%A0%94/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 classhero-title ?php the_title( h1, /h1 ); ? p classhero-sub欢迎交换友链 · 携手点亮彼此的星空/p /div !-- 载入独立样式 -- link relstylesheet href?php echo get_template_directory_uri(); ?/self-innovate/page-links.css div classpage-links !-- 搜索框 -- div classlink-search input typetext idlink-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 classlink-cat h2?php echo esc_html( $cat-name ); ?/h2 ?php if ( ! empty( $cat-description ) ) : ? p classlink-cat-desc?php echo esc_html( $cat-description ); ?/p ?php endif; ? div classlinks ?php foreach ( $bookmarks as $link ) : ? a classlink-card href?php echo esc_url( $link-link_url ); ? target_blank relnoopener img src?php echo esc_url( $link-link_image ?: ); ? >?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 styledisplay: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 classawaiting-modspan classpending-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 );