是否想嘗試編輯WordPress CSS,但不知道從哪裡開始?使用CSS樣式,您可以全局或在某些頁面上編輯網站的外觀。添加顏色,隔開某些元素,設計佈局,並基本上完全改變WordPress主題中的內容。

如果您想更熟悉WordPress的開發環境,或者只是更好地控製網站的外觀,則需要知道如何在WordPress中添加CSS(以及如何更改已經存在的內容)。

通過編輯主題並包括自己的其他CSS,您將可以優化網站上的每個視覺元素。今天,我們將仔細研究它。

準備開始?我們開始做吧!

什麼是CSS編輯?

CSS代表級聯樣式表,是除CSS之外最受歡迎的網絡語言 的HTML。他們兩個齊頭並進 CSS用於設置HTML元素的樣式。 HTML奠定了網站外觀的基礎,而CSS用於進一步設計網站樣式。

w3school

CSS代碼示例(來源:w3schools.com)

CSS使您能夠 使網站響應,添加顏色, 更改字體,修改佈局,並通常對網站的視覺效果進行微調。像HTML和JavaScript一樣,CSS是前端客戶端語言,這意味著它在用戶端而不是後端服務器上執行。

當深入研究WordPress開發時,HTML,CSS,JavaScript和 的PHP 是您需要了解的語言。這就是核心 不育系 是內置的 許多主題 和 外掛程式.

但是即使你不是一個 網頁設計者 要么 開發商,最好選擇一些CSS,因為您可以使用它來移動或設置網站上的元素的樣式,或者對主題進行細微的美學更改以更好地適合您。

