[WordPress] 外掛分享： Responsive Columns

前言介紹

  • 這款 WordPress 外掛「Responsive Columns」是 2025-05-13 上架。
  • 目前有 40 個安裝啟用數。
  • 上一次更新是 2025-10-27，距離現在已有 122 天。
  • 外掛最低要求 WordPress 6.4 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

specia1ne |

外掛標籤

columns | css grid | gutenberg | responsive | block-editor |

內容簡介

總結：這個 WordPress 外掛讓您不再需要猜測手機上會顯示多少欄位，Responsive Columns 可以在核心區塊檢查器內設定精確的欄位數。

1. 這個 WordPress 外掛的主要功能是什麼？
- Responsive Columns 讓您可以在四個斷點中設定確切的欄位數，包括桌面、平板橫向、平板縱向和手機。

2. 您可以在每個斷點中選擇多少欄位？
- 每個斷點可以選擇 1 到 6 個欄位。

3. 這個外掛有哪些主要功能？
- 可以根據不同斷點設定欄位數、有主題感知的間隙、支援磚塊佈局和核心/Columns 和核心/Post Template。

4. 這個外掛如何運作？
- 外掛添加一個 class has-s1-rc-columns 和多個 CSS 變數，根據裝置不同設定不同的欄位數及間隙。

5. 當停用這個外掛時，會發生什麼情況？
- 當停用外掛時，一切將優雅地返回到默認區塊的行為。

原文外掛簡介

See exactly how many columns appear on every device. Responsive Columns extends the core Columns block and the Query Loop (grid) template with precise controls for four breakpoints, X/Y gap management, and an optional Masonry layout.

Key features

Four responsive breakpoints. Fine-tune Desktop, Tablet landscape, Tablet portrait, and Mobile column counts (1–6 columns).
Theme-aware gaps. Uses your theme’s block gap as a starting point and lets you override horizontal and vertical spacing independently.
One-click Masonry for Query Loop (Grid). No jQuery, automatically reflows posts as your content changes.
Native block experience. Works directly inside core/Columns and core/Post Template (grid) so patterns, reusable blocks, and theme.json continue to work.
Lightweight. Modern ES modules (~4 kB compressed) and CSS custom properties. Editor assets load only when needed.

How it works
The plugin adds a has-s1-rc-columns class and a handful of CSS custom properties:
--s1-rc-columns-mobile-portrait
--s1-rc-columns-mobile-landscape
--s1-rc-columns-tablet-portrait
--s1-rc-columns-tablet-landscape
--s1-rc-columns-desktop /* auto-added for Masonry /
--s1-rc-gap-x / horizontal /
--s1-rc-gap-y / vertical, falls back to X */

Your theme’s layout styles stay in control — Responsive Columns only adjusts grid-template-columns and gap values inside media queries. Disable or uninstall the plugin and the columns fall back to WordPress defaults without leaving orphan styles behind.
Editor experience

Inspector panel with device icons, tooltips, and numeric inputs for precise values.
Theme gap detection with a reset button to restore defaults in one click.
Gap linking lets you mirror vertical spacing or split it into a custom row gap.
Masonry toggle explains prerequisites (Query Loop + Grid layout with a desktop column count).

Accessibility & localisation

All UI controls are keyboard accessible and include human-readable labels.
Strings are translation ready via the responsive-columns text domain and JSON translation support.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Responsive Columns」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.1.0 | 1.1.1 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Mastodon