如何更改您的 WordPress 徽標大小(適用於任何主題)


最近我們的一位讀者問是否可以在 WordPress 中更改您的徽標大小?

您的網站徽標是您品牌的重要組成部分。 根據您使用的 WordPress 主題,有時不清楚如何更改徽標大小以使其更大或更小。

在本文中,我們將逐步向您展示如何輕鬆更改 WordPress 徽標大小。

如何更改您的 WordPress 徽標大小(適用於任何主題)

為什麼要更改 WordPress 中徽標的大小?

當您將徽標上傳到 WordPress 時,它可能並不總是正確的大小。

太小的標誌不會脫穎而出。 同時,太大的徽標最終會對您網站的設計產生負面影響。

如果您投資了自定義徽標設計,那麼您希望確保您的徽標在您的網站標題中顯示為正確的大小。

對於那些仍在徽標設計過程中的人,請參閱我們精選的最佳免費徽標製作工具。

話雖如此,我們將向您展示幾種不同的方法,您可以使用它們來更改 WordPress 中的徽標大小。

您選擇的方法將取決於您使用的 WordPress 主題,以及您編輯 CSS 代碼的舒適程度。

方法 1. 使用 WordPress 定制器更改 WordPress 徽標大小

在 WordPress 中更改徽標大小的最簡單和最簡單的方法是使用主題定制器。 但是,此方法僅在您的 WordPress 主題支持時才有效。

許多流行的主題,如 Divi、Astra、Ultra 等,都有一個內置的徽標大小更改工具。

當您在 WordPress 中上傳徽標時,這些主題可以使用簡單的滑塊輕鬆調整徽標,您可以使用該滑塊來調整寬度和高度。

筆記: 您的徽標大小將僅與您上傳的圖片一樣大,因此如果您的目標是使其更大,您需要確保上傳更大的徽標圖片。

為了本教程,我們將展示如何在 Divi、Astra 和 Ultra 主題中更改徽標,但該方法與大多數流行的 WordPress 主題類似。 如果你的主題沒有這個選項,那麼你需要使用本教程的方法2或3。

在 Divi WordPress 主題中更改 WordPress 徽標大小

首先,導航到 Divi » 主題定制器 然後單擊“標題和導航”菜單選項。

選擇 Divi 主題定制器

之後,單擊“主菜單欄”下拉選項。

您可以在此處更改徽標的大小。

選擇 Divi 主菜單欄

首先,您需要調整“菜單高度”設置。 這控制了整個導航菜單的高度,並將定義您可以製作多大的徽標。

之後,您可以更改“徽標最大高度”設置,即總菜單高度的百分比。

調整標誌高度

您可以上下調整“徽標最大高度”滑塊,直到為您的 WordPress 博客找到完美的徽標大小。

確保在退出屏幕之前單擊“發布”按鈕以保存更改。

在 Astra WordPress 主題中更改 WordPress 徽標大小

您需要做的第一件事是導航到 外觀 » 定制 然後單擊“標題”菜單選項。

Astra 主題定制

之後,單擊“站點標識”菜單選項。

在這裡,您可以輕鬆調整徽標的大小。

單擊 Astra 中的站點標識

您所要做的就是向左或向右移動“徽標寬度”滑塊。

當您移動滑塊時,您可以實時自動查看徽標大小的變化。

Astra 徽標寬度滑塊

一旦您對徽標的大小感到滿意,請確保在退出頁面之前單擊“發布”。

在 Ultra WordPress 主題中更改 WordPress 徽標大小

要在 Ultra 主題中自定義徽標大小,請導航至 外觀 » 定制,然後單擊“站點徽標和標語”導航項。

Ultra Click 網站徽標和標語

然後單擊“站點徽標”下拉菜單。

然後,選擇出現的“徽標圖像”單選按鈕。

超點擊站點徽標按鈕

現在,您可以通過在徽標圖像右側的框中輸入新尺寸來更改徽標的大小。 如果您希望圖像根據原始尺寸進行縮放,則只需在一個框中輸入新的徽標尺寸。

您可以使用左側的框更改寬度,使用右側的框更改高度。

更改徽標高度和寬度

當您輸入新尺寸時,您會看到徽標的大小實時變化。

完成自定義徽標大小後,請務必單擊“發布”按鈕。