/ *點擊鳴叫* /
正文a.novashare-ctt {
顯示:塊;
背景:#00abf0;
邊距:30px自動;
填充:20px 20px 20px 15px;
顏色:#ffffff;
文字修飾:無!重要;
box-shadow:無!重要;
-webkit-box-shadow:無!重要;
-moz-box-shadow:無!重要;
邊框:無;
左邊框:5px實心#00abf0;
}
正文a.novashare-ctt:hover {
顏色:#ffffff;
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt:visited {
顏色:#ffffff;
}
正文a.novashare-ctt * {
指針事件:無;
}
正文a.novashare-ctt .novashare-ctt-tweet {
顯示:塊;
font-size:18px;
行高:27px;
底邊距:10px;
}
正文a.novashare-ctt .novashare-ctt-cta-container {
顯示:塊;
溢出:隱藏;
}
正文a.novashare-ctt .novashare-ctt-cta {
浮動:正確;
}
正文a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
向左飄浮;
}
正文a.novashare-ctt .novashare-ctt-cta-text {
font-size:16px;
行高:16px;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon {
左邊距:10px;
顯示:inline-block;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直對齊:中間;
高度:18px;
}
/ *簡單+簡單備用主題* /
正文a.novashare-ctt.novashare-ctt-simple {
背景:無;
填充:10px 0px 10px 20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
填充:20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple:hover,正文a.novashare-ctt.novashare-ctt-simple-alt:hover {
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
顏色:#00abf0;
}
正文a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
顏色:#008cc4;
}

WordPress和CSS

在WordPress中,CSS有點不同。它的 由主題控制,由模板文件,模板標記以及CSS樣式表組成。儘管這些都是由您的主題生成的,但是所有這些都可以由您編輯。

模板文件 將網站的各個部分分成幾個部分(例如header.php或archive.php),以及 模板標籤 用於調用它們以及數據庫中的其他內容。這些文件實際上主要由PHP和HTML組成,儘管您可以根據需要添加CSS。

您真正要尋找的是 樣式表或style.css。要更改網站的外觀,您需要學習 如何添加和編輯代碼 在此文件中。

如何使用CSS自定義您的WordPress主題

如果你想 自定義您的主題 並使用CSS更改網站的外觀,則需要添加自己的代碼或編輯已有的代碼。有多種方法可以添加CSS,而無需觸摸任何主題文件,但是要更改現有的主題代碼,您將必須訪問網站的樣式表。

進行這些更改時,您應該了解一件事:什麼時候 您的主題更新,您所做的任何修改 style.css, functions.php,否則其他主題模板文件將被刪除。一般而言,如果您不使用編輯器,則不應在編輯器中直接更改網站。 兒童主題.

樣式表就像您網站的“說明列表”一樣,準確設置樣式和設置CSS代碼的方式。這是您進行大部分編輯的地方,但我們還將向您展示如何訪問其他主題模板文件,例如 header.php和footer.php.

有兩種訪問WordPress網站樣式表的方法:通過 WordPress儀表板 或通過 FTP客戶端。我們將同時介紹它們。

自己這樣做不舒服嗎?考慮 聘請WordPress開發人員 為您處理這一步驟。

在資訊主頁中編輯WordPress CSS

訪問CSS樣式表的最簡單,最方便的方法就是在WordPress儀表板中。無需安裝FTP程序或 代碼編輯器。您可以使用內置的語法突出顯示和功能文檔直接編輯任何文件。

在對核心文件進行任何重大編輯之前,您應該始終 備份您的WordPress網站。如果您是CSS的新手,很容易不小心犯一個會破壞您網站外觀的錯誤,而且很難弄清楚如何還原所做的更改。

完成備份和子主題後,登錄到後端。您可以通過以下方法找到編輯器: 外觀>主題編輯器.

您應該看到一個彈出窗口,警告您不要直接編輯這些文件。不用擔心,只需單擊“我了解”。進行任何重大更改之前,請先使用子主題並備份網站,這只是警告。遵循這些步驟,可以安全地進行編輯。

edit themes

直接編輯WordPress文件

現在您進入了!默認情況下,您應該在樣式表上,但如果沒有,請查看右側的菜單以查看主題文件。

除了style.css,您還可以訪問模板文件,例如functions.php,header.php和single.php。所有這些都會影響您網站上某些頁面的行為。

但是你應該 熟悉PHP 在深入研究這些特定文件之前。

Editing the style.css stylesheet in a WordPress theme

在WordPress主題中編輯style.css樣式表

請記住:您在此處所做的大多數CSS更改都是全局的。例如,如果將H1標頭更改為某種字體,則它將對網站上的每個頁面生效。您將需要使用特殊的語法來自定義特定頁面的樣式。

直接編輯主題文件

如果您無法訪問主題編輯器或更喜歡通過FTP進行工作該怎麼辦?使用後端編輯器更容易,但是某些主題或插件可能會禁用它。如果是這樣,您需要 通過FTP連接到您的網站.

的FTP或文件傳輸協議,可讓您遠程訪問和修改網站的文件。您需要做的第一件事是 下載FileZilla 或任何其他FTP客戶端。

接下來,您應該聯繫您的主機並詢問您的FTP憑據(主機,端口和用戶名/密碼(如果適用))。如果主機具有儀表板,則可以通過登錄找到它們。

FTP credentials in MyKinsta

MyKinsta中的FTP憑據

Kinsta用戶的憑據位於 MyKinsta儀表板站點> SFTP / SSH.

擁有它們後,啟動FTP客戶端並輸入該信息。如果不起作用,請嘗試在網址中的網址前添加“ sftp://” 主辦 部分。

FileZilla

使用FileZilla

進入後,您可以通過單擊 wp內容 文件夾將其打開,然後打開主題的文件夾(例如 Ť高二十 主題),然後滾動直到看到style.css。

雙擊將其打開(或右鍵單擊並選擇 查看/編輯)並進行修改。記住要保存並上傳回服務器。

如果您需要編輯其他 模板文件 像home.php,single.php,archive.php,您可以在style.css所在的文件夾中找到它們。

編輯主題文件,無論是通過FTP還是儀表板,都並非總是必需的。實際上,如果只添加一些額外的代碼,最好避免這樣做。

對於少量添加,這是將CSS添加到WordPress網站的最佳方法。

如何在WordPress中添加自定義CSS

如果您不想編輯現有的CSS代碼,而只想添加自己的樣式,則強烈建議您使用以下方法之一:WordPress定製程序或專用插件。

首先,通過這些方法之一添加的CSS代碼更容易訪問和使用。如果您以後要進行修改,則不必擔心將新CSS放在錯誤的位置或忘記添加位置。

另外,通過這些方法之一添加的CSS不會在主題更新時丟失(儘管如果您更新主題,它可能仍會消失) 改變主題).

