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

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

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

Code Snippets 外掛介紹

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

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

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

圖片來源 : Code Snippets 外掛頁面


使用教學

安裝外掛

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

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

step 1

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

外掛 > 安裝外掛

step 2

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

搜尋 Code Snippets

step 3

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

啟用 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

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

儲存設定並啟用

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔部落格經營指南

0 0 選票
文章評分
訂閱
通知
guest
0 評論
在線反饋
查看所有評論
0
喜歡你的想法,請評論。x
()
x