3個方法將自訂CSS新增到WordPress網站

WordPress網站自訂CSS

您想添加自訂CSS來更改您網站的外觀嗎?

添加自訂CSS可幫助您更改網站的佈局和外觀,這是透過預設選項無法實現的。使用 FTP 對大多數初學者來說太混亂、困難了,但是還有其他方法可以添加自訂CSS。

在本文中,我們將提供3個方法讓您添加CSS到您的WordPress網站。

為什麼要在WordPress網站中添加自訂CSS?

CSS 全名是Cascading Style Sheets,中文又稱為階層樣式表,是專為定義網頁版面設計(layout)而發明,是一種幫助您設計WordPress 網站樣式的語言。透過CSS,我們能指定文件中各項HTML 元件的視覺樣式,例如顏色、大小、佈局和顯示。

添加自訂CSS有助於客製網站的設計和外觀,這是透過預設選項無法實現的。它給了你更多的控制權,你可以用幾行代碼輕鬆地改變你的WordPress 主題。

例如,假設您想更改每個文章的背景顏色,而不是在整個網站上使用相同的顏色。透過添加自訂CSS 代碼,您可以客製化特定文章或頁面的背景。

同樣,您也可以使用額外的CSS更改購物車網站中產品類別的樣式和外觀。

另外還有幾個原因:

  • 如果您直接修改主題並更新,那麼您的修改可能會不見。透過使用自訂CSS,可以確保保留您的修改。
  • 使用自訂CSS可以加快開發時間。
  • 自訂CSS在主題的原始CSS之後加載,因此可以覆蓋特定的CSS語句,而無需從頭開始編寫整個CSS檔案。

方法 1:使用主題自訂頁面添加自訂CSS

從 WordPress 4.7 開始,使用者現在可以直接從 WordPress 管理區域添加自訂 CSS。這非常簡單,您將能夠立即透過實時預覽看到您的更改。

首先,您需要從 WordPress 後台側欄 -> 外觀 -> 自訂頁面

WordPress自訂CSS-4
網站後台->外觀->自訂

或是登入您的管理員帳號後,從網站前台上方的 admin bar 前往自訂頁面。

WordPress自訂CSS 3
網站前台進入自訂頁面

在左側設定列表中可以看到各個可設定 WordPress 網站外觀的項目,點擊「附加的 CSS」,就可以在網站中添加自訂CSS。

WordPress自訂CSS 2 1
附加的CSS

在這個頁面的區塊中可以加入網站專屬的CSS程式碼以自訂網站的外觀及版面配置。

添加有效的CSS程式碼後,能夠在網站的右側區域的即時預覽中看到它的呈現。

WordPress自訂CSS 1
調整CSS及預覽

您可以繼續添加自訂CSS代碼,直到您對它在您網站上的外觀感到滿意為止。

完成後不要忘記點擊上方的「發布」按鈕

注意:您使用主題自訂添加的任何自訂CSS 僅適用於該特定主題。如果您想將它與其他主題一起使用,則需要使用相同的方法將其複製並貼到您的新主題中。

方法 2:使用外掛添加自訂CSS

第一種方法只允許您為當前啟用的主題保存自訂CSS。如果更改主題,則可能需要自行將自訂CSS 複製並貼到新主題自訂頁面內。

如果您希望無論使用哪個 WordPress 主題都能應用自訂CSS,那麼可以使用外掛來添加自訂CSS。

首先,先到網站後台安裝外掛的地方,安裝並啟用Simple Custom CSS外掛

啟用後,只需到後台的 外觀 -> Custom CSS,並寫下或貼上您的自訂CSS。

Simple Custom CSS Plugin
Simple Custom CSS

不要忘記按「Update Custom CSS」按鈕來保存您的更改。

更新後就可以到前台查看您的 WordPress 網站,看看自訂CSS的呈現。

方法3:在主題中添加自訂CSS

上述所有方法都推薦給初學者,進階使用者還可以將自訂CSS直接添加到他們的主題中。

但是,不建議將自訂CSS片段添加到您的父主題中,如果您不小心更新主題而沒有保存您的自訂更改,您的自訂CSS將會丟失