這意味著您不需要使用子主題,並且如果出現問題,只需刪除剛剛添加的CSS。

請注意,您仍然應該 保留您網站的備份,因為有些人報告說在重大更新期間偶爾會丟失CSS。不過,此方法比直接編輯主題文件可靠得多。

雖然您可以只是將代碼添加到style.css並每天調用它,如果您不想 創建一個子主題,對主題中的現有CSS進行重大修改,並可能最終刪除所有工作,因此最好使用WordPress定製程序中的“其他CSS”選項或安裝插件。

1.通過WordPress Customizer編輯CSS

而不是使用主題編輯器,請嘗試此。 登錄到您的WordPress後端 然後點擊 外觀>定制 打開主題自定義屏幕。您將看到網站的實時預覽,左側選項用於自定義元素,例如顏色,菜單或其他 小部件.

在此菜單的最底部,您應該找到 額外的CSS 框。

單擊以打開它。您將進入一個帶有代碼輸入框和一些說明的新屏幕。附加CSS屏幕包括與主題編輯器一樣的語法突出顯示,以及使您知道代碼是否錯誤的驗證。

additional CSS

WordPress中的其他CSS

您編寫的任何代碼都會自動顯示在右側的預覽區域中,除非出現錯誤(儘管您仍然可以選擇將其發布)。

完成工作後,您可以發布代碼,安排代碼生效的時間,或將其另存為草稿以備後用。您甚至可以獲取預覽鏈接以與他人共享。

如您所見,“附加CSS”頁面在許多方面都比“主題編輯器”更強大,並且比添加核心文件更適合添加代碼。

您在此處編寫的CSS代碼會覆蓋主題的默認樣式,並且在主題更新時不會消失。如果您無法在預覽中實時看到它,請仔細檢查您是否在CSS代碼中使用了正確的選擇器。

就像主題編輯器一樣,默認情況下CSS是全局的,但是您可以編寫代碼 定位到特定頁面.

一個缺點是, 你應該換主題嗎,您編寫的所有內容都會被刪除。在移至新主題之前,請確保備份CSS,否則可能會丟失很多工作。

如果您正在努力使用此選項,或者想要一個可跨主題使用並且可以更輕鬆地定位特定頁面的解決方案,則應嘗試使用插件。

2.使用插件將自定義CSS添加到WordPress

您可能有幾個原因想要使用插件將CSS添加到WordPress。雖然該功能類似於“其他CSS”菜單,但即使您切換/更新主題,樣式也通常會保留下來。

您可能還會更喜歡他們的UI,或者喜歡自動完成等額外功能。有些插件甚至可以讓您通過構建CSS 下拉菜單,而不必自己編寫。

簡單的自定義CSS

簡單的自定義CSS 由於易於使用,界面最少和後端輕巧,因此是最受歡迎的CSS編輯器插件。簡而言之,這是一個很小的WordPress插件,具有很大的優勢。

是否需要為您的客戶站點提供快速,安全且對開發人員友好的託管? Kinsta在構建時就考慮了WordPress開發人員,並提供了許多工具和功能強大的儀表板。 查看我們的計劃

Simple Custom CSS WordPress plugin

