如何在 WordPress 中更改 Gravatar 圖像大小

08/03/2023

Gravatar 是用來代表評論者或博客文章作者的圖像。WordPress 主題通常設定了固定大小的 Gravatar,但是您可能希望調整圖像的大小,使其更符合您的網站設計。

在本文中,我們將向您展示如何在 WordPress 中更改 Gravatar 圖像的大小。

為什麼要更改 WordPress 中的 Gravatar 圖像大小?

Gravatar 代表 Global Recognized Avatar,它是一個網絡服務,可以讓您創建個人資料並與您的電子郵件地址關聯頭像圖像。大多數 WordPress 主題會在用戶的評論旁顯示 Gravatar,一些主題還會在作者簡介框中顯示 Gravatar。

即使用戶沒有 Gravatar 帳戶,您的網站仍然會顯示默認的 WordPress Gravatar。

有時,您可能希望更改主題的 Gravatar 大小。例如,您可能希望使它們變大,以便在評論區域中顯得更加突出,吸引訪問者的注意。

接下來,我們來看看如何在 WordPress 網站上更改 Gravatar 圖像大小。您可以使用以下快速鏈接直接跳轉到您想要使用的方法:

  • 方法一:使用完整網站編輯器更改 Gravatar 大小(僅限區塊主題)
  • 方法二:編輯 comments.php 更改 Gravatar 大小(適用於所有主題)
  • 方法三:編輯 style.css 更改 Gravatar 大小(適用於所有主題)
  • 方法四:使用代碼更改作者簡介中的 Gravatar 大小

方法一:使用完整網站編輯器更改 Gravatar 大小(僅限區塊主題)

如果您使用的是如 ThemeIsle Hestia Pro 或 Twenty Twenty-Three 這樣的區塊主題,那麼您可以通過完整網站編輯器更改 Gravatar 大小。這種方法不適用於所有主題,所以如果您沒有使用啟用了區塊的主題,那麼我們建議您使用方法二。

在 WordPress 儀表板中,前往 外觀 » 編輯器。

現在,您將來到完整網站編輯器並看到若干設置來編輯 WordPress 網站的各個部分。要更改 WordPress 評論的 Gravatar 大小,請點擊左側面板頂部的搜索欄圖標。

此時,只需要查找評論模板部分。找到後點擊。

在下一頁,您將看到一些關於評論模板部分的信息。要編輯評論模板部分,請點擊鉛筆按鈕。您將被引導到編輯界面。

現在,您可以點擊實時預覽中的任何 Gravatar。在右側菜單中,選擇“區塊”標籤(如果尚未選中)。

您可以通過拖動“圖像大小”滑塊來使 Gravatar 變大或變小。當您移動滑塊時,所有 Gravatar 都會自動更新,因此您可以嘗試不同的大小以查看哪個效果最好。

此外,您可以啟用“鏈接到用戶個人資料”設置。當用戶點擊 Gravatar 時,他們將被引導到您的網站上的評論者個人資料頁面。

當您對更改感到滿意時,請點擊保存按鈕。

現在,如果您訪問 WordPress 網站上的任何評論區域,就可以看到所做的更改了。

方法二:編輯 comments.php 更改 Gravatar 大小(適用於所有主題)

如果您沒有使用區塊 WordPress 主題,那麼您可以通過編輯主題的代碼來更改 WordPress 評論的 Gravatar 大小。這種方法需要您編輯主題文件,所以對初學者不太友好。但是,這種方法應該適用於大多數 WordPress 主題。

首先,您需要使用 FTP 客戶端(如 FileZilla)連接到您的 WordPress 網站,或者您可以使用 WordPress 主機 cPanel 的文件管理器。如果這是您第一次使用 FTP,您可以查看我們關於如何使用 FTP 連接到網站的完整指南。

連接後,前往 /wp-content/themes/ 目錄並打開您的當前 WordPress 主題文件夾。

一旦進入,打開 comments.php 文件並查找 wp_list_comments 函數。在此函數內,您會找到 avatar_size,它設置了 Gravatar 的大小。

<?php wp_list_comments( array( 'avatar_size' => 60, 'style' => 'ol', 'short_ping' => true, ) ); ?>

您只需將 avatar_size 更改為您想要的大小。在上面的代碼片段中,這意味著將 60 更改為另一個數字。Gravatar 是正方形的,所以 WordPress 會將同一數值用於圖像的寬度和高度。這意味著您只需輸入一個數字。

更改完成後,確保保存並上傳文件回到您的 WordPress 主機帳戶。完成後,您可以訪問您的 WordPress 博客以查看更改效果。

如果 Gravatar 圖像沒有更改,可能是由於緩存。請參閱我們的指南,了解如何解決 WordPress 無法立即更新的問題。

如果 Gravatar 還是沒有更改,可能是您的主題 CSS 覆蓋了 comments.php 文件中的設置。在這種情況下,您需要嘗試下一個方法。

方法三:編輯 style.css 更改 Gravatar 大小(適用於所有主題)

要查看您的主題 CSS 是否覆蓋了 comment.php 文件,您可以使用瀏覽器的檢查工具。步驟會根據您使用的瀏覽器不同而有所差異,但在 Chrome 上,您可以右鍵單擊或按 Ctrl 鍵單擊 Gravatar,然後選擇“檢查”。

