[WordPress] 外掛分享： Vertical Center

WordPress 外掛 Vertical Center 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Vertical Center」是 2015-03-31 上架。
  • 目前有 100 個安裝啟用數。
  • 上一次更新是 2015-12-07，距離現在已有 3435 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.8 以上版本才可以安裝。
  • 有 5 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

braad |

外掛標籤

center | jquery | vertical | javascript | responsive |

內容簡介

Vertical Center 可讓您輕鬆垂直置中元素。

功能

可獨立垂直置中無限數量的元素
可指定簡單的 CSS/jQuery 選擇器以定位元素
易於使用的管理介面
網頁載入後立即垂直置中所有項目
在元素垂直置中後新增一個類別（有助於 CSS 轉場效果）
完全響應式（會隨視窗大小和方向更改自動更新）
適用於行動裝置
適用於所有現代瀏覽器（包括 IE8）
觸發自訂「垂直居中」事件以強制重新計算
為了增加平滑度，調整視窗大小的事件會有瞬息消失的效果

詳細使用方法請參閱Screenshots。

說明

在 WordPress 管理介面中導航到「設定」>「Vertical Center」。
輸入選擇器和要居中的元素偏移量。
通過點擊「+ 添加更多」和「刪除」按鈕添加/刪除其他元素。

進階

想要手動觸發垂直居中？沒問題。您可以在設定頁面上跳過輸入選擇器，並使用 .initVerticalCenter() 或 .doVerticalCenter() 自己呼叫 jQuery 腳本。 .initVerticalCenter() 方法會設置事件監聽器以便在視窗改變大小時重新計算，而 .doVerticalCenter() 方法會直接進行居中操作，而不附加任何事件：

// 附加事件和居中。
jQuery( '.selector' ).initVerticalCenter();

// 向中心靠齊而不附加事件。
jQuery( '.selector' ).doVerticalCenter();

這兩個功能都可以接受一個可選參數，即偏移量（以像素為單位）：

jQuery( '.selector' ).initVerticalCenter( offset );

jQuery( '.selector' ).doVerticalCenter( offset );

以 20 像素進行偏移計算：

jQuery( '.selector' ).initVerticalCenter( 20 );

功能可鏈接使用。我個人最喜歡使用此外掛的方法是，在需要置中的元素上通過內嵌 style="opacity: 0;" 來保證在 DOM 加載時它們是透明的，然後使用以下代碼淡入它們：

jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );

或者，您可以透過 CSS 在不使用代碼的情況下達到相同的效果，只需要使用每個目標元素初始置中後新增的 vc-complete 類別（自版本 1.0.3 中已新增此功能），可能會長這樣：

#target {
opacity: 0;
transition: opacity 0.5s;
}

#target.vc-complete {
opacity: 1;
}

此外掛還向視窗添加了一個名為「verticalcenter」的事件，可讓您輕鬆手動觸發垂直水平置中操作。例如，如果您通過 AJAX 在頁面加入項目，那麼就可以像這樣觸發事件：

jQuery( window ).trigger( 'verticalcenter' );

原文外掛簡介

Vertical Center lets you easily vertically center elements.
Features

Center an unlimited number of elements independently
Specify simple CSS/jQuery selectors to target elements
Easy to use admin interface
Items are vertical centered immediately after the page has loaded
Adds a class to each centered element after it has been centered (useful for CSS transition effects)
Fully responsive (automatically updates on resize and orientationchange events)
Works on mobile devices
Works across all modern browsers (including IE8)
Trigger custom ‘verticalcenter’ event to force a recalculation
Debounced resize events for added smoothness

Check out the Screenshots tab for a gif of the plugin in action.
Instructions

Navigate to Settings > Vertical Center in the WordPress admin.
Enter a selector and an offset for the element(s) you want to center.
Add/remove additional elements by clicking the “+ Add More” and “Remove” buttons.

Advanced
Want to trigger the vertical centering manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using either .initVerticalCenter() or .doVerticalCenter(). The .initVerticalCenter() method sets up the event listeners to recalculate if the window is resized, while the .doVerticalCenter() method directly centers without attaching any events:
// Attach events and center.
jQuery( '.selector' ).initVerticalCenter();

// Center without attaching events.
jQuery( '.selector' ).doVerticalCenter();

Both functions take one optional argument, the offset value (as a number of pixels):
jQuery( '.selector' ).initVerticalCenter( offset );

jQuery( '.selector' ).doVerticalCenter( offset );

To offset the calculation by 20 pixels:
jQuery( '.selector' ).initVerticalCenter( 20 );

The functions are chainable. My personal favorite way to use this plugin is to inline style="opacity: 0;" on the elements that I am centering (to guarantee they’ll be transparent when the DOM loads) and then fade them in with something like this:
jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );

Or to achieve the same effect with only CSS you can use the vc-complete class that gets added to each target element after the initial centering (added in version 1.0.3), which might look like this:
#target {
opacity: 0;
transition: opacity 0.5s;
}

#target.vc-complete {
opacity: 1;
}

This plugin also adds an event ‘verticalcenter’ to the window, allowing you to easily trigger the vertical centering manually. This is useful if you have added items to the page after it loads via AJAX. You can trigger the event like this:
jQuery( window ).trigger( 'verticalcenter' );

各版本下載點

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

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

1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.1.0 | 1.1.1 | trunk |

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

  • Media Focus Point 》總結：該外掛可幫助您管理圖片和影片背景，設定特定焦點，即使圖像或影片被調整大小或背景更改時，焦點會確保所選區域保持可見並置中。不論您使用響應式佈局...。
  • oEmbed styling 》oEmbed 是 WordPress 2.9 版本所新增的內容，提供良好的功能支援。然而生成的 oEmbed 代碼難以容易地置中於文字之中，尤其是常見的要求。這個外掛允許置中 (...。

文章
Filter
Apply Filters
Close
Mastodon