線上支援

WordPress 文章下方增加 LINE Social Plugins

 
一直以為 LINE 的分享按鈕在電腦上看還是雞肋一枚，想不到今早看到某家媒體網站上的 LINE 竟然已經可以從電腦上分享了，而且查看官方文件，除了分享外，還有跟 Facebook 一樣的讚按鈕，以及再用不用拿手機掃 QRCode 來加朋友的按鈕，立馬來整理一下放在 WordPress 網站裡面。

把下面這段程式碼放進 wp-content/themes/yourtheme/function.php 裡面就好，如果是使用現成佈景主題記得是加在子主題的 function.php 中，如果不知道怎麼使用子主題可以參考這一文章。


function LineSocialPlugin($content){
// 載入 LINE JS
$content .= '<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>';
// 設定按鈕樣式
$content .= '<style>.lineWrap{margin: 1rem 0 0 0;}.lineWrap iframe{ margin-right: .5rem; }</style>';
$content .= '<div class="lineWrap">';
// 在文章結尾加入「加入LINE讚」
$content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="like" data-url="'. get_permalink() .'" style="display: none;"></div>';
// 在文章結尾加入「用LINE傳送」
$content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-url="'. get_permalink() .'" style="display: none;"></div>';
// 在文章結尾加入「加入LINE好友」
$content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="friend" data-lineid="@yourlineid" style="display: none;"></div>';
$content .='</div>';
return $content;
}
add_filter('the_content', 'LineSocialPlugin');

 

用法很簡單，就是使用 LINE 官方提供的頁面，把自己喜歡的按鈕樣式選一選，然後把產出的程式碼貼進來，需要注意的地方就是 data-url 的部份，要換成 WordPress 的 get_permalink 來取得目前頁面的網址，就可以根據所在頁面進行分享。

如果要放加入好友的按鈕，記得修改 data-lineid 為自己的 ID，另外這段程式碼可以根據你自己的需要修改，假設你不想要放「加入LINE好友」的按鈕，只要把它註解就好，註解的方式也很簡單，加入 // 即可，所以程式碼會變成這樣：

 

function LineSocialPlugin($content){

// 載入 LINE JS
$content .= '<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>';
// 設定按鈕樣式
$content .= '<style>.lineWrap{margin: 1rem 0 0 0;}.lineWrap iframe{ margin-right: .5rem; }</style>';
$content .= '<div class="lineWrap">';
// 在文章結尾加入「加入LINE讚」
$content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="like" data-url="'. get_permalink() .'" style="display: none;"></div>';
// 在文章結尾加入「用LINE傳送」
$content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-url="'. get_permalink() .'" style="display: none;"></div>';
// 在文章結尾加入「加入LINE好友」
// $content .= '<div class="line-it-button" data-lang="zh_Hant" data-type="friend" data-lineid="@yourlineid" style="display: none;"></div>';

$content .='</div>';
return $content;
}
add_filter('the_content', 'LineSocialPlugin');

 

這樣就大功告成了！