WordPress友链申请功能开发踩坑记录

Heart Lv462

给博客加了个友链申请功能,过程中踩了不少坑,顺手记一下。

友链提交被重复处理

shortcode 被渲染多次,导致数据重复插入。另外提交后老是跳到首页,而不是留在当前页面。把提交处理挪到 template_redirect 钩子里,用常量确保只执行一次。跳转用 get_permalink(get_queried_object_id()) 拿当前页面地址,带上状态参数就行。

提交成功的 toast 样式

想要的效果是右上角弹出、从下往上滑入、底部白色进度条、能点x关闭。iziToast 本身就支持这些,直接配置 position、transitionIn、progressBar、close 这几个参数。背景色和进度条颜色也能自定义。

toast 挡住了自定义鼠标

页面有个自定义鼠标指针层,toast 弹出来直接把它盖住了。一开始想用 pointer-events: none 让 toast 不吃鼠标事件,但这样就没法点关闭按钮了。最后发现 iziToast 有 zindex 选项,调小一点就解决了。

对勾图标太细

默认的对勾字符或者 iziToast 自带图标都是细线条的,和设计稿不一样。用 iconUrl 传一个自定义 SVG,stroke-width 设粗一点、stroke-linecap 设成 round,再用 CSS 调尺寸就行。

textarea 能被拖拽拉长

浏览器默认行为,右下角能拖。一行 CSS 搞定:resize: none;

夜间模式友链卡片有黑块

DevTools 里定位到是 .friend-link-description::after,主题用伪元素做的渐变遮罩,直接 display: none 干掉。

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<?php
function friendlink_apply_handle_post() {
if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
if (empty($_POST['friendlink_apply_submit'])) return;
if (defined('FRIENDLINK_APPLY_HANDLED')) return;
define('FRIENDLINK_APPLY_HANDLED', true);

if (!isset($_POST['_wpnonce']) || !wp_verify_nonce($_POST['_wpnonce'], 'friendlink_apply')) {
friendlink_apply_redirect_with_status('nonce_fail');
}

if (!function_exists('wp_insert_link')) {
require_once ABSPATH . 'wp-admin/includes/bookmark.php';
}

$name = sanitize_text_field($_POST['fl_name'] ?? '');
$url = esc_url_raw($_POST['fl_url'] ?? '');
$cover = esc_url_raw($_POST['fl_cover'] ?? '');
$desc = sanitize_textarea_field($_POST['fl_desc'] ?? '');

if (!$name || !$url) {
friendlink_apply_redirect_with_status('missing');
}

$linkdata = [
'link_name' => $name,
'link_url' => $url,
'link_image' => $cover,
'link_description' => $desc,
'link_visible' => 'N',
'link_notes' => 'pending|' . time(),
];

$new_id = wp_insert_link($linkdata, true);
if (is_wp_error($new_id)) {
friendlink_apply_redirect_with_status('insert_fail');
}

friendlink_apply_redirect_with_status('success');
}
add_action('template_redirect', 'friendlink_apply_handle_post');

function friendlink_apply_redirect_with_status($status) {
$page_id = function_exists('get_queried_object_id') ? get_queried_object_id() : 0;
$base = $page_id ? get_permalink($page_id) : '';
if (!$base) $base = function_exists('wp_get_raw_referer') ? wp_get_raw_referer() : '';
if (!$base) $base = home_url('/');

$redirect = add_query_arg(['fl_apply' => $status], $base);
$redirect .= '#friendlink-apply';
wp_safe_redirect($redirect);
exit;
}

function friendlink_apply_shortcode() {
$msg = '';
$status = isset($_GET['fl_apply']) ? sanitize_text_field($_GET['fl_apply']) : '';

if ($status === 'success') {
$msg = '<div class="alert alert-success">感谢申请!等待审核通过后展示。</div>';
} elseif ($status === 'missing') {
$msg = '<div class="alert alert-warning">请填写站点名称和网址。</div>';
} elseif ($status === 'nonce_fail') {
$msg = '<div class="alert alert-danger">安全校验失败,刷新重试。</div>';
} elseif ($status === 'insert_fail') {
$msg = '<div class="alert alert-danger">提交失败,稍后重试。</div>';
}

ob_start();
?>
<div id="friendlink-apply" class="friendlink-apply card shadow-sm">
<div class="card-body">
<h3 class="card-title">申请友链</h3>
<?php echo $msg; ?>
<form method="post">
<?php wp_nonce_field('friendlink_apply'); ?>
<div class="mb-3">
<label class="form-label">站点名称</label>
<input class="form-control" name="fl_name" required placeholder="YHalo Blog">
</div>
<div class="mb-3">
<label class="form-label">网站地址</label>
<input class="form-control" name="fl_url" required placeholder="https://example.com">
</div>
<div class="mb-3">
<label class="form-label">封面图</label>
<input class="form-control" name="fl_cover" placeholder="https://example.com/cover.jpg">
</div>
<div class="mb-3">
<label class="form-label">站点描述</label>
<textarea class="form-control" name="fl_desc" rows="3" placeholder="一句话介绍"></textarea>
</div>
<button class="btn btn-primary" type="submit" name="friendlink_apply_submit" value="1">提交</button>
</form>
</div>
</div>

<?php if ($status === 'success') : ?>
<script>
(function () {
var checkSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E";
if (!window.iziToast) return;
iziToast.show({
class: 'fl-apply-toast',
title: '提交成功',
message: '等待审核~',
position: 'topRight',
transitionIn: 'fadeInUp',
transitionOut: 'fadeOutUp',
timeout: 4000,
progressBar: true,
progressBarColor: 'rgba(255,255,255,.9)',
backgroundColor: 'rgb(45, 206, 137)',
iconUrl: checkSvg,
close: true,
zindex: 9999
});
})();
</script>
<?php endif; ?>

<style>
.friendlink-apply{border-radius:16px;border:1px solid rgba(0,0,0,.08);overflow:hidden}
.friendlink-apply .card-body{padding:20px}
.friendlink-apply .card-title{margin:0 0 12px;font-size:20px}
.friendlink-apply .form-label{display:block;margin:0 0 6px;opacity:.85}
.friendlink-apply .form-control{width:100%;border-radius:12px;border:1px solid rgba(0,0,0,.12);padding:10px 12px}
.friendlink-apply .btn{border-radius:12px;padding:10px 14px}
.friendlink-apply .alert{margin:12px 0;padding:10px 12px;border-radius:12px}
.friendlink-apply textarea{resize:none}
.iziToast.fl-apply-toast{border-radius:6px!important}
.iziToast.fl-apply-toast .iziToast-title,
.iziToast.fl-apply-toast .iziToast-message{color:#fff!important}
.iziToast.fl-apply-toast .iziToast-icon{width:22px!important;height:22px!important}
</style>
<?php
return ob_get_clean();
}
add_shortcode('friendlink_apply', 'friendlink_apply_shortcode');

夜间模式遮罩修复:

1
2
3
.friend-link-description::after {
display: none !important;
}
  • Title: WordPress友链申请功能开发踩坑记录
  • Author: Heart
  • Created at : 2025-12-31 19:00:00
  • Updated at : 2026-01-01 14:49:20
  • Link: https://yhalo-wyh.github.io/2025/12/31/WordPress友链申请功能开发踩坑记录/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments