[WordPress] 外掛分享： Gridster

WordPress 外掛 Gridster 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Gridster」是 2013-04-01 上架。
  • 目前有 30 個安裝啟用數。
  • 上一次更新是 2013-04-22，距離現在已有 4395 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.3 以上版本才可以安裝。
  • 有 8 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

carstenbach |

外掛標籤

gui | gridster | drag drop | grid layout | layout management |

內容簡介

Gridster 是一款 WordPress 外掛，可以從跨越多列的元素中建立具有直觀可拖曳佈局。您甚至可以動態調整佈局中的元素大小、添加和刪除元素，並在內容中進行編輯。

您可以在 GitHub 上複製 Gridster 或向我報告您的問題。

一般 - 特徵

在網格內管理您的內容
從最新的文章、頁面或自訂文章類型中將內容拖放為 Gridster 小部件
即時調整 Gridster 小部件的大小
使用自訂範本為所有 Gridster 小部件或每個文章類型使用不同的範本
為每個 Gridster 覆蓋全局設置
內嵌編輯透過您的範本載入每個內容
在調整小部件大小時重新載入小部件內的圖像，以最佳符合其尺寸
透過添加從 Gridsters 文章列表獲得的生成的簡碼，即可添加 Gridsters
此外，此外掛程式會識別您的佈景主題中定義的內容寬度，並幫助您創建最符合要求的 Gridsters
僅在實際使用簡碼時才會載入腳本和樣式，這可節省載入時間
視覺簡碼替換，如您熟悉的 [相簿]-簡碼
TinyMCE 按鈕可帶有用戶友好的 GUI 添加 Gridster 佈局
清理卸載：所有選項、Gridster-文章和相關的文章元數據欄會在卸載時被刪除（而不是停用）

範本

通過覆寫 cbach-wp-gridster/views/gridster-default.php 中的預設範本調整 Gridster 小部件的 HTML 輸出。
只需將此文件複製到您創建的新目錄gridster-templates中，並將其更改為所需的內容。
此外，當您創建類似 gridster-YOUR_POST_TYPE_NAME.php 的文件時，還可以為每個文章類型添加不同的範本。

通過使用後面描述的gridster_locate_templates_from篩選器，您可以添加更多條件以使您的範本符合更自定義的條件。

內嵌編輯

使用Jeditable庫的幫助，可以在 Gridster 工作台內直接編輯載入的內容。
因此，如果您使用名為“我的奶奶的蘋果派是最好的”的文章，您可以在 Gridster 小部件中調整文本以得到更短的版本，例如“最好的蘋果派”，而無需編輯原始文章。
只需為標題出現的包裝元素添加一些 CSS 類別即可。

對於編輯單行文字，例如標題，添加 class="gridster_edit"。
如果您想要在更舒適的文字區域中編輯文本，則使用 class="gridster_edit-area"

查看插件目錄中的 /views/gridster-default.php 以獲取提示。

任意部分
篩選器和鉤子

使用以下篩選器可以調整此外掛程式的行為：

通過篩選 gridster_get_post_types_as_widget_blocks_args 更改可用的文章類型的 get_post_types() 呼叫
通過修改 gridster_post_types_as_widget_blocks 更改使用的文章類型的最終數組
通過連接 gridster_get_posts_by_type_query_args 調整每個文章類型的可見/可用文章列表
通過篩選 gridster_locate_templates_from 調整用於範本的命名慣例

原文外掛簡介

Gridster is a WordPress plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically resize, add and remove elements from the grid, as edit the elements content inline.
You can fork Gridster at Github or tell me about your issues.
General – Features

manage your contents within a grid
drag & drop contents as gridster widgets from your last posts, pages or custom post types
resize gridster widgets on the fly
use custom templates for all your gridster-widgets, or per post_type
override side wide settings for every gridster
inline edit every content loaded via your templates
images within your gridster-widgets are re-loaded on every resize of a widget, to best fit its dimensions
add gridsters by simply adding a generated shortcode, you’ll get from the gridsters post-list
this plugin recognizes your defined content width from your theme and will help you create best fitting gridsters
scripts & styles are loaded only if shortcode is really used, this saves load time
visual shortcode replacement, like you know from -Shortcode
TinyMCE Button to add gridster layouts with user-friendly GUI
clean uninstall: all options, gridster-posts and related post-meta fields are deleted on uninstalling (not deactivation)

