如何自訂小工具與小工具之間的間格寬度?

本篇文章,將告訴你該如何利用程式碼片段外掛,自由設定 WordPress 小工具與小工具之間的寬度,解決有些佈景主題小工具與小工具之間的寬度,會太寬或太窄的問題。

Code Snippets 外掛介紹

本篇教學,將使用「Code Snippets」程式碼片段外掛來設定小工具與小工具之間的寬度,且方便了程式碼與程式碼之間的管理,未來要修改程式碼也比較方便。

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

使用教學

安裝外掛

外掛安裝教學 :
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

  • 在標題框中輸入「自訂小工具與小工具之間的間格寬度」,方便程式碼與程式碼之間的管理。
  • 如下圖所示,複製貼上以下程式碼到程式碼輸入框中。
修改「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)。

左邊為佈景主題預設寬度,右邊寬度為 2em
0 0 選票
文章評分

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

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論