如何自訂 WordPress 主題中的引用樣式

WPressize Me

10/28/2022

如何自訂 WordPress 主題中的引用樣式

更新日期:2024年3月11日

編輯團隊 | 專家審核:Syed Balkhi

您是否正在尋找一種方法來自訂 WordPress 主題中的引用樣式?

引用往往是文章中最令人難忘的部分,也是任何博客文章或頁面中分享最多的部分。這就是為什麼報紙和主流媒體網站會自訂引用樣式,使其更突出。

為什麼要在 WordPress 中使用並自訂引用樣式?

在內容中使用引用可以改善您網站的用戶體驗。您可以使用它們來使選定的文本部分從其餘內容中脫穎而出,吸引讀者的注意力。

例如,您可以使用引用來引用作者和影響者的話語、出版物中的引文、客戶的推薦或向訪問您的博客的讀者強調有價值的信息。

使用引用的另一個好處是可以增加社交互動。允許用戶在 Twitter 或 Facebook 上分享引用可以幫助您獲得更多的關注者並提高品牌的社交媒體可見度。

WordPress 默認在內容編輯器中提供了一個引用塊。要添加它,只需進入 WordPress 編輯器並在內容中插入引用塊。

方法一:使用插件自訂引用樣式

自訂 WordPress 網站中的引用樣式的一種簡單方法是使用像 Spectra – WordPress Gutenberg Blocks 這樣的插件。這是一個免費的 WordPress 插件,會在內容編輯器中添加額外的塊,包括可自訂的引用塊。

首先,您需要安裝並啟用 Spectra – WordPress Gutenberg Blocks 插件。啟用後,從 WordPress 管理員側邊欄訪問 Spectra » Blocks 頁面。

打開喜歡的頁面或文章編輯,然後點擊屏幕左上角的 “+” 按鈕,將引用塊添加到您的內容中。接下來,在引用區域輸入文本,然後從右側面板中配置引用塊的佈局。

在右側面板中的“樣式”選項卡中,您可以更改引用圖標大小、背景大小等。最後,點擊頂部的“發布”或“更新”按鈕來保存您的設置。

方法二:使用自訂 CSS 自訂引用樣式

如果您不想使用 WordPress 插件,則添加自訂 CSS 是另一種自訂引用樣式的方法。使用 WPCode 插件可以輕鬆地添加自訂 CSS 代碼。首先,您需要安裝並啟用 WPCode 插件。

啟用後,從 WordPress 管理員側邊欄訪問 Code Snippets » + Add Snippet 頁面。在“添加您的自訂代碼(新片段)”下點擊“使用片段”按鈕,然後選擇代碼類型為 “CSS 片段”,並在“代碼預覽”框中輸入自訂的 CSS 代碼。

在插入選項中選擇“自動插入”模式,這樣代碼激活後將自動更改引用塊的外觀。最後,將“非活動”切換至“活動”並點擊“保存片段”按鈕。

您現在可以在 WordPress 頁面或文章中插入引用塊,然後訪問您的網站以查看已自訂的引用樣式。

附加:在 WordPress 側邊欄中顯示隨機引用

如果您想在側邊欄中顯示客戶的推薦,可以安裝並啟用 Quotes and Tips 插件。啟用後,訪問 Quotes » Add New 頁面,在文本編輯器中輸入客戶的引用,然後點擊“發布”按鈕。接下來,複製 Quotes » Settings 頁面中的短代碼,並將其粘貼到您喜歡的側邊欄或小工具區域中。

我們希望這篇文章能幫助您學習如何在 WordPress 主題中自訂引用樣式。您還可以瀏覽我們的指南,了解如何選擇最佳設計軟件以及最佳免費網站託管服務。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>