7b2友链申请表页面

js不是wordpress通用，js仅用于7b2pro主题，因使用7b2js函数，其他主题可以更改Ajax，传输token。

提交页面HTML代码：

分类是自动获取网站的链接分类，可以改代码自定义设置。

1. <?php
3. get_header();
4. $cats = get_terms('link_category');
5. ?>
6. <div id="vips">
7. <div v-if="b2token" data-name="xutian" v-cloak>
8. <div style="margin-top: 80px;margin-bottom:80px;display:flex;justify-content:center;" class="containers">
9. <div class="content content-link-application">
10. <div class="form-header">
11. <h1>友链申请</h1>
12. <br />
13. <p>您可以通过提交下面的表单贵站相关信息。</p>
14. </div>
15. <div class="wb-form contact-form nice-validator n-default">
16. <div class="mt20">
17. <div class="form-group">
18. <label>
19. <font color="red">*</font>站点名称：
20. </label>
21. <input type="text" size="40" v-model.trim="link_name" class="form-control" placeholder="输入您的网站名称" autocomplete="off" />
22. </div>
23. <div class="form-group">
24. <label>
25. <font color="red">*</font>站点地址：
26. </label>
27. <input type="text" size="40" v-model.trim="link_url" class="form-control" placeholder="输入您的网站地址" autocomplete="off" />
28. </div>
29. <div class="form-group">
30. <label>站点简介：</label>
31. <input type="text" size="40" v-model.trim="link_description" class="form-control" placeholder="输入您的网站简介" autocomplete="off" />
32. </div>
33. <div class="form-group">
34. <label>站点Logo：</label>
35. <input type="text" size="40" v-model.trim="link_image" class="form-control" placeholder="请输入您的Logo链接地址" autocomplete="off" />
36. </div>
37. <div class="form-group">
38. <label>其他备注：</label>
39. <textarea class="check-textarea" style="min-height:200px;width:100%;padding:10px;" placeholder="输入备注" size="40" v-model.trim="link_notes"></textarea>
40. </div>
41. <div class="form-group">
42. <label>
43. <font color="red">*</font>站点分类：
44. </label>
45. <br />
46. <select class="check-textarea" v-model.trim="link_category">
47. <option value="">请选择链接分类</option>
48. <?php
49. foreach ($cats as $cat) {
50. echo '<option value="' . $cat->term_id . '">' . $cat->name . '</option>';
51. }
52. ?>
53. </select>
54. </div>
55. <div style="text-align:center">
56. <input type="hidden" value="send" />
57. <button class="btn-primary" @click="showWindow()" v-cloak>提交</button>
58. </div>
59. </div>
60. </div>
61. </div>
62. </div>
63. </div>
65. <div v-else id="main" v-cloak>
66. <div style="margin-top:80px;display:flex;justify-content:center;" class="containers">
67. <div class="content content-link-application">
68. <div class="form-header">
69. <h1>友链申请</h1>
70. <br />
71. <p style="font-size:15px;">请登录后再试</p>
72. <br />
73. <div>
74. <button @click="login()">立即登录</button>
75. </div>
76. </div>
77. </div>
78. </div>
79. </div>
80. </div>
81. </div>
82. <?php
83. get_footer();

提交页面CSS代码：

