前言介紹
- 這款 WordPress 外掛「Responsive Containers」是 2019-07-12 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2019-07-20，距離現在已有 2115 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.2.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6.20 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
container queries | responsive design | responsive containers |
內容簡介
CSS 媒體查詢讓我們能夠根據螢幕大小來設計元素的樣式。但如果我們想根據容器的大小來設計樣式呢？小工具或區塊在全幅或在欄位或側邊欄中的限制應該看起來有所不同，但我們以前沒有任何方法可以編寫容器查詢，以根據其在螢幕上的寬度設計這些元素的樣式...直到現在！
該外掛載入了一個小型的 JavaScript 文件，根據瀏覽器中這些元素的大小有條件地為元素應用類別。其他佈景主題和外掛可以使用它來為編輯器區塊或小工具編寫特定於容器的樣式，以便無論它們放在頁面的哪個位置，它們都能正確顯示。
此腳本在前端和區塊編輯器中運作 —— 在編寫文章時，看到您的響應式樣式活躍，並信任您的小工具和區塊將在全幅或最窄的側邊欄中以其最佳效果顯示。
使用方法
如果您的網站中有一個區塊或小工具，希望將其用作響應式容器，請將 data-responsive-container 屬性添加到該區塊的容器元素中。例如，日曆區塊的父級
僅添加該數據屬性，您的容器現在將被標記為基於它們的外觀寬度新增其他類別：
– 如果容器在 420 像素以下，則不會有特殊的類別（以此窄的上下文作為您的默認樣式）。
– 如果容器寬度為 420 像素或更多，則為其添加 container-sm 類別，
– 如果寬度大於 600 像素，則添加 container-md 類別，
– 如果寬度大於 720 像素，則添加 container-lg 類別，以及
– 對於任何寬度大於等於 960 像素的元素，添加 container-xl 類別。
這些是預設值，因此有些任意，因此您也可以使用 data-responsive-container 屬性提供自己的自定義主題或外掛特定斷點值。在 PHP 中呈現您的元素或區塊時，傳遞一個包含要應用每個類的最小寬度的類名數組。這些類名可以是通用的，如默認的 .container-* 類，或者可能是特定於要樣式化的元素的類：
echo sprintf(
'
esc_attr( wp_json_encode( [
'myblock--2-column' => 600,
'myblock--3-column' => 900,
] )
);
在這個例子中，如果容器寬度大於等於 600 像素，則您的容器將收到 .myblock--2-column 類，如果容器寬度大於等於 900 像素，則收到 .myblock--3-column 類。
請注意，在這種情況下，如果小於 600 像素，.myblock 元素將不會收到任何自定義類。我們以下您指定最小值不應用任何類名，因為我們假定樣式是寫在窄上下文的情況下，但您可以通過提供 0 的最小寬度來確保始終應用您的最小類：
echo sprintf(
'
esc_attr( wp_json_encode( [
'myblock--1-column' => 0, // 將在所有情況下應用。
'myblock--2-column' => 600,
'myblock--3-column' => 900,
] )
);
從 WordPress 內部查看
訪問 ‘外掛 > 新增外掛’
搜索 ‘Responsive Containers’
從外掛頁面啟用 Responsive Containers 外掛。
開始使用data-responsive-co
原文外掛簡介
CSS media queries let us style elements based on the size of the screen. What if we wanted to style them based on the size of their container? A widget or block should often look different if it’s full-width or constrained within a column or sidebar, but we didn’t have any way to write container queries to style those elements based on their on-screen width… until now!
This plugin loads a small JavaScript file that conditionally applies classes to elements based on how wide those elements are in the browser. This can be used by other themes and plugins to write container-specific styles for editor blocks or widgets, so that they will display correctly wherever they are placed in the page.
The script works on the frontend and in the block editor — see your responsive styles live while you’re composing your post, and trust that your widgets and blocks will look their best whether they’re full-width or in the narrowest sidebar.
Usage
If you have a block or widget in your site that you wish to use as a responsive container, add the data-responsive-container attribute to that block’s container element. For example, the parent
By adding that data-attribute and nothing more, your container will now be tagged with additional classes based on how big they appear:
– No special class if the container is below 420px (style for this narrow context as your default).
– container-sm if the container is 420px wide or more,
– container-md if it is wider than 600px,
– container-lg if it is wider than 720px, and
– container-xl for any element 960px or wider.
These are default values and therefore somewhat arbitrary, so you may also provide your own custom theme- or plugin-specific breakpoint values using the data-responsive-container attribute. When rendering your element or block in PHP, pass an array of class names and the minimum width at which each class should be applied. These class names can be generic like the default .container-* classes, or they may be specific to the element being styled:
echo sprintf(
'
esc_attr( wp_json_encode( [
'myblock--2-column' => 600,
'myblock--3-column' => 900,
] )
);
In this example your container would receive the .myblock--2-column class from 600px up, and .myblock--3-column at or above 900px.
Note that in this case the .myblock element receives no custom class below 600px. We don’t apply any class names below your specified minimum because we assume styles are written narrow-context-first, but you may ensure your smallest class is always applied by providing a minimum width of 0:
echo sprintf(
'
esc_attr( wp_json_encode( [
'myblock--1-column' => 0, // Will apply in all circumstances.
'myblock--2-column' => 600,
'myblock--3-column' => 900,
] )
);
From within WordPress
Visit ‘Plugins > Add New’
Search for ‘Responsive Containers’
Activate the Responsive Containers plugin from your Plugins page.
Start using data-responsive-container attributes within your theme or plugin.
Manually
Upload the responsive-containers folder to the /wp-content/plugins/ directory
Activate the Responsive Containers plugin from your Plugins page.
Start using data-responsive-container attributes within your theme or plugin.
License & Attribution
This plugin is licensed under the terms of the GNU General Public License (or “GPL”). It is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
It was created by K. Adam White at Human Made, based on a concept popularized by Philip Walton.
This plugin utilizes the resize-observer-polyfill library by Denis Rul, released under the MIT license and © 2016 Denis Rul.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Responsive Containers」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。