[WordPress] 外掛分享: PixGridder

首頁外掛目錄 › PixGridder
WordPress 外掛 PixGridder 的封面圖片
100+
安裝啟用
★★★★
4.6/5 分(21 則評價)
3928 天前
最後更新
問題解決
WordPress 3.9.0+ v2.0.6 上架:2013-08-16

內容簡介

以下是 WordPress 外掛 PixGridder 的描述:

此外掛展示頁面可參照:PixGridder,可以透過進入頁面連接進入專業版(pixgridder-pro)

我們較願意稱這款外掛為「網格建構器」而非「網頁建構器」,因為我們通常會將網頁建構器定義為一種工具,可以創建多個區塊,並附帶像是分頁、手風琴、特定區塊、圖庫等短碼,然而此類短碼通常與用戶想要使用的類似外掛不兼容。

PixGridder 相較而言更加簡單,它只能夠透過在 tinyMCE 編輯器上根據用戶決定的列來分割網頁所在需要的功能。如此一來你就可以使用你喜歡的外掛和你喜歡的短碼(也可以使用你編輯器上的按鈕),因為編輯器與未使用 PixGridder 時完全相同。

工作原理

PixGridder 無法產生短碼,它僅在文章和網頁中加入以下這樣的 html 註解:<!--pixgridder:row[cols=3]-->

除了來源代碼以外,此註解是隱形的。所以如果您想要停用外掛,您不必擔心您的內容中有許多奇怪和沒有用的短碼,因為所有的東西將對使用者和搜尋引擎機器人都是隱藏的。

然而,如果您想要從頁面的源代碼中刪除此外掛的任何痕跡,您可以啟用「不留痕跡」選項:您將擺脫所有的 HTML 註解,但您的內容將保持不變。

網頁建構器視覺描述

請參閱 第二張截圖

已安裝外掛的標題和版本
預覽選項卡:點擊此選項卡以查看現場網站的預覽更改,但無法透過預覽進行編輯
建構器選項卡:在此您可以使用建構器來編輯您的頁面/文章
列拖曳:使用此功能以對列進行排序並將它們移動到頂部或底部
ID 和 class:使用它來打開對話框,將 ID 或 class 添加到您的列
複製按鈕:複製整個行,並將副本附加到原始行的下方(將複製所有東西,包括列、ID、class 等)
列選擇:選擇您的行基於多少列
刪除:刪除行
警告圖示:當進行不允許的操作時,例如在沒有其他列的空間時添加列,或者嘗試減少列的寬度,如果該列已經達到已允許的最小寬度,此圖示將顯示
新增列:點擊以添加空列
新增列:點擊以添加空列
列拖曳:使用此項目對列進行排序並將其向左或向右移動
列內容:此處顯示內容的預覽(字體和文本顏色將不會反映在前端)
展開列:點擊以增加列的寬度
收縮列:點擊以減少列的寬度
編輯列:點擊以打開對話框,在其中編輯列的內容(一個 tinyMCE 編輯器將在對話框中打開,文本區域的寬度將相對於您使用的主題設置的最大寬度和您正在編輯的列的寬度)
複製按鈕:複製整個列,並將該副本附加到原始列右側,如果有足夠的空間(將複製所有東西,包括內容、ID、class 等)
ID 和 class:使用它來打開對話框,將 ID 或 class 添加到您的列

外掛標籤

開發者團隊

⬇ 下載最新版 (v2.0.6) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「PixGridder」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Here is the demo page: PixGridder where a link to Pro version is available (pixgridder-pro)
I prefer to define this plugin as a “grid builder” instead of a page builder, because a page builder is commonly intended as a tool that allows to create sections and, usually, comes with shortcodes such as tabs, accordions, particular sections, galleries etc… And, in many cases, all these shortcodes are not compatible with other similar plugins you could prefer to use.
PixGridder is instead very simple, because it only allows to split your page into rows and columns by moving the functions available on your tinyMCE editor from the whole page to each column you decide to split your page into. In this way you can use the plugins you prefer with the shortcodes you prefer (and also the buttons available on your tinyMCE editor) since the editor is exactly the same one you would have without using PixGridder.
How it works
PixGridder doesn’t generate shortcodes, it only puts into your posts and pages some html comments like this:
They’re invisible except through the source code. So if you want to disable the plugin you don’t have to worry about a lot of strange and unuseful shortcodes across your content because everything will be hidden for both the users and the search engine robots.
However, if you want to remove any trace of the plugin from the source code of a page, you can do it by enabling the “no trace” option: you’ll get rid of all the HTML comments, but you’ll keep unaltered your content.
Page builder visual description
Take a look to the 2nd screenshot

title and version of the installed plugin
Preview tab: by clicking it you will see the live site with a preview of the changes, not editable from the preview visual itself
Builder tab: where you can edit your page/post by using the grid builder
row dragger: use it to sort your rows and move them to the top or to the bottom
ID and class: use it to open a dialog box where to add an ID or a class to your row
clone button: clone your entire row and append the clone below the original one (everything will be cloned, cloumns, IDs, classes etc.)
column select: select how many columns your row is based on
delete: remove the row
alert icon: this icon will appear when you make a not-allowed operation, such as adding a column where there is no space for other columns or try to reduce the width of column if it already has got the minimum width allowed
add row: click to add an empty row
add column: click to add an empty column
column dragger: use it to sort your columns and move them to the left or to the right inside a row
column content: here is displayed a preview of the content (the font and the text color won’t reflect on the frontend)
expand column: click to increase the width of the column
contract column: click to reduce the width of the column
edit column: click to open a dialog box where to edit the content of the column (a tinyMCE editor will open in the dialog box, the width of the textarea will be relative to the max width set for the theme you’re using and the width of the column you’re editing)
clone button: clone your entire column and append the clone to the right of the original one, if there is enough space (everything will be cloned, content, ID, class etc.)
ID and class: use it to open a dialog box where to add an ID or a class to your column
delete: remove the column
“Disable the grid builder”: tick the checkbox and update the page → now the page is editable without using the grid builder, but the frontend still displays columns and rows, so pay attention to not remove any html comment or you risk to break the layout
“Remove any trace of PixGridder from this page”: tick the checkbox and update the page → all the row and the columns will be removed but without touching the content, still available both on the frontend and on the editor

延伸相關外掛

文章
Filter
Apply Filters
Mastodon