本文最后更新于359 天前,其中的信息可能已经过时,如有错误请发送邮件到[email protected]
在Argon主题分享区块中增加短链分享按钮
修改share.php文件
首先在Argon主题根目录找到share.php文件,路径:/wp-content/themes/argon/template-parts/share.php。
搜索:icon-copy-link,找到第一个插入点。
<a target="_blank" class="no-pjax icon-copy-link" id="share_copy_link" tooltip="<?php _e('复制链接', 'argon'); ?>">
在以上代码前插入一行,添加以下代码,来增加短链接分享的按钮:
<a target="_blank" class="no-pjax icon-short-link" id="share_short_link" tooltip="<?php _e('复制短链', 'argon'); ?>">
<button class="btn btn-icon btn-default" style="background: #7f7ee0;border: none;">
<span class="btn-inner--icon"><i class="fa fa-share-alt"></i></span>
</button>
</a>
搜索:</script>,找到第二个插入点,如下位置。
document.body.removeChild(input);
};
/* *在下方插入代码 */
/* *在上方插入代码 */
</script>
在上方所示位置插入以下代码:
$("#share_short_link")[0].onclick = async function () {
// 生成短链接
if (!window.shorturl) {
const poop = await fetch('https://xza.norc.cn/api.php?url=' + encodeURI(window.location.href)).then(x => x.json());
window.shorturl = poop.shorturl ? poop.shorturl : poop.error;
}
// 复制链接到剪贴板
let input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute("value", window.shorturl); // 使用短链接而不是原始链接
input.setAttribute("readonly", "readonly");
input.setAttribute("style", "opacity: 0; pointer-events:none;");
input.select();
if (document.execCommand('copy')) {
// 显示成功提示
iziToast.show({
title: '<?php _e('短链接已复制', 'argon');?>',
message: "<?php _e('短链接已复制到剪贴板', 'argon');?>",
class: 'shadow',
position: 'topRight',
backgroundColor: '#2dce89',
titleColor: '#ffffff',
messageColor: '#ffffff',
iconColor: '#ffffff',
progressBarColor: '#ffffff',
icon: 'fa fa-check',
timeout: 5000
});
} else {
// 显示失败提示
iziToast.show({
title: '<?php _e('复制失败', 'argon');?>',
message: "<?php _e('请前往短链站手动生成链接', 'argon');?>",
class: 'shadow',
position: 'topRight',
backgroundColor: '#f5365c',
titleColor: '#ffffff',
messageColor: '#ffffff',
iconColor: '#ffffff',
progressBarColor: '#ffffff',
icon: 'fa fa-close',
timeout: 5000
});
}
// 移除临时输入框
document.body.removeChild(input);
};
修改style.css文件
打开Argon主题目录下的style.css文件(路径:/wp-content/themes/argon/style.css)。
搜索以下代码
#share .icon-copy-link:before
在其前方插入一行,添加以下代码
#share .icon-short-link:before {
content: attr(tooltip);
}
注:可以直接在自定义CSS中添加上述代码,无需修改style.css