1. .content-link-application{
2. padding: 60px 40px;
3. background-color: #fff;
4. border-radius: 5px;
5. width: 800px;
6. -webkit-box-shadow: 0 7px 8px 0 rgba(0,0,0,.11);
7. box-shadow: 0 7px 8px 0 rgba(0,0,0,.11)
8. }
10. .content-link-application .form-control
11. {
12. height: 38px;
13. width: 100%
14. }
16. .content-link-application .captcha-img,.content-link-application .captcha-input
17. {
18. display: inline-block;
19. vertical-align: middle
20. }
21. .content-link-application .form-header
22. {
23. max-width: 600px;
24. margin-left: auto;
25. margin-right: auto;
26. padding-bottom: 40px
27. }
29. .content-link-application .form-header p
30. {
31. color: #999;
32. font-size: 12px;
33. margin: 0;
34. }
36. .content-link-application h1
37. {
38. font-size: 30px;
39. line-height: 44px;
40. font-weight: 700
41. }
43. .content-link-application .form-control{height:38px;width:100%}
44. .content-link-application .captcha-img,.content-link-application .captcha-input{display:inline-block;vertical-align:middle}
45. .content-link-application .contact-form{max-width:600px;margin-left:auto;margin-right:auto}
46. .content-link-application .form-header{max-width:600px;margin-left:auto;margin-right:auto;padding-bottom:40px;text-align:center}
47. .content-link-application .form-header p{color:#999;font-size: 12px;margin: 0;}
48. .content-link-application h1{font-size:30px;line-height:44px;font-weight:700}
50. .form-group
51. {
52. margin-bottom: 15px
53. }
55. .content-link-application .form-control
56. {
57. height: 38px;
58. width: 100%
59. }
61. .btn.btn-default
62. {
63. color: #333;
64. background-color: #fff;
65. border-color: #ccc;
66. outline: 0;
67. -webkit-transition: all .1s ease-out 0s;
68. -o-transition: all .1s ease-out 0s;
69. transition: all .1s ease-out 0s
70. }
72. .container,.page-no-sidebar.member-lostpassword .member-lp-process
73. {
74. margin-right: auto;
75. margin-left: auto;
76. padding-left: 10px;
77. padding-right: 10px
78. }

提交页面JS代码：

1. var xutianlinks = new Vue({
2. el: '#vips',
3. data: {
4. link_name: '',
5. link_url: '',
6. link_description: '',
7. link_category: '',
8. link_image: '',
9. link_notes: ''
10. },
11. methods: {
13. login() {
14. login.show = true
15. },
17. showWindow() {
19. if (!b2token) {
21. Qmsg['warning']('请登录后提交', { html: true });
23. } else {
25. if (this.link_name.length <= '0') {
27. Qmsg['warning']('请输入您的网站名称', { html: true });
29. } else if (this.link_url.length <= '0') {
31. Qmsg['warning']('请输入您的网站地址', { html: true });
33. } else if (this.link_category.length <= '0') {
35. Qmsg['warning']('请选择站点分类', { html: true });
37. } else {
39. this.$https.post(b2_rest_url + 'xutian_api_link', 'link_name=' + this.link_name + '&link_url=' + this.link_url + '&link_description=' + this.link_description + '&link_category=' + this.link_category + '&link_image=' + this.link_image + '&link_notes=' + this.link_notes).then(res => {
41. if (res.data.status == 200) {
43. Qmsg['success'](res.data.msg, { html: true });
45. location.reload();
47. } else if (res.data.status == 401) {
48. Qmsg['info'](res.data.msg, { html: true });
49. }
51. }).catch(err => {
53. Qmsg['info'](err.response.data.message, { html: true });
55. })
57. }
58. }
60. }
61. },
63. })

后端处理PHP代码：

请将下方代码放入functions.php文件中

1. <?php
3. add_action('rest_api_init', function () {
4. register_rest_route('b2/v1', '/xutian_api_link/', array(
5. 'methods' => 'POST',
6. 'callback' => function ($request) {
7. $user_id = get_current_user_id();
9. $xutian_api_link = get_user_meta($user_id, 'xutian_api_link', true);
11. if (!$user_id) {
13. return new \WP_Error('b2_login', __('请先登录', 'b2'), array('status' => 403));
14. } else if ($xutian_api_link) {
16. return new \WP_Error('xutian_api_link', __('您已提交，请勿重复提交', 'b2'), array('status' => 403));
17. } else if ($request['link_name'] && $request['link_url'] && $request['link_category']) {
19. return api_link($request, $user_id);
20. } else {
22. return new \WP_Error('user_error', __('请输入必填项', 'b2'), array('status' => 403));
23. }
24. },
25. ));
26. });
29. function api_link($request, $user_id)
30. {
31. $link_url = isset($request['link_url']) ? trim(sanitize_text_field(htmlspecialchars($request['link_url'], ENT_QUOTES))) : '';
32. $link_name = isset($request['link_name']) ? trim(sanitize_text_field(htmlspecialchars($request['link_name'], ENT_QUOTES))) : '';
33. $link_image = isset($request['link_image']) ? esc_url($request['link_image']) : '';
34. $link_category = isset($request['link_category']) ? trim(sanitize_text_field(htmlspecialchars($request['link_category'], ENT_QUOTES))) : '';
35. $link_description = isset($request['link_description']) ? trim(sanitize_text_field(htmlspecialchars($request['link_description'], ENT_QUOTES))) : '';
36. $link_notes = isset($request['link_notes']) ? trim(sanitize_text_field(htmlspecialchars($request['link_notes'], ENT_QUOTES))) : '';
38. if ($user_id and $link_name and $link_url and $link_category and $link_description = $link_name) {
39. $linkdata = array(
40. 'link_name' => '【待审核】' . $link_name,
41. 'link_url' => $link_url,
42. 'link_image' => $link_image,
43. 'link_category' => $link_category,
44. 'link_notes' => $link_notes,
45. 'link_description' => $link_description,
46. 'link_target' => '_blank',
47. 'link_visible' => 'N'
48. );
50. require_once(ABSPATH . 'wp-admin/includes/bookmark.php');
52. $xutian = wp_insert_link($linkdata);
54. update_user_meta($user_id, 'xutian_api_link', true);
57. if ($xutian) {
59. return array('status' => 200, 'msg' => '提交成功，待审核');
60. } else {
62. return new \WP_Error('user_error', __('提交失败，请联系管理员', 'b2'), array('status' => 403));
63. }
64. } else {
66. return new \WP_Error('user_error', __('提交失败，请完善资料', 'b2'), array('status' => 403));
67. }
68. }

因防止恶意重复提交，代码中写入了update_user_meta($user_id, ‘xutian_api_link’, true);，get_user_meta($user_id, ‘xutian_api_link’, true);判断，所以用户只能提交一次，删除这个代码就可以无限提交了，或自己改判断提交次数等。