如何修改 WordPress 中引文的樣式？ 3 個引文樣式一鍵套用教學

文章最後更新於 2022 年 2 月 7 日

本篇小翔將教你如何使用程式碼片段來些改 WordPress 網站的引言樣式，文中會提供 3 種引文樣式供你自由選擇，樣式可以一鍵快速套用到你的網站上，非常方便。

目錄隱藏

「引文」是什麼？
Code Snippets 外掛介紹
使用教學

「引文」是什麼？

引文是 WordPress 區塊編輯器內建的一種文字顯示方式，迴異於一般段落文字，有較明顯的視覺強調效果。

在文章中新增引文，可協助你特別標示讀者的優質評論或對你有所啟發的片語。

在區塊編輯器編輯頁面，你可以從「新增區塊」按鈕將引文區塊新增到你的文章。或者，你也可以在區塊中輸入文字「/引文」或者「/quote」，然後按下 Enter 鍵。

或者 ⇩

Code Snippets 外掛介紹

本篇教學，將使用「Code Snippets」程式碼片段外掛來修改整個網站的引文樣式，使用該外掛，也方便了程式碼與程式碼之間的管理，未來要修改程式碼也比較方便。

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

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

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

使用教學

安裝外掛

以下教學需安裝並啟用 Code Snippets 外掛，不會安裝 WordPress 外掛的可以點擊以下連接前往教學文章學習。文中會教你如何搜尋、安裝、啟用、停用和刪除外掛。

教學文章：外掛安裝教學
文章網址：https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

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

step 2

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

step 3

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

第一個引文樣式套用

如下圖所示，這是第一個引文樣式套用後的效果預覽，適合用來引用維基百科、百度百科.. 等等網站中的名詞解釋、知識說明：

step 1

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

step 2

在標題框中輸入「引文樣式」，方便程式碼與程式碼之間的管理。
如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼 :

add_action( 'wp_head', function () { ?>
<style>

.entry-content blockquote {
    font-size: .9em;
    font-style:normal;
    /* 引文外邊框樣式 */
    border: solid 2px #BDBDBD;
}
.entry-content blockquote {
    box-sizing: border-box;
    position: relative;
    margin: 1.5em 0;
    padding: 13px 15px 13px 50px;
    color: #464646;
}
.entry-content blockquote:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #f8c678;
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 25px;
    vertical-align: middle;
    line-height: 1;
    content: "\f10d";
}
.entry-content blockquote p {
    margin: 10px 0;
    padding: 0;
    line-height: 1.7;
}
.entry-content blockquote cite {
    display: block;
    color: #888;
    font-size: .9em;
    font-style:normal;
    text-align: right;
}

</style>
<?php } );

畫面 :

step 3

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

第二個引文樣式套用

如下圖所示，這是第二個引文樣式套用後的效果預覽，適合凸顯你覺得非常重要的一段文字或人生語錄：

step 1

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

step 2

在標題框中輸入「引文樣式」，方便程式碼與程式碼之間的管理。
如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼 :

add_action( 'wp_head', function () { ?>
<style>

.wp-block-quote {
    /* 引文左邊垂直線顏色 */
    border-left: 0.3rem solid #E85A5A;
    margin: 1.2rem 0;
    padding: 1.4rem;
    /* 引文背景顏色 */
    background-color: #f5f7fa;
}
blockquote {
    /* 引文文字顏色 */
    color: #000000;
    font-size: 1.1em;
    line-height: inherit;
    position: relative;
    font-style: italic;
}
.wp-block-quote p {
    font-style: normal;
    font-size: 1rem;
}

</style>
<?php } );

畫面 :

step 3

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

第三個引文樣式套用

如下圖所示，這是第三個引文樣式套用後的效果預覽，適合用來在文章添加一段說明文字、備註文字：

step 1

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

step 2

在標題框中輸入「引文樣式」，方便程式碼與程式碼之間的管理。
如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼 :

add_action( 'wp_head', function () { ?>
<style>

blockquote {
    margin-left: 0px;
    padding: 0.7em 1.2em;
    color: var(--ast-global-color-3);
    margin: 1.5em 1em 1.5em 3em;
    font-size: 1.1em;
    line-height: inherit;
    position: relative;
    border-left: 5px solid rgba(0,0,0,.05);
    font-style: italic;
}
blockquote, q {
    quotes: "" "";
}
.entry-content blockquote {
    /* 引文文字大小 */
    font-size: 18px;
    /* 引文文字正體 */
    font-style:normal;
    /* 引文尺寸：全幅寬度 */
    margin: 1.5em 0;
}

</style>
<?php } );

畫面 :

step 3

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

如何不用外掛來套用樣式？

假如你不想透過安裝 Code Snippets 外掛來修改引文樣式，你也可以選擇直接在外觀 > 自訂 > 附加的 CSS 那邊來修改。

step 1

使用方法為複製 <style> 與 </style> 之間的程式碼，並貼上到附加的 CSS 中，即可套用該引文樣式到你的 WordPress 網站上。

step 2

貼上後記得單擊上方的「發佈」按鈕，儲存你的設定。

5 2 選票

文章評分

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

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

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

by 小翔

0 Shares

如何修改 WordPress 中引文的樣式？ 3 個引文樣式一鍵套用教學

「引文」是什麼？

Code Snippets 外掛介紹

使用教學

安裝外掛

第一個引文樣式套用

第二個引文樣式套用

第三個引文樣式套用

如何不用外掛來套用樣式？

關於 WP小翔

網站連結