這將在新面板中顯示頁面的 HTML 和 CSS 代碼。在此代碼中,您需要關注底部面板並查找評論作者頭像的 CSS 類。

在我們的示例中,它們是 .comment-author 和 .avatar,它們包含 Gravatar 的高度和寬度值的 CSS 屬性。我們知道這是因為當我們將鼠標懸停在 CSS 代碼片段上時,Gravatar 在預覽中被突出顯示。

.comment-author .avatar { height: 42px; position: relative; top: .25em; width: 42px; }

如果 CSS 代碼中的 Gravatar 大小與您在 comments.php 文件中指定的大小不同,這意味著您的主題 style.css 文件正在覆蓋您的更改。要編輯您的 style.css 文件,您需要使用 WPCode,這是一個代碼片段插件,可以輕鬆地將自定義代碼插入主題中。這樣,您可以在不直接訪問 style.css 文件的情況下進行編輯,減少出錯的可能性。

此外,您需要保持打開檢查工具的標籤,以便您可以將評論作者 Gravatar 的 CSS 代碼複製並粘貼到 WPCode 中,然後進行編輯。

首先,在您的 WordPress 網站上安裝 WPCode。您可以閱讀我們的指南,了解如何安裝 WordPress 插件的更多信息。

然後,前往程式碼片段 » 添加片段並選擇“添加自定義代碼(新片段)”。點擊“使用片段按鈕”。

完成後,為您的新 CSS 代碼命名,可以是簡單的例如“更改 Gravatar 大小”。代碼類型選擇“CSS 代碼片段”。

現在,將 Gravatar 大小的原始主題 CSS 代碼片段複製並粘貼到代碼預覽框中。完成後,您可以更改代碼中的高度和寬度值。在我們的示例中,我們將其更改為 50px。確保設置的高度和寬度大小相同。

完成後,向下滾動到插入部分。確保選擇“自動插入”方法。至於位置,只需選擇“全站頁腳”,以便您的自定義 CSS 可以覆蓋現有的 CSS 代碼。

之後,只需點擊右上角的切換按鈕,將代碼設為“激活”,然後點擊“保存片段”。如果您訪問您的 WordPress 博客或網站,就可以看到更新的 Gravatar 圖像。

現在,我們建議先嘗試在 comments.php 文件中更改 Gravatar 大小,再使用更簡單的 CSS 方法。首先,CSS 可能會使 Gravatar 看起來模糊,特別是當您將頭像放大許多時。其次,在 comments.php 文件中更改圖像大小通常有助於您的網站加載更快。這是因為瀏覽器仍然必須下載全尺寸圖像,然後使用 CSS 調整其顯示大小。這可能會導致網站性能下降。

小貼士:有很多評論和 Gravatar 需要顯示在您的博客文章上?考慮懶加載您的 Gravatar,以便您的網站加載更快。

方法四:使用代碼更改作者簡介中的 Gravatar 大小

如果您運行的是多作者 WordPress 網站,那麼作者框可以幫助讀者了解更多關於文章作者的信息。如果您希望為您的網站添加這個功能,請查看我們的指南,了解如何在 WordPress 文章中添加作者信息框。

許多作者簡介會顯示作者的 Gravatar 和他們的簡介。要更改作者簡介框中的默認 Gravatar 大小,您需要找到添加簡介的主題文件。

只需使用如 FileZilla 或 WordPress 主機文件管理器的 FTP 客戶端連接到您的網站。連接後,前往 /wp-content/themes/ 目錄並打開您的當前 WordPress 主題文件夾。之後,打開 template-parts 文件夾。

現在,您需要找到包含 get_avatar 代碼的文件。這段代碼通常位於名為 author-bio.php、single.php 或 functions.php 的模板部分文件中。

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>"> <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

在上面的代碼片段中,您可以簡單地將數字 85 更改為您想要的大小。在其他主題中,代碼可能看起來像這樣:

get_avatar( get_the_author_meta( 'user_email' ), 85);

您只需將數字替換為您想要的數值來使 Gravatar 變大或變小。更改大小後,不要忘記保存更改。然後您可以訪問您的網站以查看新的作者簡介框。

如果 Gravatar 沒有改變,則需要按照方法三中描述的相同過程查找 style.css 文件中的頭像類。一旦找到這個類,您可以創建一個新的 WPCode 片段,並輸入新的 Gravatar 高度和寬度值。

瞭解更多改進評論區的方法

想讓您的 WordPress 評論區更上一層樓?查看這些指南,了解如何自定義評論區:

  • 如何限制 WordPress 中的評論長度(簡易教程)
  • 如何更改 WordPress 評論中的“回覆”文本
  • 如何允許用戶訂閱 WordPress 中的評論
  • 如何在 WordPress 中分頁評論(步驟說明)
  • 如何允許用戶在 WordPress 中對評論點贊或點踩
  • 如何從 WordPress 評論表單中移除網站 URL 字段

我們希望這個教程幫助您瞭解如何在 WordPress 中更改 Gravatar 圖像大小。您可能還希望了解如何設計 WordPress 評論表單或查看我們推薦的最佳 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"}
>