如何利用 CSS 程式碼修改 WordPress 的表格樣式？

想更改 WordPress 的表格樣式，除了下載外掛這個方式，另一個方法就是使用程式碼來修改了。

而本篇小翔將分享，該如何使用程式碼片段來修改 WordPress 的表格樣式，將原本預設的表格樣式更改的更為美觀。

Code Snippets 外掛介紹

本篇教學，將使用「Code Snippets」程式碼片段外掛來修改 WordPress 的表格樣式，使用該外掛，也方便了程式碼與程式碼之間的管理，未來要修改程式碼也比較方便。

因為 WordPress 有許多豐富的外掛可供下載使用，豐富了我們的網站，但外掛一旦下載太多，可能會造成網站效能不佳，速度太慢等問題。

而 Code Snippets 是一個輕便、易用，且專為在網站上執行 PHP 程式碼片段所設計的解決方案。 使用 Code Snippets 外掛後，便不再需要為了網站功能去下載外掛，只需新增一個程式碼片段，輸入程式碼，即可為網站增加所需要的功能，且不會占用太多網站空間，從而降低網站速度。

• 相關文章 : 【WordPress外掛】好用的程式碼片段外掛，N個實用程式碼片段範例教學

圖片來源 : Code Snippets 外掛頁面

使用教學

安裝外掛

以下教學需安裝並啟用 Code Snippets 外掛，不會安裝 WordPress 外掛的可以點擊以下連接前往教學文章學習。 文中會教你如何搜尋、安裝、啟用、停用和刪除外掛。

教學文章：外掛安裝教學
文章網址：https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

開啟 WordPress 後臺管理介面，前往 外掛 > 安裝外掛。

step 2

使用關鍵字搜尋外掛，輸入「Code Snippets」。

step 3

找到名稱為「Code Snippets」的外掛，點選 立即安裝，並 啟用 該外掛。

更改表格樣式 (範例一)

以下的教學，讓你可以把表格更改成如下圖的樣子。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「修改表格樣式」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

table {
width:100%;
border-top:1px solid #d8d8d8;
border-left:1px solid #d8d8d8;
margin-bottom:20px;
}

table th {
text-align:center;
background-color:#f6f5f2;
font-weight:normal;
}

table td, table th {
text-align:center;
padding:10px 15px;
font-size:14px;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

更改表格樣式 (範例二)

以下的教學，讓你可以把表格更改成如下圖的樣子。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「修改表格樣式」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

table {
font-family: verdana,arial,sans-serif;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}

table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}

table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

更改表格樣式 (範例三)

以下的教學，讓你可以在文章的 H2 標題前加入 1、2、3.. 的編號順序，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「修改表格樣式」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

table {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}

table td, table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}

table thead th {
background-color: #CCE8EB;
width: 100px;
}

table tr:nth-child(odd) {
background: #fff;
}

table tr:nth-child(even) {
background: #F5FAFA;
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。

by 小翔