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

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

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

「引文」是什麼?

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

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

圖片來源:引文區塊 – 支援

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

(1) 新增區塊按鈕 > (2) 引文區塊
在區塊輸入「/引文」

或者 ⇩

在區塊輸入「/quote」

Code Snippets 外掛介紹

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

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

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

屏幕截圖:Code Snippets 外掛頁面

使用教學

安裝外掛

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

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

step 1

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

外掛 > 安裝外掛

step 2

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

搜尋 Code Snippets

step 3

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

啟用 Code Snippets

第一個引文樣式套用

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

第一個引文樣式套用後效果

step 1

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

新增程式碼片段

step 2

  1. 在標題框中輸入「引文樣式」,方便程式碼與程式碼之間的管理。
  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

  1. 在標題框中輸入「引文樣式」,方便程式碼與程式碼之間的管理。
  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

  1. 在標題框中輸入「引文樣式」,方便程式碼與程式碼之間的管理。
  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 網站上。

複製 <style> 與 </style> 之間的程式碼

step 2

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

在附加的 CSS 貼上代碼 > 發佈

0 0 選票
文章評分

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

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論