【WordPress教學】使用shortcode在文章內加入LINE分享按鈕

3 月 12, 2023 | | 0 comments

LINE分享圖片icon shortcode 方式

外觀 > 佈景主題檔案編輯器 > functions.php,將以下程式碼貼上,這邊要注意的是圖片的位置src="請使用自行上傳圖片位置",請上傳在媒體庫內自行新增上傳一張icon圖片,使用顯示LINE分享按鈕ICON

WordPress使用shortcode方式,在文章內加入LINE分享按鈕

add_shortcode( 'line_share', 'LineShare_shortcode' );
function LineShare_shortcode( $atts ) {
    $a = shortcode_atts( array(
            'share'   =>  ' https://social-plugins.line.me/lineit/share?url=',
            'url' =>   get_permalink(),
            'img'   =>  '<img src="請使用自行上傳圖片位置" width="34" height="34" alt="用LINE傳送" />',
        ),
    $atts );
    /* 定義回傳的初始值 */
    $output = '';

    /* 接下來可以用 $a 來組合要用的字串 */
    $output .= '<a href="' . $a['share'] .$a['url'].'" target="_blank">';
    $output .= $a['img'] . '</a>';

    /* 最後要將組合後的字串回傳 */
    return $output;
}

之後就可以如下使用這段shortcode,應用在可以插入shortcode佈景區塊使用它。

[line_share]

LINE分享連結 href shortcode 方式

相同操作如上,一樣貼入 外觀 > 佈景主題檔案編輯器 > functions.php,與上面方法不同之處在於,shortcode產生出來是一段連結,使用佈景編輯器如Elementor,不會因為需要在佈景外觀設定圖片,而缺乏了彈性。

add_shortcode( 'line_share', 'LineShare_shortcode' );
function LineShare_shortcode( $atts ) {
    $a = shortcode_atts( array(
            'share'   =>  ' https://social-plugins.line.me/lineit/share?url=',
            'url' =>   get_permalink()
        ),
    $atts );
    /* 定義回傳的初始值 */
    $output = '';

    /* 接下來可以用 $a 來組合要用的字串 */
    $output = $a['share'] .$a['url'] ;

    /* 最後要將組合後的字串回傳 */
    return $output;
}

WordPress使用shortcode方式,elementor在文章內加入LINK分享按鈕