如果上面沒有突出顯示您的主題,那麼您仍然可以使用 WordPress 定制器來自定義徽標的大小。

只需轉到 外觀 » 定制 在您使用的任何主題上,看看有哪些自定義選項可用於您的徽標或標題。

方法 2. 通過編輯 CSS 更改 WordPress 徽標大小

如果您的 WordPress 主題不支持使用 WordPress 主題定制器更改徽標大小,那麼您可以通過添加自定義 CSS 來更改大小。

您需要做的第一件事是導航到您的網站主頁。

然後,右鍵單擊頁面上的任意位置並選擇“檢查”選項。 這將打開一個檢查菜單,顯示頁面的所有代碼。

右鍵檢查

之後,您需要單擊看起來像鼠標指針的“選擇元素”圖標。

這將讓您選擇網站的徽標元素並查看代碼。

單擊選擇元素圖標

接下來,只需將鼠標懸停在您的網站徽標上,直到彈出 CSS 類。 它看起來類似於下圖。

您將使用此 CSS 類來自定義 WordPress 徽標的大小。 因此,請在記事本等文本編輯器中寫下這些內容。

標誌 CSS 類

現在您可以返回您的 WordPress 管理儀表板並導航到 外觀 » 定制. 您需要單擊“附加 CSS”菜單選項。

這將打開一個下拉菜單,您可以在其中添加自定義 CSS 代碼。

選擇其他 CSS

只需添加您之前找到的 CSS 類並指定新的圖像尺寸。 您可以使用下面的 CSS 代碼作為示例。

img.custom-logo {
     max-height: 100px !important;
}

你需要改變 img.custom-logo 上面的 CSS 類到您的主題使用的 CSS 類。

您還可以更改 max-height 到你想要的任何尺寸。

這是它在 WordPress 定制器中的外觀。

額外的 CSS WordPress 定制器

完成更改後,只需單擊“發布”按鈕即可使更改生效。

方法 3. 無需編輯 CSS 即可更改 WordPress 徽標大小

如果您不習慣編輯主題文件或添加自定義 CSS,那麼此方法適合您。

通過使用 WordPress 樣式插件,您可以像使用拖放頁面構建器一樣對您的網站進行視覺更改。

我們推薦使用 CSS Hero。 這是一個樣式器插件,可讓您編輯 WordPress 網站上幾乎所有的 CSS 樣式,而無需編寫任何 CSS 代碼。

交易: WPBeginner 讀者可以通過我們的 CSS Hero 優惠券代碼獲得 34% 的折扣。

您需要做的第一件事是安裝並激活插件。 有關更多詳細信息,請參閱有關如何安裝 WordPress 插件的分步指南。

激活後,您需要單擊“繼續進行產品激活”按鈕以激活插件。 它位於已安裝插件列表的正上方。

激活 CSS Hero 插件

這將帶您進入一個屏幕,您可以在其中輸入用戶名和密碼。 只需按照屏幕上的說明進行操作,一旦您的帳戶通過驗證,您就會被重定向回您的網站。

之後,單擊 WordPress 管理工具欄頂部的“使用 CSS Hero 自定義”按鈕。

使用 CSS Hero 自定義

這將帶您進入您的網站,並在其上運行 CSS Hero。 CSS Hero 使用 WYSIWYG(所見即所得)編輯器。

當您單擊頁面的任何元素時,它會在左側顯示一個工具欄以進行自定義。

CSS 英雄預覽

接下來,單擊頁面頂部的 WordPress 徽標。

之後,單擊“顯示高級道具”鏈接。

點擊顯示高級道具

這為您提供了更多 CSS 自定義選項。

然後,找到“措施”框。 在這裡,您會找到名為“最大寬度”和“最大高度”的選項。

您想將這些更改為您喜歡的圖像大小。 如果您希望圖像保持相同的尺寸,則只需更改高度或寬度。

定義徽標寬度和高度

您所做的更改將自動顯示在您的頁面上。

更改徽標大小後,您需要單擊“保存並發布”以使更改生效。

我們希望本文能幫助您更改 WordPress 徽標大小。 您可能還想查看我們為小型企業提供的最佳實時聊天軟件的專家選擇,以及我們的商業網站必備 WordPress 插件列表。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 你也可以找到我們 推特 和臉書。