簡單的自定義CSS WordPress插件

設置輕而易舉,您不會看到 對性能的負面影響。它適用於任何主題,並包括語法突出顯示和錯誤檢查。

簡單的自定義CSS和JS

Simple Custom CSS and JS WordPress plugin

簡單的自定義CSS和JS WordPress插件

簡單的自定義CSS和JS 是一個很好的選擇。它還使您可以定位頁眉,頁腳,前端,甚至管理後端。

SiteOrigin CSS

SiteOrigin CSS WordPress plugin

SiteOrigin CSS WordPress插件

SiteOrigin CSS 是另一個選項,還包括傳統的CSS編輯器。您可以在它和 視覺編輯器 隨時。

WP添加自定義CSS

WP Add Custom CSS WordPress plugin

WP添加自定義CSS WordPress插件

如果您想將CSS添加到特定頁面, WP添加自定義CSS 在編輯屏幕上添加了一個自定義CSS框,還提供了全局樣式。

CSS英雄

您可能還需要考慮嘗試使用可視CSS編輯器。這些將所有復雜的編碼轉換成一系列易於使用的輸入字段和下拉菜單,這些菜單將為您處理所有編程。

CSS Hero

CSS英雄

CSS英雄 是一款高級視覺編輯插件,具有一些非常強大的功能(動畫,特定於設備的編輯以及無損編輯等)。

在哪裡學習CSS

準備好親自學習CSS了嗎?這些初學者教程將建立基礎知識,並教您編寫自己的功能CSS代碼所需的語法。

Learn CSS

學習CSS

這可能令人生畏,但是除非您嘗試做一些真正高級的事情,否則CSS並不難!簡單的事情,例如更改背景顏色或 設置字體樣式 非常簡單,並且在線上有很多示例。

(建議閱讀: 在WordPress網站上使用50多種現代字體)

編程教程 您也會在互聯網上發現完全免費。有 那裡有很多信息 不收取任何費用。

以下是一些涵蓋初學者最佳CSS教程的示例。

  • W3Schools CSS教程:這裡有大量信息:深入的教程,示例和參考供您使用。 W3Schools的教程盡可能簡單易懂,因此,即使您是一個初學者,這也是一個很好的起點。
  • Codeacademy學習CSS:通過六個免費的實踐課程,您將學習CSS的基礎知識。這不是簡單的視頻教程,而是一個交互式課程,可讓您使用實際代碼。使用專業版,您還將獲得測驗和自由格式項目。
  • 一小時學習CSS:很多人想學習新 程式語言,但他們沒有時間奉獻。但是,如果您僅能預留一個小時的時間,則可以通過此20部分免費課程學習CSS。即使您最終不是一個大師,您也應該對基礎有所了解。
  • WordPress用戶基本HTML和CSS簡介:正在尋找特定於WordPress的內容?如果您一直在努力編寫HTML和CSS,那麼本課程非常適合您。它是付費的,但附帶52個講座和五個小時的視頻供您學習。

概要

作為WordPress用戶,起初加入CSS可能會造成混淆。但是,一旦您知道如何編輯主題文件以及在何處添加樣式,就不會再有麻煩了。

可以從後端或通過FTP編輯主題文件以更改站點的外觀,但是通常應避免這種情況,除非您需要編輯現有代碼。

如果您只想添加自己的CSS,請使用“ 外觀>定制,如果您需要更強大的功能,請嘗試使用插件。

編輯到樣式表 除非您使用 兒童主題。 對於其他CSS,情況並非如此。您的代碼可以安全地進行更新,但是請不要忘記:當您執行以下操作時,只有插件會保留CSS 改變主題.

無論選擇哪種方法,都應始終保持 網站的常規備份,包括您添加的樣式表和自定義代碼。現在是時候使用我們提供的資源來複習CSS基礎。

造型愉快!

建議閱讀: 網上最佳網頁設計課程