最好的方法是改用子主題。但是,許多初學者不想創建子主題,除了添加自訂CSS 之外,初學者通常真的不知道他們將如何使用子主題。(建議閱讀:什麼是子主題?WordPress佈景主題介紹

若不會使用子主題,最好的方法還是使用自訂CSS 外掛,它讓您能夠獨立於主題之外存儲自訂CSS。這樣,您可以輕鬆切換主題,而您的自訂CSS 仍將存在。

資料來源:How to Easily Add Custom CSS to Your WordPress SiteCSS

延伸閱讀:

如何修改WordPress登入頁面網址?必知的提升網站安全性技巧

WordPress登入

WordPress登入的重要性

WordPress Elementor漏洞影響7百萬個網站
WordPress登入的重要性

安裝WordPress後,您將可以進入您網站的管理後台(儀表板),您可以根據需求設置您的網站並進行一些更改。

您不可能無權進入網站的管理頁面,登入頁面是使其他人無法訪問您的 WordPress 網站的管理“端”。

而您也應該小心保護登入的帳號密碼,不要隨意將網站管理員的帳號密碼透露給他人。若其他人需要進入後台,可以根據需求透過新增使用者,並修改使用者權限,提供一組帳號密碼給他。

如何進入WordPress登入頁面

一般默認的WordPress登入頁面網址很簡單。在您的WordPress網站網址尾巴添加/admin/ (例如:www.yoursite.com/admin/) 或 /login/ (例如:www.yoursite.com/login/ )會將您重新導向到登入頁面。

通常,這兩個應該直接帶你到WordPress登入頁。如果這沒有發生,還有一種到達登入頁面的其他方法:您可以在網站網址末端添加 /wp-login.php,例如:www.yoursite.com/wp-login.php 。

如何在子目錄或子域上找到WordPress登入網址

這些方法都適用於標準和新的WordPress網站安裝後的進入點,但是您可能已將WordPress安裝在您域的子目錄中www.yoursite.com/wordpress/,例如.blog.yoursite.com/

如果是這種情況,您需要在子目錄或子域的右斜槓(即/符號)之後附加上述路徑之一:

  • www.yoursite.com/wordpress/login
  • www.yoursite.com/wordpress/wp-login.php

無論使用哪一個,它們都應該將帶您到WordPress登入頁面,如果您不想忘記它,可以將登入網址加入書籤。

或者,在WordPress登入時有一個“記住我”選項,這將讓您在這幾天內保持登入狀態,可以隨時進入管理後台,而無需再次登入(基於您的 cookie 的設置方式):

WordPress登入 -rab
WordPress 登入頁面

透過 WordPress 登入頁面登入是一項重要但容易完成的事,您只需要電子郵件或使用者名稱和密碼,若您的網站沒有發生任何問題或惡意行為,那麼您很幸運。

但是,您的網站也有可能成為攻擊目標。

我們該如何預防呢?有效提升網站的安全性呢?

讓我們修改網站的登入頁網址吧!

為什麼要修改WordPress登入網址?

駭客和惡意攻擊者(也稱為壞人XD)不應造訪您的登入頁面,因為他們可能會進入您網站的管理頁面並開始搞事、破壞您的網站,或是獲取您的網站資料。這將會造成很大的資安問題!!

雖然使用強大、獨特又長的密碼確實有助於防止未經授權者進入您的網站後台,但當安全受到威脅時,您可以做的事情永遠不嫌多。

將壞人拒之門外的一種快速有效的方法是將WordPress登入頁面移動到一個新的、唯一的網址。更改WordPress網站的登入網址,在對抗隨機攻擊、駭客攻擊和暴力攻擊方面確實有幫助。

關於暴力攻擊:暴力攻擊是一種駭客嘗試,利用網路上洩露的常見用戶名和密碼列表,試圖惡意反覆猜測您的使用者名稱和密碼。他們所做的是嘗試數千種組合,利用腳本自動執行所有嘗試。

您的WordPress密碼或使用者名稱很有可能出現在當今世界的這些洩露列表之一中。如果您網站的WordPress登入網址是預設、默認的,將是眾所周知。那麼,可以了解駭客和惡意攻擊者訪問您的 WordPress網站是多麼容易。

這就是為什麼將WordPress登入頁面移動到不同的路徑可以幫助您提升安全性的原因!

如何修改WordPress登入網址?

更改WordPress登入頁面網址最常見且最簡單的方法是使用免費外掛,如 WPS Hide Login,目前此外掛啟用安裝的次數超過一百萬。

這個外掛非常輕巧,更重要的是,它並不會重新命名或變更核心程式檔案,而是為網站新增重寫規則,它會攔截頁面要求,能在任何 WordPress 正確執行。

這個外掛也與任何跟登入表單建立勾點的外掛相容,包含:

  • BuddyPress
  • bbPress
  • Jetpack
  • WPS Limit Login
  • User Switching
WordPress登入 2
WPS Hide Login

由於外掛啟用並設定後,wp-admin 目錄及 wp-login.php 便無法存取,因此網站管理員應先將新的登入網址加入書籤或記住新的網址。停用這個外掛後,便能將網站完全還原至之前的狀態。

下載外掛並啟用後,可以根據以下步驟設定:

  1. 從後台右側邊欄的 設定 —> WPS Hide Login
  2. 登入網址添加新的登入網址路徑,這邊你輸入自己想設定的值就好,但記得一定要是英文或是數字組成
  3. 重新導向網址添加特定的重定向網址。當有未登入的人員試圖存取 wp-login.php 頁面及 wp-admin 目錄時,將他重新導向至指定網址404錯誤頁面,維持預設就可以了,除非有特別需求再調整。
  4. 點擊儲存設定
WordPress登入 3
WPS Hide Login 設定

*重要:點擊「儲存設定」按鈕後,新 登入頁面將生效。因此,舊登入網址將不再有效!您需要更新您的書籤。如果修改路徑後發現沒有生效,可以清除一下網站快取測試看看,或用無痕視窗嘗試前往後台登入路徑。如果有任何問題,您可以隨時透過刪除外掛來恢復正常。

更改網站登入網址還可以幫助防止常見的 WordPress 錯誤,例如“ 429 請求過多”。這通常是在使用者在一定時間內發送過多請求(速率限制)時由服務器生成的。這可能是由機器人或腳本造訪您的登入網址引起的,真正的網站使用者很少會導致此錯誤。

429 too many requests 2
429錯誤

忘記登入網址、WordPress無法登入怎麼辦?

可以使用虛擬主機內的 cPanel 介面(管理主機面板),找到 File Manager(檔案管理員功能),連接到你的虛擬主機內部;或者用FTP軟體連接到您的主機。

然後前往資料夾 –> public_html / wp-content / plugins ,找到 WPS Hide Login 資料夾,並隨意修改資料夾名稱。這樣會使 WordPress 找不到 WPS Hide Login 外掛路徑,而使其失效。

接著再將/wp-admin 路徑添加到您的網站網址後端,就可以重新連回WordPress默認的後台登入頁面了。

順利登入到WordPress後台之後,要記得把原來修改的資料夾名稱更改回來,WPS Hide Login 才會順利運作。

如何解決WordPress登入的最常見問題

登入WordPress網站是一項快速而簡單的任務。然而,一些使用者在嘗試登入他們的WordPress網站時可能遇到了一些問題。此類問題通常屬於以下情況之一:

  • 密碼相關的問題
  • cookie 相關的問題

讓我們看看如何解決它們!

WordPress登入:忘記密碼

如果您無法登入,則可能是您的登入憑據有問題。

因此,您應該做的第一件事就是檢查您輸入的使用者名稱和密碼是否真的正確,這是我們大多數人常犯的錯誤,儘管很少見。

如果沒有,您可能想在嘗試其他操作之前更改您的WordPress密碼。為此,請點擊忘記密碼,登入區塊下方的連結:

您將被重新導向到一個頁面,會詢問您的使用者名稱/電子郵件,並且網站會發送一個新密碼到您的信箱:

WordPress登入 4
忘記密碼

使用 phpMyAdmin 手動重置WordPress密碼

如果忘記密碼的操作還是沒辦法讓您登入網站,事情會變得有點複雜,因為您需要進行手動密碼重置。如果您不會使用資料庫文件,請不要這樣做。(這邊也不特別進行教學,若有需求可以聯絡我們唷!)

可以透過編輯資料庫中的密碼文件來手動重置您的WordPress登入密碼,如果您可以進入主機中的phpMyAdmin,這應該不難。

在對資料庫文件進行任何編輯之前,請一定要備份您的網站,以防出現問題。

WordPress登入:Cookies

在某些情況下,由於與 cookie 相關的問題,您可能無法登入。如果是這樣,您通常會遇到以下錯誤:

錯誤:您的瀏覽器阻止或不支持 Cookie。您必須啟用cookie才能使用 WordPress。

cookies are blocked or not supported
Cookies ERROR

WordPress登入依賴於 cookie 來工作,如果它們被禁用或無法正常工作,您可能會在登入頁面上遇到問題。首先要檢查的是您的瀏覽器是否啟用了 cookie:

這個情況經常在最近搬家的WordPress網站和WordPress多站網站上看到這種情況。有時,只需刷新您的瀏覽器並嘗試再次登入,實際上就可以解決此錯誤。您也可以嘗試清除瀏覽器快取或以無痕模式打開其他瀏覽器。

您的WordPress登入頁面是授予您訪問網站的入口。如果您無法成功登入,那麼您只是這個網站訪客。

這就是為什麼您應該學習如何到達這個關鍵頁面,這樣就不會在每次需要登入到WordPress網站時浪費很多時間。

想稍微提高您的網站安全性嗎?使用您選擇的特殊路徑取代默認的WordPress登入網址,並僅與可信賴的人共享這個網址!

資料來源:How to Find Your WordPress Login URL (Change It, Lock It Down)

延伸閱讀: