[WordPress] 外掛分享： Add Background-Size to Customizer

內容簡介

這個 WordPress 外掛將一個背景大小控制器新增到 WordPress Customizer 中的「背景圖片」選項中。

您可以透過進入仪表盘的「外觀」>「自訂」，然後點擊「背景圖片」選項，使用這個新控制器。

在您加入自訂背景圖片後，您可以將您的背景圖片大小設定為：
– “Cover”：最大化地填滿整個檢視區，有需要時進行裁切。
– “Contain”：最大限度地顯示整個圖片，但不需裁減成檢視區大小。
– “100% 寬度”：寬度完全符合檢視區大小，可能比檢視區高度大或小（等同於 CSS 中的「100% auto」）。
– “100% 高度”：高度完全符合檢視區大小，可能比檢視區寬度大或小（等同於 CSS 中的「auto 100%」）：
– “繼承”：將背景大小設定為與父元素一致（在這個案例中是 HTML）。
– “自訂”：允許您輸入要套用的 CSS，並選擇「CSS for background-size (if 'custom' selected)」選項中的區域。

要了解更多關於 CSS 背景大小屬性的資訊，請前往：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
或
http://www.w3schools.com/cssref/css3_pr_background-size.asp

注意事項

*這個外掛是透過新增樣式到「body.custom-background」類別來實現的。如果預設的自訂背景支援有任何問題，則這個外掛無法正常運作。

外掛標籤

開發者團隊

原文外掛簡介

This plugin for WordPress adds a background-size controller to the Background Image section in the WordPress Customizer.
You can access the new controller by going to Appearance > Customize from the Dashboard, and clicking on the Background Image section.
Once you’ve added your custom background image, you can set your background-image size to:
– “Cover”: As large as possible; fills entire view, with cropping.
– “Contain”: As large as possible, without cropping; fits inside of view.
– “100% width”: Width fits view perfectly, height may be smaller or larger than view (equivalent to css ‘100% auto’).
– “100% height”: Height fits view perfectly, width may be smaller or larger than view (equivalent to css ‘auto 100%’).
– “Inherit”: Sets background size to whatever parent element is set to (html, in this case).
– “Custom”: Allows you to put in your own css to be applied in the section called “CSS for background-size (if ‘custom’ selected).”
To learn more about the CSS background-size property, go to:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
or
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Notes
Notes:
*The plugin works by adding styles to the body.custom-background class. If the default custom-background support has been disrupted, then this plugin will not work.

延伸相關外掛

StylesWordPress擁有許多漂亮的佈景主題，但個性化設計可能會很困難...Editor Menu and Widget Access這個開源且輕量的外掛讓在 WordPress 管理介面中擁有「編輯者...Styles: TwentyFourteen這個外掛可以在 Twenty Fourteen 主題中，為 Styles 外掛 添...Faster Appearance – MenusWordPress 3.6的外觀>菜單面板中的新可訪問性Javascript，在...Styles: TwentyFifteen這個外掛為 TwentyFifteen 主題新增了與 Styles plugin 的兼...Customizer Hide Menu雖然很多人反對這個決定，但導航菜單介面仍被強制加入到自訂...Scrollbar Designer這是一款易於使用的外掛，可以在桌面電腦、筆記型電腦、平板...Missing Menu Items在建立您的網站時，是否因為導航最新版的 WordPress admin 讓...Improved Simpler CSS這個 WordPress 外掛可以讓您輕鬆地在整個網站全域修改 CSS。...Global Javascript讓使用者在全域設定中建立自定義 JavaScript，應用於 WordPre...Editor Theme Options簡單來說，這個外掛賦予「編輯員」角色編輯「佈景主題選項」...Simple customize scrollbar使用無需 JavaScript 庫自訂捲軸外觀Restore Customizer Menu for FSE Themes總結：這個「Restore Customizer Menu for FSE Themes」外掛...DK White Label您為客戶建立 WordPress 網站嗎？ 使用 DK White Label 控制...REST API Extender**總結：** REST API Extender 是一個 WordPress 外掛，用於...