在 WordPress 文章中部份使用自訂的 CSS

在 WordPress 文章中部份使用自訂的 CSS

1. 編輯自訂的 CSS 檔, 例如 /var/www/html/mycss/rexcss01.css, 使用 rexcss01 來當 class id, 範例如下:

table.rexcss01, table.rexcss01 th, table.rexcss01 td {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
padding: 5px;
vertical-align: middle;
width: auto;
}
table.rexcss01 th {
text-align: center;
}
pre.rexcss01 {
background-color: black;
color: #bbbbbb;
}

檔案權限要打開讓網站服務帳號 www-data 可以存取。

2. 在 WordPress 的文章第一行載入 CSS 檔:

<link rel="stylesheet" href="/mycss/rexcss01.css">

文章使用文字模式編輯且千萬不要切換成預覽方式編輯, 不然 link 或 style 此類的 tag 和內容會被自動移除!

3. 在想要使用自訂 CSS 的 tag 上加上 class id, 例如:

<table class="rexcss01">
<thead><tr><td>左</td><td>右</td></tr></thead>
<tbody>
<tr><td>1</td><td>甲</td></tr>
<tr><td>2</td><td>乙</td></tr>
</tbody>
</table>

4. 範例所得的結果如下:

左	右
1	甲
2	乙

---

後來發現使用非正規方法在 html body 中 import CSS 檔不太適合, 因為 WordPress 的匯入工具會自動將這些語法清除。目前比較可行的辦法還是直接把自訂的 style sheet 內容加在佈景主題的 style.css 檔尾! 只是像 WordPress.com 的免費空間無法直接去修改檔案, 只能選用可自訂 CSS 內容的佈景主題!