如何在 WordPress 文章底部加入固定文字,並可自訂文字樣式?

本文將教你,該如何使用 Code Snippets 程式碼片段外掛,替每篇 WordPress 文章底部添加固定文字。 並可通過區塊編輯器,自由自訂文字的樣式,且不需要懂任何程式碼。

為什麼要在文章底部加入固定文字?

在網站文章底部加入固定文字,可以附上網站業配文章、線上課程等等的連結來提高網站收入。 也可以改成在文章底部加入網站簡介、作者簡介等等的資訊,讓更多訪客認識你,提升網站在該主題的權威度。

如下圖所示,這是 吱吱喳喳 網站文章底部的固定文字,固定文字中附有贊助連結,期望訪客能點擊連結贊助作者,這是固定文字的使用方法之一。
固定文字附有贊助連結

圖片來源 : 文末作者欄 Simple Author Box – WordPress外掛介紹

如下圖所示,這是 不只是個設計師 網站文章底部的固定文字,固定文字顯示的是文章作者的訊息以及連絡按鈕,顯示作者資訊可以慢慢培養訪客忠誠度以及信任度,同時網站也更有人情味了。
固定文字顯示文章作者訊息

圖片來源 : 【WordPress】利用3種方法教你在文章中加入作者資訊


Code Snippets 外掛介紹

本篇教學,將使用「Code Snippets」程式碼片段外掛來讓 “網站文章底部加入固定文字”,使用該外掛,也方便了程式碼與程式碼之間的管理,未來要修改程式碼也比較方便。

因為 WordPress 有許多豐富的外掛可供下載使用,豐富了我們的網站,但外掛一旦下載太多,可能會造成網站效能不佳,速度太慢等問題。

而 Code Snippets 是一個輕便、易用,且專為在網站上執行 PHP 程式碼片段所設計的解決方案。 使用 Code Snippets 外掛後,便不再需要為了網站功能去下載外掛,只需新增一個程式碼片段,輸入程式碼,即可為網站增加所需要的功能,且不會占用太多網站空間,從而降低網站速度。

Code Snippets 外掛

圖片來源 : Code Snippets 外掛頁面


使用教學

安裝 Code Snippets 外掛

step 1

開啟 WordPress 後臺管理介面,前往 外掛 > 安裝外掛

外掛 > 安裝外掛

step 2

使用關鍵字搜尋外掛,輸入「Code Snippets」。

搜尋 Code Snippets

step 3

找到名稱為「Code Snippets」的外掛,點選 立即安裝,並 啟用 該外掛。

啟用 Code Snippets

固定文字程式碼 (需手動輸入特定文字才會顯示)

step 1

外掛啟用後,點擊 程式碼片段 > 新增程式碼片段

新增程式碼片段

step 2

  • 在標題框中輸入「在文章底部加入固定文字」,方便程式碼與程式碼之間的管理。
  • 如下圖所示,複製貼上以下程式碼到程式碼輸入框中。

程式碼 :

add_shortcode( 'ending', function () {
    $out = '<p>
    如果對文章內容有任何問題,歡迎在底下留言讓我知道。<br>
    如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。<br>
    還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。<br><br>
    by 小翔
    </p>';
    return $out;
} );

畫面 :

複製貼上程式碼到程式碼輸入框

step 3

完成後記得滑到底部,點擊「儲存設定並啟用」按鈕,儲存並啟用你的程式碼。

儲存設定並啟用

step 4

想要顯示出該段固定文字,使用方法為前往文章編輯頁面,在段落中輸入文字 :

ending 使用方式

如下圖所示,文章預覽或發佈後前往網站前台即可顯示出該段固定文字。

顯示效果

添加自動顯示在文章底部 (自動)

以上所輸入的程式碼需另外在文章編輯頁面輸入文字,才可顯示固定文字。

想要更懶惰的方法,在每篇文章底部自動加入該段固定文字的話,可以在該段程式碼的後面,複製貼上以下語法。

程式碼 :

function the_content_ending( $content ){
    if( is_single() ){
        $content .= do_shortcode( '[ending]' );
    if( function_exists( 'wp_get_related_posts' ) )
        $content .= wp_get_related_posts();
    }
    return $content;
}
add_filter( 'the_content', 'the_content_ending', 11, 1 );

畫面 :

在該段程式碼後複製貼上程式碼

這樣每篇文章結尾固定文字就會自動出現了!

固定文字如何更改樣式&加入連結?

step 1

首先,你需要新增一個文章/頁面來前往區塊編輯器 (以下教學需要有安裝 區塊編輯器 外掛才可使用)。

外掛名稱 : Classic Editor (區塊編輯器)
外掛網址 : https://tw.wordpress.org/plugins/classic-editor/
WordPress 網站後台 > 文章 > 新增文章

step 2

如下圖所示,在段落中輸入你想要在文章底部顯示的固定文字,可以先用 Windows 電腦內建的記事本編輯好文本在複製貼上到段落中。

在段落中輸入要顯示的固定文字

step 3

接著,你可以單擊右上角的圖標「設定」,並點擊「區塊」選項,開始自訂你的固定文字樣式。

設定 > 區塊

step 4

如果想要為固定文字添加連結,也可以自由添加。

首先選取欲連結的段落,在單擊上方的添加連結圖標「Link」按鈕,為文字添加連結。

為固定文字添加連結

step 5

當你的固定文字樣式樣式編輯完成後。 如下圖所示,單擊段落上方的「設定」圖示。

「設定」圖示

step 6

點擊「編輯 HTML 程式碼」選項。

編輯 HTML 程式碼

step 7

如下圖所示,複製你編輯好的固定文字 HTML 程式碼。

複製 HTML 程式碼

step 8

前往剛剛新增的程式碼片段編輯頁面。 如下圖所示,把從 <p> 到.. ..</p> 的這段程式碼替換成剛剛複製的 HTML 程式碼。

替換成剛剛複製的 HTML 程式碼

畫面 :

替換好了的程式碼

step 9

記得滑到下方單擊「儲存設定」按鈕,存儲你的程式碼片段設定。

儲存設定

效果預覽

假如你完成了以上的所有設定,會如下圖所示,每篇文章最底部都會顯示你剛剛設計的固定文字,文字樣式和連結都完美保存下來了 !

使用區塊編輯器編輯固定文字非常簡單快速,不需要有任何的程式底子,想設計成什麼文字樣式就設計成什麼文字樣式。 但使用區塊編輯器生成固定文字的代碼這招也是有缺點的,就是無法加入圖片、和只能受限文字格式可以轉為 HTML 程式碼。

文章底部顯示固定文字

5 3 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest

0 評論
在線反饋
查看所有評論
0 Shares
Share
Tweet
Share
Pin