Templates
Adjust the HTML output of the gridster-widgets by overriding the default template from cbach-wp-gridster/views/gridster-default.php.
Just copy this file into a new created directory gridster-templates within your theme folder and change it to your needs.
Furthermore you can add different templates per post_type, when you create files like gridster-YOUR_POST_TYPE_NAME.php within these folder.
By using the later described gridster_locate_templates_from filter you are able to add more conditions to make your templates match more customized conditions.
Inline editing
With help of the Jeditable library it is possible to edit loaded content directly inside the gridster workbench.
So if you are using a post called “My grandmothers apple pie is the best”, you could adjust the text inside your gridster-widget to shorter version, ie. “best apple pie” without editing the original post.
Just add some CSS class to the wrapper element, where your title will appear.
For editing single lines of text, like titles add class="gridster_edit".
If you want to edit texts in more comfortable textarea use class="gridster_edit-area"
Have a look at the /views/gridster-default.php inside the plugin directory to get a clue.
Arbitrary section
Filters and Hooks
You can adjust the behavior of this plugin by using following filters:

Change the get_post_types() call for usable post_types by filtering gridster_get_post_types_as_widget_blocks_args
Change final array of used post_types by modifying gridster_post_types_as_widget_blocks
Filter the list of visible / usable posts per post_type by hooking into gridster_get_posts_by_type_query_args
Adjust the naming convention for used templates by filtering gridster_locate_templates_from
Add custom CSS classes to each Gridster widget individually from a multiple select field enhanced by chosen.js, using the gridster_choose_from_custom_css_classes_for_widgets filter.
The return of your applied function should be an array() like this array( 'alignleft' => __('Align text from left'), 'alignright' => __('Align text from right'), where the array_keys are the CSS classes to apply and the values are the readable text for you or your editors.
Change the capability, which allows users to overwrite the default settings for each gridster individually by filtering gridster_overwrite_post_options_with_cap. By default “edit_theme_options” is used.

Or you can hook in your own functionality by using the following action hooks:

Do something before and/or after the shortcode ouput by using gridster_before_shortcode_render or gridster_after_shortcode_render. Both action hooks come with three additional arguments you are able to work with, the $post_id, the $title and the $widgets_html of the current gridster-post.

Have a look inside the plugin file to see, what variables you are able to use within your filter hooks.
Translations

English (en_US)
German (de_DE)

Many Thanks goes out to

The guys of Ducksboard and the many github Contributors for their work on gridster.js
Mika Tuupola for his work on Jeditable
Yusuke Kamiyamane for his Diagona Icons licensed under Creative Commons (Attribution 3.0 Unported)
MidTone Design for their Web Injection Icons
Dmitry Costenco for his Free Applications Icons
New Moon for their Ultimate Gnome Icons
Harvest for developing chosen.js a Javascript Plugin to make

各版本下載點

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

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

1.2 | 1.3 | 1.4 | 1.2.1 | 1.3.1 | 1.3.2 | trunk |

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

  • Admin Management Xtended 》整體來說，新版的 WordPress 管理面板組織得相當好，然而若是想快速編輯文章或頁面而不必每個都在新分頁或新視窗中開啟，這樣的過程並不是很有效率。對於將 W...。
  • EasyTimetable – Responsive Schedule management system 》EasyTimetable 可讓您在 sehr user-friendly 的介面 using jQuery & Ajax 下快速建立美麗、自定義和適應性行程表 (Schedule/Timetable), , 新版本 v1.4.0...。
  • ACF Dropzone 》啟用 ACF 的圖像、檔案和相簿欄位的拖曳上傳功能。, 支援的欄位, , 圖像欄位, 檔案欄位, 相簿欄位（僅限 ACF PRO）, , 使用方法, 在 ACF 欄位編輯器中勾選「...。
  • Woocommerce Custom Checkout Fields Editor With Drag & Drop 》Woocommerce 自訂結帳欄位編輯器 - 拖放式操作是一個非常實用的外掛，可幫助您新增、編輯和刪除自訂欄位。, 由 Easy Softonic 提供技術支援。
  • PixGridder 》以下是 WordPress 外掛 PixGridder 的描述：, , 此外掛展示頁面可參照：PixGridder，可以透過進入頁面連接進入專業版（pixgridder-pro）, 我們較願意稱這款外...。
  • Page Builder – AIO WP Builder: #1 Website Builder for WordPress 》一個如此簡單易用的 WordPress 網頁建立外掛程式, , 如果您正在尋找最佳的免費 WordPress 網站建立工具，您應該試試這個外掛程式。使用簡單的拖放工具，您可...。
  • Drag Drop Switch 》總結：這個外掛在「螢幕選項」下增加了一個切換按鈕，如果安裝並啟用了Classic Editor外掛，可以禁用或啟用對meta boxes的拖放功能。, , HTML問題與答案：, &...。
  • Hanoi Tower 》總結：這個外掛可讓您在網站的任何一個頁面上加入 [hanoi-tower] 短代碼，玩河內塔遊戲。每位網站訪客將保有其遊戲進度，而且可以隨時在其有效網站連線期間繼...。
  • Drop-Zone 》這是一個功能小卻方便的外掛程式，讓您可以在前端介面加入拖放區域。它使用 HTML5 的原生拖放 JavaScript 方法，因此請使用現代化的瀏覽器！, 選項, 您可以選...。

文章
Filter
Mastodon