WordPress分享文章代碼的實(shí)現(xiàn)方法

來(lái)自：素雅營(yíng)銷(xiāo)研究院

方知筆記

2025年07月02日 21:50

在WordPress網(wǎng)站中添加文章分享功能可以大大提高內(nèi)容的傳播效率，讓讀者能夠輕松地將優(yōu)質(zhì)內(nèi)容分享到各大社交平臺(tái)。本文將介紹幾種在WordPress中實(shí)現(xiàn)文章分享功能的代碼方法。

一、使用內(nèi)置的分享短代碼

WordPress本身提供了一些基礎(chǔ)的分享功能，可以通過(guò)短代碼實(shí)現(xiàn)：

// 在主題的functions.php文件中添加以下代碼
function wp_share_buttons_shortcode() {
global $post;
$url = urlencode(get_permalink($post->ID));
$title = urlencode(get_the_title($post->ID));

$output = '<div class="share-buttons">';
$output .= '<a href="https://www.facebook.com/sharer/sharer.php?u='.$url.'" target="_blank">分享到Facebook</a>';
$output .= '<a href="https://twitter.com/intent/tweet?url='.$url.'&text='.$title.'" target="_blank">分享到Twitter</a>';
$output .= '<a href="https://www.linkedin.com/shareArticle?mini=true&url='.$url.'&title='.$title.'" target="_blank">分享到LinkedIn</a>';
$output .= '</div>';

return $output;
}
add_shortcode('share_buttons', 'wp_share_buttons_shortcode');

使用方式：在文章或頁(yè)面中插入[share_buttons]短代碼即可顯示分享按鈕。

二、使用社交平臺(tái)官方提供的代碼

各大社交平臺(tái)通常都提供了自己的分享按鈕代碼，可以直接嵌入：

<!-- Facebook分享按鈕 -->
<div class="fb-share-button"
data-href="<?php the_permalink(); ?>"
data-layout="button_count">
</div>

<!-- Twitter分享按鈕 -->
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-url="<?php the_permalink(); ?>"
data-text="<?php the_title(); ?>"
data-show-count="false">
Tweet
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

三、使用第三方插件代碼

如果你不想從頭開(kāi)始編寫(xiě)代碼，可以使用一些流行的社交分享插件提供的API：

// 使用AddToAny插件的代碼示例
if (function_exists('ADDTOANY_SHARE_SAVE_KIT')) {
ADDTOANY_SHARE_SAVE_KIT(array(
'buttons' => array('facebook', 'twitter', 'linkedin', 'pinterest'),
));
}

四、自定義美觀的分享按鈕

如果你想創(chuàng)建更美觀的分享按鈕，可以結(jié)合CSS和JavaScript：

<div class="custom-share-buttons">
<button class="share-btn facebook" data-network="facebook">
<i class="fab fa-facebook-f"></i> Facebook
</button>
<button class="share-btn twitter" data-network="twitter">
<i class="fab fa-twitter"></i> Twitter
</button>
<button class="share-btn linkedin" data-network="linkedin">
<i class="fab fa-linkedin-in"></i> LinkedIn
</button>
</div>

<script>
jQuery(document).ready(function($) {
$('.share-btn').click(function() {
var network = $(this).data('network');
var url = encodeURIComponent(window.location.href);
var title = encodeURIComponent(document.title);

switch(network) {
case 'facebook':
window.open('https://www.facebook.com/sharer/sharer.php?u=' + url, '_blank');
break;
case 'twitter':
window.open('https://twitter.com/intent/tweet?url=' + url + '&text=' + title, '_blank');
break;
case 'linkedin':
window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + title, '_blank');
break;
}
});
});
</script>