自助申请友情链接邮件通知功能主题适配版
前言
该功能是主题群的一位大佬写的，我是在此基础上做了一下主题的适配，原来的界面宽度比较满，现改成了和页面内容一致的宽度。
主要功能 通过API接口来实现获取网站信息（标题、描述、ico图标），并一键提交，通过邮箱提醒站长友链申请信息。
演示
代码
引入 Font Awesome 样式表
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css', array(), '5.15.3', 'all');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
申请友链以及样式、功能代码
//友链自助申请
function display_friend_links() {
ob_start();
$application_message = '';
if (is_user_logged_in()) {
$current_user = wp_get_current_user();
$current_user_name = $current_user->display_name;
$current_user_email = $current_user->user_email;
if (isset($_POST['submit_application']) && isset($_POST['submitted']) && (!isset($_GET['application_status']) || $_GET['application_status'] !== 'success')) {
$website_title = sanitize_text_field($_POST['website_title']);
$website_description = sanitize_text_field($_POST['website_description']);
$website_url = esc_url($_POST['website_url']);
$website_icon = esc_url($_POST['website_icon']);
$admin_email = get_option('admin_email');
$subject = "友情链接申请通知 - [ $website_title ]";
$message = "网站标题: $website_title\n";
$message .= "网站描述: $website_description\n";
$message .= "网站地址: $website_url\n";
$message .= "网站图标: $website_icon\n\n";
$message .= "申请用户: $current_user_name ，用户邮件：$current_user_email\n";
wp_mail($admin_email, $subject, $message);
wp_redirect(add_query_arg('application_status', 'success', get_permalink()));
exit;
}
} else {
//$application_message = '<div class="login-message">请先登录才能申请友情链接。</div>';
$application_message = '<div style="text-align: center;margin-bottom: 10px"><button class="el-button el-button--primary el-button--small need-login-btn">请先登录才能申请友情链接</button></div>';
}//适配corenext主题，直接点击登录
// 输出HTML内容
?>
<style>
.container .url-info a {
text-decoration: none;
color: #000000;
}
.container .url-info .url-description {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
color: #333;
}
.tools-check {
margin: 0 auto;
border-radius: 8px;
background-color: #fff;
}
.tools-check h2 {
font-size: 22px;
margin-bottom: 15px;
color: #333;
}
.tools-check .form-group {
margin: 10px auto;
margin-bottom: 20px;
}
.tools-check label {
font-size: 18px;
margin-bottom: 5px;
color: #666;
width: 96%;
display: block;
margin: 10px auto;
}
.tools-check input[type="text"],
.tools-check input[type="url"] {
width: 96%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
height: 40px;
background: #ffffff;
display: block;
margin: 10px auto;
}
.tools-check button {
width: 96%;
padding: 12px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
display: block;
margin: 10px auto;
}
.tools-check button:hover {
background-color: #0056b3;
}
.tools-check #toolsResult {
margin-top: 20px;
}
.tools-check #toolsResult p {
margin-bottom: 10px;
font-size: 16px;
color: #333;
}
input[type=text]:not(.el-input__inner) {
background: #ffffff;
}
.tools-check .info-button {
width: 96%;
padding: 12px;
border: none;
border-radius: 5px;
background-color: #28a745;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
.tools-check .info-button:hover {
background-color: #218838;
}
.success-message, .login-message, .info-message {
padding: 15px;
margin: 40px auto;
border-radius: 5px;
font-size: 16px;
color: #fff;
display: flex;
align-items: center;
}
.success-message {
background-color: #28a745;
border: 1px solid #28a745;
}
.login-message {
background-color: #dc3545;
border: 1px solid #dc3545;
}
.info-message {
width: 96%;
background-color: #ffc107;
border: 1px solid #ffc107;
}
.info-message i {
margin-right: 10px;
}
.fa-spin {
animation: fa-spin 1s infinite linear;
}
</style>
<div class="tools-check">
<?php if (is_user_logged_in() && isset($_GET['application_status']) && $_GET['application_status'] == 'success'): ?>
<div class="success-message"><i class="fas fa-check-circle"></i>申请已发送给管理员。</div>
<?php elseif (!is_user_logged_in()): ?>
<?php echo $application_message; ?>
<?php else: ?>
<form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
<div class="form-group">
<label for="website_title">网站标题：</label>
<input type="text" id="website_title" name="website_title" placeholder="例如：煜轩一言" required >
<label for="website_description">网站描述：</label>
<input type="text" id="website_description" name="website_description" placeholder="例如：记录点点滴滴" required />
<label for="website_url">网站地址：</label>
<input type="url" id="website_url" name="website_url" placeholder="例如：https://www.watlam.com" required />
<label for="website_icon">网站图标：</label>
<input type="url" id="website_icon" name="website_icon" placeholder="例如：https://www.watlam.com/favicon.ico" required />
</div>
<button type="button" class="info-button" id="fetch-info-button">
<i class="fas fa-info-circle"></i> 获取网站信息（请先填写网站地址）
</button>
<div id="info-message" class="info-message" style="display:none;">
<i class="fas fa-info-circle"></i><span id="info-message-text"></span>
</div>
<button type="submit" name="submit_application">提交</button>
<input type="hidden" name="submitted" value="1">
</form>
<?php endif; ?>
</div>
<script>
document.getElementById('fetch-info-button').addEventListener('click', function() {
var websiteUrl = document.getElementById('website_url').value;
var infoMessageDiv = document.getElementById('info-message');
var infoMessageText = document.getElementById('info-message-text');
var fetchInfoButton = document.getElementById('fetch-info-button');
var fetchInfoIcon = fetchInfoButton.querySelector('i');
if (!websiteUrl) {
infoMessageText.textContent = '请先输入网站地址';
infoMessageDiv.style.display = 'flex';
return;
}
fetchInfoButton.disabled = true;
fetchInfoButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在获取中...';
var apiUrl = 'https://api.ahfi.cn/api/websiteinfo?url=' + encodeURIComponent(websiteUrl);
fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.code === 200) {
document.getElementById('website_title').value = data.data.title;
document.getElementById('website_description').value = data.data.description;
document.getElementById('website_icon').value = data.data.ico_url;
infoMessageDiv.style.display = 'none';
fetchInfoButton.innerHTML = '<i class="fas fa-check-circle"></i> 获取成功';
} else {
infoMessageText.textContent = '失败: ' + data.message;
infoMessageDiv.style.display = 'flex';
fetchInfoButton.innerHTML = '<i class="fas fa-info-circle"></i> 获取失败';
}
})
.catch(error => {
infoMessageText.textContent = '失败: ' + error.message;
infoMessageDiv.style.display = 'flex';
fetchInfoButton.innerHTML = '<i class="fas fa-info-circle"></i> 获取失败';
})
.finally(() => {
setTimeout(() => {
fetchInfoButton.disabled = false;
fetchInfoButton.innerHTML = '<i class="fas fa-info-circle"></i> 获取网站信息（请先填写网站地址）';
}, 3000);
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('friend_links', 'display_friend_links');适配内容
通过修改代码
$application_message = '<div class="login-message">请先登录才能申请友情链接。</div>
为$application_message = '<div style="text-align: center;margin-bottom: 10px"><button class="el-button el-button--primary el-button--small need-login-btn">请先登录才能申请友情链接</button></div>' 使其变为按钮可以直接点击弹出登录界面。
PS：更改该代码后如果使用了CDN需要把友情链接页面设置为不缓存，要不会出现登录了还是显示需要登录的按钮而无法跳出自助申请友链窗口；需要刷新网页才出现。
如何使用？
1、将以上代码添加到子主题（或主题中）的 functions.php 文件中
2、如果你的主题已经引入了 Font Awesome 样式表，则无需再次添加 Font Awesome 样式表的代码。
3、如果你的主题没有引入 Font Awesome 样式表，可以将上述两段代码一同添加进 functions.php 文件中。
4、如何调用？功能已经被打包成了一个短代码[friend_links]，只需要将该短代码复制粘贴到文章或者自定义内容上即可使用！
疑惑/注意
问：我申请发送了，但没有收到邮件通知？
答：请确保你的 WordPress 设置了邮箱服务器。
问：通知发送到哪里了？
答：通知会发送到网站管理员的邮箱上。
问：如何修改提示框中的内容？
答：只需要在代码中找到对应的文字，进行修改即可。
问：游客如何申请？为什么需要登录后才可以使用？
答：这个，，我限制在登录用户后才可以使用，发送的邮件会包含申请人的用户名和邮件，也方便该友链失效，可以联系到该链接作者。
问：API接口会失效吗？
答：如果有一天原作者不再维护这个功能，他承诺会将源代码开源。
总结
本文介绍的友情链接申请通知功能实现方法，读者可以轻松将该功能集成到自己的WordPress网站中。博主提供了详细的代码示例和使用说明，使得功能的添加和调用变得简单易行。
理论在其他主题也可以使用，如果有疑问欢迎底下留言告知，顺便点个赞吧！
提示：本文最后更新于2024年 8月 26日，如有错误或者已经失效，请留言告知。
THE END
