
內容簡介
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
