[WordPress] 外掛分享: Protovis Loader

前言介紹

  • 這款 WordPress 外掛「Protovis Loader」是 2010-09-09 上架。
  • 目前尚無安裝啟用數,是個很新的外掛。如有要安裝使用,建議多測試確保功能沒問題!
  • 上一次更新是 2010-09-20,距離現在已有 5340 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
  • 外掛最低要求 WordPress 2.8.0 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

seancarmody |

外掛標籤

charts | images | graphics | javascript | data visualization |

內容簡介

Protovis Loader 是一個外掛,協助您使用 Protovis 腳本。Protovis 是在 Stanford 開發的 JavaScript 資料視覺化庫,可讓使用者在網頁上創建可交互的圖表。

將 JavaScript 代碼合併進 WordPress 文章可能會變得很棘手,因為 WordPress 在文章中輸入文字時會(有意地)對其進行消毒,進而干擾 JavaScript 運作。當我初次嘗試 JavaScript 時,這給我帶來了一些困難,就像這篇文章所描述的那樣。最後,我決定挽起袖子撰寫了一個外掛,使整個過程變得容易得多,而 Protovis Loader 就是這樣誕生了。

Protovis Loader 以以下兩種方式使整個過程變得輕鬆容易:

它隨附 Protovis JavaScript 庫的一份複本,啟用外掛後,連結就會自動包含在頁面標頭中。
它創建了一個名為 [pvis] 的捷徑,讓您非常輕鬆地在網誌文章和頁面中包含 Protovis 腳本。

使用方法:

在文章和頁面中簡單使用 [pvis] 捷徑,您想要包含 Protovis 圖表的位置即可。以下是一些選用參數:

type: ‘chart’(預設值)顯示帶有可選標題的框中的圖表,‘inline’ 沒有框(例如用於製作走勢圖)。
src: Protovis(JavaScript)代碼文件的路徑。
height: 用於圖表的畫布框的高度。
width: 用於圖表的畫布框的寬度。
img: 停用腳本或瀏覽器不支持 Protovis 時使用的替代圖片的路徑。
alt: 要求當停用腳本或瀏覽器不支持 Protovis 時使用的替代圖片相關的替代文本。
caption: 圖片說明文字。

如果在開啟的 [pvis] 標籤和 [/pvis] 標籤之間提供了任何內容,它將被視為要包含的 JavaScript。如果未提供 caption 欄位且提供了 src 欄位,它也可以被解釋為說明。

這是使用這個標籤的一個範例:

[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]

您可以在 the Stubborn Mule 上看到這個外掛的實例。

待完成事項清單

此清單尚未進行排優先級。

改善使用者代理(瀏覽器)偵測。
建立一個選項頁面。
允許自訂 CSS 檔案。
允許另外指定 Protovis JS 圖書館。
替換導入的腳本中的標籤,以允許在腳本中使用捷徑參數。

我相信將會有更多任務等待著我。

原文外掛簡介

Protovis Loader is a plugin which faciliates the use of Protovis scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.
Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.
Protovis Loader makes the whole process a lot easier in two ways:

It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.
It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.

Usage:
Simply use the [pvis] shortcode in your posts and pages where you want to include a Protovis chart. There are a number of optional parameters:

type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)
src: path to a Protovis (javascript) code file
height: height of canvas box for the chart
width: width of canvas box for the chart
img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis
alt: alt text for the fallback image
caption: image caption

If any content is supplied between the opening [pvis] tag and the closing [/pvis] tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but only if a caption field is not supplied and a src field is supplied.
Here is an example of use of the tag:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
You can see the plugin in action on the Stubborn Mule.
To-Do List
This list is not really prioritised yet.

Improve user-agent (browser) detection
Create an options page
Allow custom CSS files
Allow for alterntive specification of the protovis js library
Replace tags in the imported script to allow shortcode parameters to be used in the script

I’m sure there’ll be a lot more!

