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

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

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

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

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

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

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

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

---

Code Snippets 外掛介紹

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

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

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

• 相關文章 : 【WordPress外掛】好用的程式碼片段外掛，N個實用程式碼片段範例教學

圖片來源 : Code Snippets 外掛頁面

---

使用教學

安裝 Code Snippets 外掛

step 1

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

• 相關文章 : 【WordPress教學】手把手教你如何安裝外掛

step 2

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

step 3

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

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

step 1

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

step 2

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

程式碼 :

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

畫面 :

step 3

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

step 4

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

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

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

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

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

程式碼 :

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/

step 2

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

step 3

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

step 4

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

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

step 5

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

step 6

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

step 7

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

step 8

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

畫面 :

step 9

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

---

效果預覽

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

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

---

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。

by 小翔