临近年底，工作和生活上的事情较多，几乎没怎么逛博客互动。不过再忙也有闲暇的时候，就思考了下搭建这个博客的初衷。起初建这个博客只是因为看到设计笔记的这款主题挺好玩，又赶上那会儿实在无聊，就这么着一步步鼓捣这个博客至今。根本没有考虑这个博客的定位。
博客经过两个月的运行，感觉独立博客其实也就干这么三件事，一是折腾博客主题，二是去其他博客互动，三是在博客内发表文章。
关于折腾博客这件事儿，算作自己的一个爱好，还是要继续。尽管自己不懂代码，但却时不时的想着折腾一下自己这一亩三分地。尤其是当实现某一功能后，感觉还是很有成就感的。
关于博客互动这件事儿，感觉也是一个件必不可少的事项，平时没事儿的时候看看别的博客都折腾了啥新功能，都写了些关于哪方面的文章。是一个取长补短，获取灵感，打开思路的好途径。当然更重要的是通过博客的互动，能够认识一些好朋友。
关于博客内容，从目前博客的分类来看，随着时间的推移，我想内容应该会慢慢丰富起来的。代码分类记录一些折腾的记录。软件分类记录一些自己使用过的软件。购物分类记录一些买的小物件。出行分类记录一些去过的地方。生活分类记录一些日常生活相关的内容。分这么多的类别也是无奈，毕竟自己无论哪一方面都不擅长，类别多了可能会更容易保持一定的更新。致于笔记板块儿就随便记录一些最近的动态即可。
废话不多说了，这里记录一下昨天折腾的在友情链接页面增加的使用友链表单通过 AJAX 提交申请友链的功能。该功能可以直接通过填写表单的方式来提交友链申请，提交申请后会通过电子邮件通知管理员，管理员在后台审核通过或拒绝均会通过电子邮件的方式通知申请人。
本次功能的实现，是将主题原有的通过前端 vue.js 进行友链管理方式改为了通过后端来进行友链管理。其实主题原有的前端友链管理方式也不错，但如果在此基础上增加友链申请功能感觉怎么也绕不开后端处理，于是就统一都改为了通过 wordpress 后台来管理友情链接。这样也有一个好处，可以删除一大段主题使用的通过拖拽进行友链排序功能的 JS 代码。现将实现该功能的主要代码记录如下（代码仅供参考，直接使用可能会出现各种问题。）：
1.修改后的友情链接页面 page-links.php 代码
<?php /* Template Name: 友情链接 */ get_header(); ?> <article class="article" itemscope itemtype="https://schema.org/Article"> <?php if (have_posts()) : while (have_posts()) : the_post(); require_once("inc/article-header.php"); ?> <div class="article-content" itemprop="articleBody"> <?php $categories = get_terms(array( 'taxonomy' => 'link_category', 'hide_empty' => false, )); if (!empty($categories) && !is_wp_error($categories)) { foreach ($categories as $category) { echo '<h3 class="link-category-title h5">' . esc_html($category->name) . '</h3>'; $links = new WP_Query(array( 'post_type' => 'links', 'posts_per_page' => -1, 'post_status' => 'publish', 'tax_query' => array( array( 'taxonomy' => 'link_category', 'field' => 'term_id', 'terms' => $category->term_id, ), ), )); if ($links->have_posts()) : ?> <ul class="article-cards article-links columns reset-ul"> <?php while ($links->have_posts()) : $links->the_post(); $url = get_post_meta(get_the_ID(), 'url', true); ?> <li class="column col-4 col-sm-6 p-2"> <a class="card uni-card uni-shadow flex-center text-center" href="<?php echo esc_url($url); ?>" target="_blank" rel="noopener"> <span class="text-break"><?php the_title(); ?></span> </a> </li> <?php endwhile; ?> </ul> <?php endif; wp_reset_postdata(); } } else { $links = new WP_Query(array( 'post_type' => 'links', 'posts_per_page' => -1, 'post_status' => 'publish', )); if ($links->have_posts()) : ?> <ul class="article-cards article-links columns reset-ul"> <?php while ($links->have_posts()) : $links->the_post(); $url = get_post_meta(get_the_ID(), 'url', true); ?> <li class="column col-4 col-sm-6 p-2"> <a class="card uni-card uni-shadow flex-center text-center" href="<?php echo esc_url($url); ?>" target="_blank" rel="noopener"> <span class="text-break"><?php the_title(); ?></span> </a> </li> <?php endwhile; ?> </ul> <?php endif; wp_reset_postdata(); } ?> <div class="divider"></div> <div class="link-apply-section"> <h3 class="h5">友链申请</h3> <div id="linkApplyContainer"> <form id="linkApplyForm" class="form-horizontal"> <?php wp_nonce_field('submit_link', 'link_nonce'); ?> <div class="form-group"> <div class="col-4"> <label class="form-label" for="site_name">网站名称</label> </div> <div> <input class="form-input" type="text" id="site_name" name="site_name" placeholder=" " required> </div> </div> <div class="form-group"> <div class="col-4"> <label class="form-label" for="site_url">网站地址</label> </div> <div> <input class="form-input" type="url" id="site_url" name="site_url" placeholder=" " required> </div> </div> <div class="form-group"> <div class="col-4"> <label class="form-label" for="site_email">联系邮箱</label> </div> <div> <input class="form-input" type="email" id="site_email" name="site_email" placeholder=" " required> </div> </div> <div class="form-group"> <div class="col-4"></div> <div> <button class="editor-send btn btn-primary btn-sm flex-center" type="submit">提 交</button> </div> </div> </form> </div> </div> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </article> <?php if (comments_open() || get_comments_number()) : comments_template(); endif; get_footer(); ?>
2. functions.php 文件或其它该文件引用的文件均可，我是在 core-notes.php 文件中添加的用于注册友情链接自定义文章类型的代码，记录如下：
// 注册友情链接自定义文章类型 function links_custom_init() { register_post_type('links', array( 'labels' => array( 'name' => '友情链接', 'singular_name' => '友情链接', 'add_new' => '添加链接', 'add_new_item' => '添加新链接', 'edit_item' => '编辑链接', 'new_item' => '新链接', 'view_item' => '查看链接', 'search_items' => '搜索链接', 'not_found' => '没有找到链接', 'not_found_in_trash' => '回收站里没有链接', 'menu_name' => '友链' ), 'public' => true, 'publicly_queryable' => false, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => array('slug' => 'links'), 'capability_type' => 'post', 'has_archive' => false, 'hierarchical' => false, 'menu_position' => 5, 'supports' => array('title', 'custom-fields'), 'menu_icon' => 'dashicons-admin-links' )); register_taxonomy('link_category', 'links', array( 'labels' => array( 'name' => '链接分类', 'singular_name' => '链接分类', 'search_items' => '搜索分类', 'all_items' => '所有分类', 'parent_item' => '父级分类', 'parent_item_colon' => '父级分类:', 'edit_item' => '编辑分类', 'update_item' => '更新分类', 'add_new_item' => '添加新分类', 'new_item_name' => '新分类名称', 'menu_name' => '链接分类' ), 'hierarchical' => true, 'show_ui' => true, 'show_admin_column' => true, 'query_var' => true, 'rewrite' => array('slug' => 'link-category'), )); } add_action('init', 'links_custom_init'); function add_link_meta_boxes() { add_meta_box( 'link_meta_box', '链接信息', 'render_link_meta_box', 'links', 'normal', 'high' ); } add_action('add_meta_boxes', 'add_link_meta_boxes'); function render_link_meta_box($post) { wp_nonce_field('save_link_meta', 'link_meta_nonce'); $url = get_post_meta($post->ID, 'url', true); $email = get_post_meta($post->ID, 'email', true); ?> <table class="form-table"> <tr> <th><label for="url">链接地址</label></th> <td> <input type="url" id="url" name="url" value="<?php echo esc_attr($url); ?>" class="regular-text" required> </td> </tr> <tr> <th><label for="email">申请人邮箱</label></th> <td> <input type="email" id="email" name="email" value="<?php echo esc_attr($email); ?>" class="regular-text" readonly> <p class="description">申请人的联系邮箱，用于通知审核结果</p> </td> </tr> </table> <?php } function save_link_meta($post_id) { if (!isset($_POST['link_meta_nonce'])) { return; } if (!wp_verify_nonce($_POST['link_meta_nonce'], 'save_link_meta')) { return; } if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return; } if (!current_user_can('edit_post', $post_id)) { return; } if (isset($_POST['url'])) { update_post_meta($post_id, 'url', sanitize_url($_POST['url'])); } if (isset($_POST['email'])) { update_post_meta($post_id, 'email', sanitize_email($_POST['email'])); } } add_action('save_post_links', 'save_link_meta'); function notify_link_status_change($new_status, $old_status, $post) { if ($post->post_type !== 'links') { return; } $email = get_post_meta($post->ID, 'email', true); if (!$email) { return; } $site_name = get_bloginfo('name'); $site_url = get_bloginfo('url'); if ($old_status === 'draft' && $new_status === 'publish') { $subject = "【{$site_name}】友情链接申请已通过"; $message = '<div style="border-right:#666666 1px solid;border-radius:8px;color:#111;font-size:12px;width:95%;border-bottom:#666666 1px solid;font-family:微软雅黑,arial;margin:10px auto 0px;border-top:#666666 1px solid;border-left:#666666 1px solid">'; $message .= '<div style="width:100%;background:#666666;min-height:60px;color:white;border-radius:6px 6px 0 0">'; $message .= '<span style="line-height:60px;min-height:60px;margin-left:30px;font-size:12px">您在 <a style="color:#00bbff;font-weight:600;text-decoration:none" href="' . $site_url . '" target="_blank">' . $site_name . '</a> 的友情链接申请已通过审核！</span></div>'; $message .= '<div style="margin:0px auto;width:90%">'; $message .= '<p>您好！</p>'; $message .= '<p>您提交的友情链接申请已通过审核：</p>'; $message .= '<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">'; $message .= '网站名称：' . $post->post_title . '<br>'; $message .= '链接地址：' . get_post_meta($post->ID, 'url', true) . '</p>'; $message .= '<p>您可以点击 <a style="color:#00bbff;text-decoration:none" href="' . get_permalink(get_page_by_path('links')) . '" target="_blank">查看友情链接页面</a></p>'; $message .= '</div></div>'; wp_mail($email, $subject, $message, array('Content-Type: text/html; charset=' . get_option('blog_charset'))); } elseif ($old_status === 'draft' && $new_status === 'trash') { $subject = "【{$site_name}】友情链接申请未通过"; $message = '<div style="border-right:#666666 1px solid;border-radius:8px;color:#111;font-size:12px;width:95%;border-bottom:#666666 1px solid;font-family:微软雅黑,arial;margin:10px auto 0px;border-top:#666666 1px solid;border-left:#666666 1px solid">'; $message .= '<div style="width:100%;background:#666666;min-height:60px;color:white;border-radius:6px 6px 0 0">'; $message .= '<span style="line-height:60px;min-height:60px;margin-left:30px;font-size:12px">您在 <a style="color:#00bbff;font-weight:600;text-decoration:none" href="' . $site_url . '" target="_blank">' . $site_name . '</a> 的友情链接申请未通过审核</span></div>'; $message .= '<div style="margin:0px auto;width:90%">'; $message .= '<p>您好！</p>'; $message .= '<p>很抱歉，您提交的友情链接申请未能通过审核：</p>'; $message .= '<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">'; $message .= '网站名称：' . $post->post_title . '<br>'; $message .= '链接地址：' . get_post_meta($post->ID, 'url', true) . '</p>'; $message .= '<p>如有疑问，请联系站长。</p>'; $message .= '</div></div>'; wp_mail($email, $subject, $message, array('Content-Type: text/html; charset=' . get_option('blog_charset'))); } } add_action('transition_post_status', 'notify_link_status_change', 10, 3); function handle_link_apply() { if (!check_ajax_referer('submit_link', 'link_nonce', false)) { wp_send_json_error(array('message' => '安全验证失败')); return; } $site_name = isset($_POST['site_name']) ? sanitize_text_field($_POST['site_name']) : ''; $site_url = isset($_POST['site_url']) ? sanitize_url($_POST['site_url']) : ''; $site_email = isset($_POST['site_email']) ? sanitize_email($_POST['site_email']) : ''; if (empty($site_name) || empty($site_url) || empty($site_email)) { wp_send_json_error(array('message' => '请填写完整信息')); return; } $post_data = array( 'post_title' => $site_name, 'post_status' => 'draft', 'post_type' => 'links' ); $post_id = wp_insert_post($post_data); if (!is_wp_error($post_id)) { update_post_meta($post_id, 'url', $site_url); update_post_meta($post_id, 'email', $site_email); $admin_email = get_option('admin_email'); $subject = '新的友情链接申请'; $message = "收到新的友情链接申请：\n\n"; $message .= "网站名称：{$site_name}\n"; $message .= "网站地址：{$site_url}\n"; $message .= "联系邮箱：{$site_email}\n\n"; $message .= "请登录后台审核：" . admin_url('edit.php?post_type=links'); wp_mail($admin_email, $subject, $message); wp_send_json_success(array('message' => '申请已提交，请等待审核')); } else { wp_send_json_error(array('message' => '提交失败，请稍后重试')); } } add_action('wp_ajax_submit_link_apply', 'handle_link_apply'); add_action('wp_ajax_nopriv_submit_link_apply', 'handle_link_apply');
3.新建一个 link-apply.js 文件，添加 ajax 处理友链表单提交申请的代码
function initLinkApply() { const form = document.getElementById('linkApplyForm'); if (!form) return; form.onsubmit = function (e) { e.preventDefault(); const submitBtn = form.querySelector('button[type="submit"]'); const formData = new FormData(form); submitBtn.disabled = true; submitBtn.textContent = '提交中...'; fetch(ajaxurl, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }, body: new URLSearchParams({ action: 'submit_link_apply', link_nonce: formData.get('link_nonce'), site_name: formData.get('site_name'), site_url: formData.get('site_url'), site_email: formData.get('site_email') }) }) .then(res => res.json()) .then(response => { $vm.$toast({ type: response.success ? 'success' : 'error', message: response.data?.message || (response.success ? '申请已提交，请等待审核' : '提交失败') }); if (response.success) form.reset(); }) .catch(() => { $vm.$toast({ type: 'error', message: '提交失败，请稍后重试' }); }) .finally(() => { submitBtn.disabled = false; submitBtn.textContent = '提 交'; }); }; } window.initLinkApply = initLinkApply; document.addEventListener('DOMContentLoaded', () => { initLinkApply(); });
4.functions.php 文件中挂载 link-apply.js 和 admin-ajax.php
wp_enqueue_script('link-apply', get_template_directory_uri() . '/static/link-apply.js', array(), null, true); wp_localize_script('link-apply', 'ajaxurl', admin_url('admin-ajax.php'));
5.适配该主题开启 pjax 功能，主题 script.js 文件 after() 函数内添加如下代码：
bindCodeFeatures();
效果截图如下：