各版本下載點

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

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


0.1 | 0.1.1 | 0.2.0 | 0.2.1 | 0.3.0 | trunk |

延伸相關外掛(你可能也想知道)

  • Stencil 》Stencil 是最快速的建立驚人視覺效果、增加社交媒體、部落格文章、電子郵件和演示文稿互動率的方式。創建圖像比您想像的更快速、更簡便。, 有了 WordPress 的...。
  • SVG Complete 》此外掛可為您的 WordPress 添加一些 SVG 功能,並使用一種基於 Alexey Ten 的想法並由 Jens Kuerschner 使用的 SVG 技術,這是此外掛的起點。, 在 HTML 中添...。
  • SWFPut – SWFlash Put 》SWFPut 提供文章和頁面的「回應式」視頻。 , , SWFPut 使得視頻的呈現對您的訪客具有可靠性:它處理如下幾個方面的條件,例如主要瀏覽器中 HTML5 視頻格式的...。
  • Graphicsly – The ultimate graphics plugin for WordPress website builder ( Gutenberg, Elementor, Beaver Builder, WPBakery ) 》提供超過13,000個免費和專業的WordPress網站建立圖形資源,讓您的網站更上一層樓。, Graphicly 是您最喜愛的頁面建構器的全方位圖形解決方案,支援檔案(SVG...。
  • Wp chart generator 》WP Chart Generator 使您在部落格上創建圖形更加容易。通過在後台的單一管理,您可以創建任意數量的圖形。這些圖形的管理基於自定義文章類型。, 創建圖形非常...。
  • AskTeamMate ShapeArt 》ShapeArt 是一個 Gutenberg 區塊。它允許內容撰寫人員在文件中插入可自定義的圖形。, 使用此區塊可為您的簡歷生成具有斑點背景的半身照片。, 您可以從預定義...。
  • Relogo 》Relogo 讓您輕鬆地為您的網站添加對 rel=”logo” 標籤的支援。該插件遵照 relogo.org 上發布的規範進行操作。, 使用這個外掛,您可以輕鬆地為您的網站添加該標...。
  • wpGraphicStudio 》wpGraphicStudio 是一個完整的會員制聯盟行銷/網路平面設計解決方案,可以透過此外掛製作高效且易於使用的網路行銷圖形。, 不需要提供冗長的功能,wpGraphicS...。
  • Percent to Infograph 》Percent to Infograph 可以將簡單的百分比 (%) 轉換為帶有一些效果的 Infograph。[percent_to_graph] 簡碼使其變得如此簡單,您只需將 [percent_to_graph dat...。
  • LogoReplacer 》這個外掛程式取代了 WordPress 的預設管理員/登入/註冊頁面。, 所使用的技術相當暴力,但目前是最好的解決方案,這個外掛程式會自動取代修改過的檔案。, 為了...。
  • i2Clipart 》這是一個 TinyMCE 外掛,可讓您在WordPress 網站的文章中插入免費的剪貼畫圖像。在撰寫文章期間,如果您點擊 i2clipart 外掛按鈕,將彈出一個彈出對話框,其...。
  • Clker.com clip art 》Clker.com 外掛可以讓您在撰寫文章時搜尋剪貼畫圖像。它與 clker.com 通訊,執行搜尋並為您顯示剪貼畫結果。, 每個剪貼畫圖像都有三種大小。如果您點擊任何搜...。
  • Markdeep Block 》, 「Markdeep 適用於設計文件、規格、README 文件、代碼文件、實驗報告、部落格和技術網頁。因為源碼是純文字,所以 Markdeep 與軟體開發工具鏈相容良好。」,...。
  • BrandApp 》, 使用我們的 WordPress 外掛,您可以在媒體庫中直接打開 BrandApp,如同您平常將媒體(圖片和影片等)導入並添加到文章、頁面和特色圖片一樣。, 由於您很可...。

文章
Filter
Apply Filters
Mastodon