Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.

Method 1: Using WordPress’ Built-in Custom CSS Feature

WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.

1. Access the Customizer
   • Log in and go to Appearance > Customize.

2. Select “Additional CSS”
   • In the left sidebar, click 額外的 CSS. A text box will appear where you can enter your CSS code.

3. Add Your Custom CSS
   • Type in your code. For example:

4. 預覽與發佈
   • You’ll see a live preview of changes. Once you’re happy, click 發表.

Best For: Simple adjustments, no theme file edits needed.

Method 2: Using the Child Theme’s Style.css File

It’s better to use a child theme’s style.css file for more significant changes. This way, your edits stay safe even after theme updates.

1. Enable a Child Theme
   • If you still need to start using one, create or install a child theme. Plugins like Child Theme Configurator make it easy.

2. Access the Style.css File
   • 在 Appearance > Theme File Editor, select your child theme’s style.css 檔案。

3. Add Your CSS
   • Add your custom CSS at the bottom of the file. Example:

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

4. 儲存變更
   • 按一下 Update File to save.

Best For: Bigger style changes that should stick around after updates.

Method 3: Adding Custom CSS with a Plugin

If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.

• Simple Custom CSS and JS: Lightweight and easy to add CSS and JavaScript.
• WPCode: Adds CSS site-wide or per page.
• SiteOrigin CSS: Visual editor for beginners.

Example Using WPCode:

1. 安裝 WPCode
   • 前往 外掛程式 > 新增 外掛程式, 搜尋 WPCode, install, and activate.

2. 建立一個 New CSS Snippet
   • Head to Code Snippets > Add Snippet.選擇 CSS Snippet.

3. 選擇位置
   • For CSS to work site-wide, select Site-Wide Header.

Best For: Easy CSS management without touching theme files.

Method 4: Adding Custom CSS via Page Builders (Elementor, Divi)

Page builders like Elementor and Divi usually have CSS options built-in, making it simple to manage styles.

In Elementor:

1. Select Element and Access 進階 設定
   • In Elementor, select an element, go to 進階 settings, and find 自訂 CSS (Elementor Pro).

2. Enter CSS Code
   • Use the selector keyword to target the element. Example:

selector { background-color: #333; color: #fff; }

In Divi:

1. Go to Theme Options
   • 導覽到 Divi > Theme Options > Custom CSS.

2. Enter and Save CSS Code
   • Add your custom CSS and save.

Best For Those already using page builders with easy access to custom CSS.

Method 5: Directly Adding CSS via FTP or Code Editor

If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.

步驟：

1. Connect via FTP
   • Use an FTP client (like FileZilla) to connect to your site.
2. Navigate to the Theme Folder
   • Go to wp-content/themes/your-child-theme/ and open style.css.

3. Edit and Upload
   • Add your custom CSS, save, and upload.

Best For: Advanced users needing complete control.

常見問題

1. Why isn’t my custom CSS working?

Clear your browser cache or any site caching plugins, as caching might be blocking updates.

2. How do I prevent CSS from being lost during updates?

Use a child theme or plugin to store CSS rather than modifying the parent theme’s files.