本篇文章,將告訴你該如何利用程式碼片段外掛,自由設定 WordPress 小工具與小工具之間的寬度,解決有些佈景主題小工具與小工具之間的寬度,會太寬或太窄的問題。
Code Snippets 外掛介紹
本篇教學,將使用「Code Snippets」程式碼片段外掛來設定小工具與小工具之間的寬度,且方便了程式碼與程式碼之間的管理,未來要修改程式碼也比較方便。
相關文章 : 【WordPress外掛】好用的程式碼片段外掛,N個實用程式碼片段範例教學
使用教學
安裝外掛
外掛安裝教學 : https://xiaoxiang.blog/how-to-install-the-plug-in/
step 1
開啟 WordPress 後臺管理介面,前往 外掛 > 安裝外掛。

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

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

更改小工具與小工具之間寬度
step 1
外掛啟用後,點擊 程式碼片段 > 新增程式碼片段。

step 2
- 在標題框中輸入「自訂小工具與小工具之間的間格寬度」,方便程式碼與程式碼之間的管理。
- 如下圖所示,複製貼上以下程式碼到程式碼輸入框中。
修改「margin: 0 0 2em 0;」這段程式碼中第 3 個代碼「2em」,可以改成 1em 或 2.5em 等等,即可自由修改小工具與小工具之間的間格寬度。
程式碼 :
add_action( 'wp_head', function () { ?>
<style>
.widget {
margin: 0 0 2em 0;
/* 修改從左邊數來第3個數字,即可自訂寬度,這裡設定為2em */
}
</style>
<?php } );
畫面 :

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

效果預覽
如下圖所示,左邊為佈景主題預設的小工具與小工具區塊之間的寬度,右邊的為啟用程式碼後的寬度 (右邊寬度為2em)。

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