在分享区块中增加短链分享按钮
本文最后更新于382 天前,其中的信息可能已经过时,如有错误请发送邮件到[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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