[WordPress] 外掛分享： Same Height

前言介紹

• 這款 WordPress 外掛「Same Height」是 2015-10-14 上架。
• 目前有 100 個安裝啟用數。
• 上一次更新是 2017-01-24，距離現在已有 3022 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
• 外掛最低要求 WordPress 1.3.0 以上版本才可以安裝。
• 有 4 人給過評分。
• 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

damiarita |

外掛標籤

css | jquery | shortcode | javascript | sameheight |

內容簡介

有時我們想要將兩個框框並排顯示，並且它們必須看起來一模一樣。CSS並不總是有用的。
此外掛使用jQuery來偵測您想要的框框，並強制使它們具有相同的大小，它所使用的大小是最高框的大小。
如果您的內容的某些部分需要具有相同的高度，只需像這樣使用shortcode [sameheight/]：
[sameheight]
這是一段短文
[/sameheight]
[sameheight]
這是一段非常，非常，非常，非常，非常，非常長的文本
[/sameheight]
當HTML在您的屏幕上呈現時，兩個內容部分將具有相等的高度。這對於它們浮動在一起並且具有背景時非常有用。
如果我在同一頁面上有不同的大小呢？您可以像這樣分組shortcode：
[sameheight group="1"]
這是一段非常，非常，非常，非常，非常，非常，非常長的文本
[/sameheight]
[sameheight group="1"]
這是一段短文
[/sameheight]
[sameheight group="2"]
這是另一段短文
[/sameheight]
[sameheight group="2"]
這段文字很長，但不像上一段那樣長。因此，我不希望這些部分看起來那麼長。但它們還應該看起來一樣。
[/sameheight]
如果我有一個響應式網站，我只想在寬屏並排配置中應用相同的高度怎麼辦？您可以像這樣添加斷點。
[sameheight breakpoint="xs"]（您甚至可以不使用斷點）
這是一段非常，非常，非常，非常，非常，非常，非常長的文本
[/sameheight]
[sameheight breakpoint="xs"]（您甚至可以不使用斷點）
這段文字必須始終使用與上一個相同的高度。
[/sameheight]
[sameheight breakpoint="md"]
這是一段非常，非常，非常，非常，非常，非常長的文本
[/sameheight]
[sameheight breakpoint="md"]
這段文字只有在旁邊時才需要使用相同的高度，但在智能手機上則不需要使用相同的高度。
[/sameheight]
您有這些斷點（熟悉Bootstrap的人知道它們）：

"xs"強制所有窗口寬度（超小窗口-智能手機）使用相同高度。或者，您可以不使用斷點
"sm"強制窗口寬度> 768px（小窗口-小平板電腦）使用相同高度
"md"強制窗口寬度> 992px（中窗口-平板電腦或小桌面電腦）使用相同高度
"lg"強制窗口寬度> 1200px（大窗口（大窗口-大型桌面電腦）使用相同高度。

原文外掛簡介

Sometimes we want to display to boxes side by side and they have to look the same. CSS doesn’t always help.
This plugin will use jQuery to detect the boxes you want and force them all to have the same size. The size is uses is the size of the tallest box.
If you have a some parts of your content that need to have the same height, simply wrap them with the [sameheight/] shortcode like this:
[sameheight]
This is a short text
[/sameheight]
[sameheight]
This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text
[/sameheight]
When the html renders on your screen, both parts content parts will look equally height. This is very useful if they are floating next to each other and they have a background.
What if I have different sizes in the same page?
You can group shortcodes like this:
[sameheight group=”1″]
This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text
[/sameheight]
[sameheight group=”1″]
This is a short text
[/sameheight]
[sameheight group=”2″]
This is another short text
[/sameheight]
[sameheight group=”2″]
This text is long, but not quite as long as the previous one. So, I don’t want these to parts to look as long. But they should still look the same.
[/sameheight]
What if I have a responsive site and I only want the same height to apply in wide-screen, side-by-side configurations?
You can add a breakpoint like this.
[sameheight breakpoint=”xs” ] (You could even use no breakpoint at all)
This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text
[/sameheight]
[sameheight breakpoint=”xs” ] (You could even use no breakpoint at all)
This text always has to use the same height than the previous one.
[/sameheight]
[sameheight breakpoint=”md”]
This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text
[/sameheight]
[sameheight breakpoint=”md”]
This text only has to use the same height when it is next to the previous, but not when it is underneath on smarphones.
[/sameheight]
You have these breakpoints (those familiar with bootstrap know them):

“xs” forces same height for all window widths (extra small window – smartphone). Alternatively, you can use no breakpoint
“sm” forces same height for window widths > 768px (small window – small tablet)
“md” forces same height for window widths > 992px (medium window – table or small desktop)
“lg” forces same height for window widths > 1200px (large window – desktop)

Names and widths are based on bootstrap.
Please, note that shortcodes with different “breakpoint” will be in different groups regardless of the “group” setting. You can still use “group” to separate to groups with the same “breakpoint”.
I have some styles in CSS for my classes. How can I apply classes to the content?
Easy:
[sameheight additional_classes=”my-class1 my-classA”]
This is a short text
[/sameheight additional_classes=”my-class2 my-classB”]
[sameheight]
This is a very, very, very, very, very, very long text
[/sameheight]
Can I use all the possibilities together?
Sure:
[sameheight group=”1″ breakpoint=”md” additional_classes=”my-class1 my-classA” /] will work.
Do I need to use the shortcode?
No! If you are editing your html, you can put the right properties in it. That’s all tha shortcode does. Make sure you add the class ‘same-height’. If you use a break point, add it with a hyphen (-) like this: ‘same-height-xs’, ‘same-height-sm’, ‘same-height-md’, or ‘same-height-lg’. The Javascript is looking for those classes to identify the html elements it has to work on.
If you are grouping boxes, use the ‘same-height-group’ property. Like