前言介紹
- 這款 WordPress 外掛「Equal Height Columns」是 2015-03-17 上架。
- 目前有 10000 個安裝啟用數。
- 上一次更新是 2025-01-18，距離現在已有 106 天。
- 外掛最低要求 WordPress 3.5 以上版本才可以安裝。
- 有 41 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
braad | mcguive7 | mightyminnow |
外掛標籤
div | equal | column | height | element |
內容簡介
相容於 PHP 8.0
喜歡這個外掛嗎？請考慮留下5星評價。
Equal Height Columns 讓你輕鬆平等化不同欄位和元素的高度。
特色
可佈局無限元素和元素組
指定簡單的 CSS/jQuery 選擇器來佈局元素
指定斷點，僅在特定屏幕尺寸時啟用
易於使用的管理界面
頁面載入後立即平等化高度
完全響應式（自動更新大小和方向更改事件）
適用於移動設備
在所有現代瀏覽器上運行（包括 IE8）
附帶自定義事件監聽器，以手動觸發
超小 – 8kB 的 jQuery 檔案大小
觸發自定義「equalheight」事件以強制調整大小
使用說明
在 WordPress 管理介面中前往「設定 > Equal Height Columns」。
輸入第一欄位組的選擇器和斷點。
按「+新增」和「移除」按鈕以添加/移除欄位組。
進階功能
想要手動調整高度嗎？沒問題，你可以跳過在設定頁面輸入選擇器的步驟，並使用下列兩個功能中的一個來呼叫 jQuery 指令：
jQuery( '.selector' ).initEqualHeights();
// 或者
jQuery( '.selector' ).equalizeTheHeights();
這兩個功能的區別僅在於 initEqualHeights() 會設定重新計算高度事件（當視窗大小改變或全域 equalheights 事件觸發時），但是 equalizeTheHeights() 只是單純地平等化高度，沒有涉及任何事件。
這兩個功能都可以接受三個可選引數：最小高度（像素數）、最大高度和斷點（低於該點時高度將恢復其原始大小）：
jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint );
因此，範例可能如下所示：
jQuery( '.selector' ).initEqualHeights( 200, 500, 768 );
在設定頁面輸入選擇器時，或使用 initEqualHeights() 方法時，這個外掛還會在將資料傳遞給 JS 之前，為視窗添加一個名為「equalheights」的事件，這樣你就可以輕鬆手動觸發平等化。如果你在載入頁面後通過 AJAX 新增新項目，這個功能將很有用。如下所示，你可以用這種方式觸發事件：
jQuery( window ).trigger( 'equalheights' );
另一個控制哪些元素進行平等化的選項是 equal_height_columns_elements 過濾器。這個過濾器在 JS 傳遞數據之前作用於數組，允許開發者指定不能從設定頁面刪除的選擇器，並根據動態數據建立選擇器。以下是使用過濾器的範例：
add_filter( 'equal_height_columns_elements', 'custom_ehc_elements' );
function custom_ehc_elements( $elements ) {
$elements['element-groups']['custom'] = array(
'selector' => '.ehc-target', // 選擇器在這裡。
'breakpoint' => '768',
);
return $elements;
}
在設定頁面輸入的選擇器的 element-groups 陣列的索引鍵會作為編號代入，因此為了避免冲突，建議使用自定義名稱。
原文外掛簡介
Compatible with PHP 8.2
Like this plugin? Please consider leaving a 5-star review.
Equal Height Columns lets you easily equalize the height of various columns and elements.
Features
Target unlimited elements and element groups
Specify simple CSS/jQuery selectors to target elements
Specify breakpoint to kick in only at certain screen sizes
Easy to use admin interface
Heights are equalized immediately after the page has loaded
Fully responsive (automatically updates on resize and orientationchange events)
Works on mobile devices
Works across all modern browsers (including IE8)
Comes with custom event listener to manually trigger
Super small – 8kB jQuery file size
Trigger custom ‘equalheight’ event to force resize
Instructions
Navigate to Settings > Equal Height Columns in the WordPress admin.
Enter a selector and breakpoint for the first column group.
Add/remove column groups by clicking the “+ Add More” and “Remove” buttons.
Advanced
Want to trigger the equalizing of the heights manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using one of two functions:
jQuery( '.selector' ).initEqualHeights();
// Or
jQuery( '.selector' ).equalizeTheHeights();
The difference between these two functions is simply that initEqualHeights() will set up all the events for recalculating the heights when the window is resized or the global equalheights event is triggered, but equalizeTheHeights() will simply equalize the heights without involving any events.
Both functions take three optional arguments, the minimum height (number of pixels), maximum height, and the breakpoint (below which the heights will revert to their original size):
jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint );
So an example might look like this:
jQuery( '.selector' ).initEqualHeights( 200, 500, 768 );
When entering a selector on the settings page or using the initEqualHeights() method this plugin also adds an event ‘equalheights’ to the window, allowing you to easily trigger the equalizing manually. This is useful if you have added new items to the page after it loads via AJAX. You can trigger the event like this:
jQuery( window ).trigger( 'equalheights' );
Another option for controlling which elements get equalized is the equal_height_columns_elements filter. This filter operates on the array of data that gets passed to the JS right before it is passed. This allows for developers to specify selectors that can’t be deleted from the settings page, and for programmaticly building selectors based on dynamic data. Here’s an example of how the filter can be used:
add_filter( 'equal_height_columns_elements', 'custom_ehc_elements' );
function custom_ehc_elements( $elements ) {
$elements['element-groups']['custom'] = array(
'selector' => '.ehc-target', // Selector goes here.
'breakpoint' => '768',
);
return $elements;
}
The keys on the element-groups array used by selectors entered on the settings page will come in as numbered indexes, so to avoid collision it’s best to use named keys for any custom selectors (we’re using ‘custom’ in the example above, but any unique string will work).
This plugin is on Github and pull requests are always welcome.
NEW: Multi rows
On version 1.2.0 we are introducing a new feature (for now, only available via JavaScript) that resolves a common issue if the row number of certain elements varies across breakpoints when the number of columns change.
For example, if we have 2 columns for tablets and 3 columns for desktops, the third element in the group would be positioned on the second row for tablets but on the first row for desktops.
Before this new feature, the equal height would be based on all the elements from the group. Now you can have “subgroups” for each row, and recalculate when the number of columns in the rows change.
To use this new feature add the function once per breakpoint:
jQuery( document ).equalHeight( selector, columns, minWidth, maxWidth );
selector: The selector of the group of elements that you want to apply the equal height.
columns: The number of columns per row on the breakpoint.
minWidth: The minimum width of the breakpoint. Use 1 for mobile.
maxWidth: The maximum width of the breakpoint. You can leave empty for the biggest breakpoint.
The following example would apply equal height for headings with the class .demo-heading in a grid that has 1 column per row on mobile, 2 columns on tablet and 3 columns on desktop:
$( document ).equalHeight( '.demo-heading', 1, 1, 767 ); // 1 columns for 1px - 767px
$( document ).equalHeight( '.demo-heading', 2, 768, 1024 ); // 2 columns for 768px - 1024px
$( document ).equalHeight( '.demo-heading', 3, 1025 ); // 3 columns for 1025px (and above)
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Equal Height Columns」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.2.0 | 1.2.1 | trunk |
延伸相關外掛（你可能也想知道）
Ultimate Bootstrap Elements for Elementor 》主站 | 高級主題, Ultimate Bootstrap Elements 是最佳的 Elementor 外掛之一。它提供了 63+ 個免費小工具，讓你輕鬆地建立任何網站。, 63+ 個免費小工具並持...。
Developer Tools Blocker 》此外掛可阻止非管理員使用「檢查元素」，但仍允許擁有「manage_options」權限的使用者進入。, 此外掛亦可阻止一些常見的快捷鍵(如f12等)，並可選擇性地封鎖非...。
Hide Anything – Hide Any Element on Any Page Visually 》若您不知道如何編程或想隱藏網站上的不必要元素，則可以使用此外掛。, 您可以透過簡單的點擊，透視選擇任何頁面上的任何元素，而無需進行編程即可隱藏。, 使...。
Slider for Elementor 》使用 Elementor Page Builder 創建基於頁面的輪播。, 透過 WordPress 內, , 前往「外掛 > 新增」, 搜尋「Slider for Elementor」, 在外掛頁面啟用 Slider ...。
Measuring Ruler 》這個外掛主要為預覽頁面時的編輯時測量元素高度、寬度以及邊距的設計，同時也會顯示元素的絕對位置和相對位置。, 在自動校正模式下，程式可以自動偵測元素邊...。
Buttons Widget | Full Elementor 》按鈕小工具 | 完整的 Elementor按鈕小工具 | 完整的 Elementor 將會創建多個美麗的按鈕。, 這是影片演示。
Semantic Shortcode 》p>這個外掛可以用來顯示按鈕、分隔線、國旗、標題、圖示、圖片、輸入框、標籤、列表、展開效果、網格、訊息、手風琴、標籤頁和轉場效果等各種短代碼。, 這個...。
Neptune Style Element 》這個外掛程式的強大之處，在於您可以選擇網站上的任何元素來進行自訂。一旦元素被加入到列表中，它們將立即顯示在「自訂」中，並提供一組設定，供您進行自訂...。
WPBlocks 》WPBlocks 是一個免費的 WordPress 外掛程式，它新增了更多區塊至 Gutenberg 編輯器中，這些精美設計的區塊完美地整合到新的 WordPress 編輯器中。, 可用區塊,...。
Tag to Link / Element to a 》使用 Tag-to-Link（jQueryRank sculpting）可以將帶有特定屬性和類別的 HTML 標籤轉換為超連結，以更好地管理連結權重（PageRank Sculpting）。當一個頁面上...。