Responsive Containers – WordPress plugin 外掛推薦下載

點擊下載

響應容器

外掛程式描述

CSS媒體查詢讓我們根據屏幕大小設置元素樣式。如果我們想根據容器的大小來設置它們,該怎麼辦?如果小部件或塊在列或側邊欄中的全寬或約束,通常應該看起來不同,但是我們沒有任何方法可以根據它們的屏幕寬度來編寫容器查詢來設置這些元素的樣式&hellip ;到現在!

此外掛程式加載一個小型JavaScript文件,該文件根據這些元素在瀏覽器中的寬度有條件地將類應用於元素。其他主題和外掛程式可以使用它來為編輯器塊或窗口小部件編寫特定於容器的樣式,這樣它們就可以在頁面中的任何位置正確顯示。

該腳本適用於前端和塊編輯器 – 在您編寫帖子時查看您的響應式樣式,並相信您的小部件和塊看起來是最好的,無論它們是全寬還是在最狹窄的邊欄。

用法

如果您希望將站點中的塊或窗口小部件用作響應容器,請將 data-responsive-container 屬性添加到該塊的容器元素。例如,父< div>日曆塊的可能如下所示:

 < div class =“calendar-block”data-responsive-container>  

通過添加該數據屬性而已,您的容器現在將根據它們顯示的大小標記其他類:
– 如果容器低於420px,則無特殊類(樣式對於這個狹窄的上下文作為默認值)。
container-sm 如果包含er為420px寬或更大,
container-md 如果寬度大於600px,
container-lg 如果寬度大於720px,則
> – container-xl 適用於任何960px或更寬的元素。

這些是默認值,因此有些隨意,因此您還可以使用 data-responsive-container 屬性提供自己的自定義主題或外掛程式特定的斷點值。在PHP中渲染元素或塊時,傳遞一個類名最小寬度的數組,應該應用每個類。這些類名稱可以是默認的 .container- * 類,也可以是特定於被樣式化的元素:

  echo sprintf('< div class = “myblock”data-responsive-container =“%s”>',esc_attr(wp_json_encode(['myblock  -  2-column'=> 600,'myblock-3-column'=> 900,]) );  

在此示例中,您的容器將從600px向上接收 .myblock - 2列類,並且 .myblock - 3列大於或等於900px。

請注意,在這種情況下, .myblock 元素不會接收600px以下的自定義類。我們不會應用低於指定最小值的任何類名,因為我們假設樣式寫的是窄上下文優先,但是你可以通過提供 0 的最小寬度來確保你的最小類被應用:

  echo sprintf('< div class = “myblock”data-responsive-container =“%s”>',esc_a ttr(wp_json_encode(['myblock  -  1-column'=> 0,//適用於所有情況。 'myblock  -  2-column'=> 600,'myblock  -  3-column'=> 900,]));  

從WordPress

訪問’外掛程式>添加New’Search for’Responsive Containers’Activat來自外掛程式頁面的Responsive Containers外掛程式。在主題或外掛程式中使用 data-responsive-container 屬性啟動。

手動

responsive-containers 文件夾上傳到 / wp-content / plugins / 目錄從“外掛程式”頁面激活“響應容器”外掛程式。使用數據啟動主題或外掛程式中的-responsive-container 屬性。

許可證&歸因

此外掛程式根據 GNU通用公共許可證(或“GPL”)的條款獲得許可。這是免費軟件;您可以根據自由軟件基金會發布的GNU通用公共許可證的條款重新分發和/或修改它;許可證的第2版,或(根據您的選擇)任何更高版本。

它是由K. Adam White在 Human Made 創建的,基於 Philip Walton 推廣的概念。

此外掛程式使用Denis Rul的 resize-observer-polyfill ,根據MIT許可證發布並複制; 2016 Denis Rul。

常見問題

這是如何運作的?

Responsive Containers外掛程式實現了一種方法,該方法由 Philip Walton的優秀文章響應組件:容器查詢問題的解決方案 推廣。這個外掛程式所做的是將他的解決方案應用於WordPress網站,這樣,假設安裝了此外掛程式,任何其他外掛程式或主題都可以選擇響應容器樣式。

在引擎蓋下,這一切都由 ResizeObserver 驅動,這是一種有效檢測元素大小變化的新瀏覽器功能。我們使用此方法跟踪頁面上特定容器的大小,並根據它們在屏幕上顯示的大小將一組類應用於這些元素。

我激活此外掛程式並且沒有任何更改

安裝和激活此外掛程式不會改變您網站的任何內容。您必須更新主題或外掛程式,才能將 data-responsive-containers HTML屬性添加到您希望用作響應容器的任何元素。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

shares