在 WordPress 上使用 Flash 物件

Heresy 從 Live Space 轉移到 WordPress 後已經玩了幾天了，也大致搞清楚 WordPress 的整個使用邏輯了。當然，對這個轉移的過程、決定，以及之後遇到的問題，也都有一些想法，不過這部分大概會等之後 WordPress 玩久一點之後再整理發表了～

這一篇，主要是分享一下 Heresy 轉移到 WordPress 後遇到的一個問題，那就是網誌內的 Flash 物件的問題。在 Live Space 的後期，微軟基本上應該是完全開放 標籤的 Flash 物件的！像 Heresy 之前介紹過的 Cooliris Express 照片牆以及 EveryTrail 的地圖，都可以正常地在 Live Space 內使用。

不過，轉移到 WordPress 後，卻發現 WordPress 只透過特殊的語法（shortcodes）支援有限的 Flash 物件，包含了 YouTube、Vimeo、Google Video、Flickr Video 等等（請參考官方支援文件）；而像 CoolIris Express 和 EveryTrail 這些不備支援的網站，在轉換過來後，這些內容也都滅了…

而 Heresy 後來則是花了點時間，大概摸出來要怎麼在 WordPress 上使用任意的 Flash 物件了～這邊就算是分享一下方法了。

WordPress 官方支援

Heresy 實際上看了一下後，可以發現 WordPress 基本上是會把 object、embed 這類的 HTML 標籤都濾掉，而遇到支援的內容，則是會轉換成另一種形式（BBCode）的語法；像 YouTube 的影片，他的語法基本上就是：

[youtube=http://www.youtube.com/watch?v=3b0Jza5vxLk]

其實還滿簡單的？只要先輸入 [youtube=]，在貼上 YouTube 的網址就可以了～而如果要指定寬高，則可以再加上「&w=600&h=400」這樣的語法，也就是變成：

[youtube=http://www.youtube.com/watch?v=3b0Jza5vxLk&w=600&h=400]

這樣就可以在 WordPress 裡插入一個寬是 600、高是 400 的 YouTube 影片了～而其他有支援的網站呢？其實也大同小異，只要看一下官方支援文章內的範例，應該都可以玩得出來。

使用 gigya 使用其他 Flash 物件

那如果是遇到 WordPress 不支援的網站呢？這時候就要靠 [gigya] 這個標籤了！雖然這個標籤似乎一直都不在 WordPress 的官方支援文件內，不過 Heresy 自己試過，應該是可以正常在 WordPress.com 上運作的～關於這個標籤的詳細說明，可以參考《The gigya shortcode》這系列的文章。

以該違章的說法看來，gigya 的用法相對 youtube 這類的 shortcodes 來說似乎比較複雜一點，可能要稍微了解一下 HTML embed 的語法，才能了解它的意義；不過在 Heresy 來看，完全無視其實也是可以很方便地使用的！ XD

基本上，這一類可以讓人加到網頁裡的 Flash 物件，大多都會提供他的 HTML 原始碼，形式會是：

<object …>
<param name="…" value="…" />
…
<embed type="…" src="…" …> </embed>
</object>

我們可以發現，實際上它是由 <object> 這個標籤包著多個 <param> 以及一個 、這兩種標籤來組成的；而實際上在大部分的狀況下， 會相當地長、並且包含了所有需要的資訊。所以其實要把這類的內嵌程式碼轉換成用 [gigya]，我們只需要 的內容基本上就夠了！

而做法呢？很簡單，就是把所有的 HTML 標籤都砍掉，只留下

<embed type="…" src="…" … > </embed>

接下來，只要把前面的「<embed」改成「[gigya」、最後方的「>」改成「]」，這樣就可以了！而修改完後，基本上就會是：

[gigya type="…" src="…" …]

下面 Heresy 用 CoolIris Express 的照片牆來做說明，他提供的 embed code 基本上會是：

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyODYxMTQwNTU4NDkmcHQ9MTI4NjExNDQxMjI1OCZwPTkwMjA1MSZkPSZnPTEmb2Y9MA==.gif" />
<object id="ci_08389_o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="248">
  <param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf"/>
  <param name="allowFullScreen" value="true"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="bgColor" value="#121212" />
  <param name="flashvars" value="z=qoeWg3LoUPO1" />
  <param name="wmode" value="opaque" />
  <embed id="ci_08389_e" type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" width="400" height="248" allowFullScreen="true" allowScriptAccess="always" bgColor="#121212" flashvars="z=qoeWg3LoUPO1" wmode="opaque">
  </embed>
</object>

這樣的樣子（這是有登入的狀況，沒登入的話可能會再複雜一點，不過不重要）。 而在這邊，我們只要取出 的部分，所以就是：

<embed id="ci_08389_e" type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" width="400" height="248" allowFullScreen="true" allowScriptAccess="always" bgColor="#121212" flashvars="z=qoeWg3LoUPO1" wmode="opaque"> </embed>

而修改後，就會變成

[gigya id="ci_08389_e" type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" width="400" height="248" allowFullScreen="true" allowScriptAccess="always" bgColor="#121212" flashvars="z=qoeWg3LoUPO1" wmode="opaque"]

而如果要修改他的大小的話，一般他也都會包含 width 和 height 的資訊（上面黃底的部分），只要修改成自己要的數值就可以了！

而這樣的結果，貼到 WordPress.com 上就會是：

附註

在使用上可能要注意的是，由於這段編碼大多會含有特殊字元，像「"」就可能會被所使用的編輯器自動轉換為「&quot;」，而導致無法正確地使用；像右圖就是因會轉換的關係，導致無法正常顯示的例子。

所以建議在編輯的時候，請切換到 HTML 的純文字編輯模式下輸入，以避免出錯。

而如果使用 Windows Live Writer 的話，在「程式碼」模式下編輯後，切到「編輯」模式也會進行特殊字元的轉換，雖然可以透過調整設定在一定的限度下解決（[部落格帳號] – [部落格選項] – [進階]，將 [標記語言] 改為 [HTML]），但是 Heresy 並不建議這樣使用；個人是建議把這部分的東西留到最後，在發表前，切換到「程式碼」模式，把 [gigya] 的程式碼貼上去，然後不要切換模式，直接發表，這樣就不會觸發轉換功能了。

額外參考：WordPress 支援的語法