這是教程之如何在WordPress.com文章或側欄中插入Flash物件(Widget)-Gigya Shortcode

前言

如果你最近有注意我的更新,你會發現我正在進行版面的小改版,這也是為甚麼我會有機會寫這篇教程的起點。

如果你在WP上曾嘗試加入一些有的沒的,如:計數器、時鐘等插件卻怎麼都沒有辦法顯示,那我想你絕對需要繼續的往下看下去。

如果你曾想過在文章中加入一些播放器,或是影片,又或是照片的投影片,那該死的WP卻始終不顯示你的HTML代碼,那這篇教程會是你的福音。

基於改版的關係,最近腦海中一直都在思考該如何讓這個部落格看起來更有內涵,更讓人不看就吃不下飯(!?)。於是開始試著添加一些一般部落格都會有的各式插件。然而在進行的途中卻發現這坑爹的WP竟然無法支援眾多的HTML代碼,JAVA程式碼更不用說,完全不支援。

於是我利用平時工作中的空檔開始在知識的海洋搜尋解決辦法,偉大的G大神沒有讓我失望。一個被世人稱為Panos的大神某日在自己的部落格上發表了一系列Gigya短程式碼教程。(短程式碼也就是WP獨立開發的程式編碼)

Gigya短程式碼完美了解決了WP無法插入Flash物件及一些無法支援的代碼問題。因此小僕再次利用上班的空檔稍微的研究了一下這個代碼(這讓我看起來像是很認真的工作),以便將如此好物分享給大家。

不過在開始分享前請容許我再廢話一下的聲明:程式開發者不是我,一切資源由原開發者所有。

偉大的基亞(Gigya)

Gigya程式碼提供了一個讓你可以自由的在文章中或是側欄中任意插入Flash物件、影片、播放器以及各類插件的方法。以下就讓我們結束說不完的廢話,開始進入正題吧~

首先,你必須在一大串的代碼當中找到下面的幾樣東西:
  1. 要插入的Flash物件、影片、播放器或是各種插件的URL網址。
  2. 資源的屬性值。
屬性值一般會以屬性="數值"或是<param name="屬性" value="數值">的方式出現在代碼中,不管是前者還是後者都將它們轉換成
屬性="數值"
如果代碼中出現flashvars="變數1=數值&變數2=數值&變數3=數值",也把它們提取出來。
如果你看到的是.swf?或是.widget?後面緊接著一大串的數值,把它轉換成:flashvars="變數1=數值&變數2=數值&變數3=數值"

綜合以上的兩樣東西後Gigya程式碼將會像下面顯示的這樣:

[gigya src="URL網址" 屬性1="數值" 屬性2="數值" ETC.]

或是

[gigya src="URL網址" flashvars="變數1=數值&變數2=數值&變數3=數值" 屬性1="數值" 屬性2="數值" ETC.]

基本上我們需要做的就是從各種插件給的原始HTML代碼中把所需要的東西找出來套入上面的程式中就可以了。
下面是幾個例子方便大家更容易找到訣竅。

例一:

類似我側欄那邊的時鐘插件

原始HTML代碼:

<embed src="http://www.clocklink.com/clocks/5010-gray.swf?TimeZone=GMT0800&&quot;  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

Gigya短碼

[gigya src="http://www.clocklink.com/clocks/5010-gray.swf?TimeZone=GMT0800&&quot;  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"]

結果如下:

例二

日曆插件

原始HTML代碼:

<div style="width: 130px; height: 130px;"><object type="application/x-shockwave-flash" data="http://www.widgipedia.com/widgets/widgiacom/Simple-Calendar-Widget-2539-8192_134217728.widget?__install_id=1313830499565&amp;__view=expanded" width="130" height="130"> <param name="movie" value="http://www.widgipedia.com/widgets/widgiacom/Simple-Calendar-Widget-2539-8192_134217728.widget?__install_id=1313830499565&amp;__view=expanded"&gt; <param name="quality" value="high"><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="width" value="130"><param name="height" value="130"> [後面還有一大串有的沒的]

Gigya短碼

[gigya src="http://www.widgipedia.com/widgets/widgiacom/Simple-Calendar-Widget-2539-8192_134217728.widget&quot; quality="high" allowScriptAccess="always" wmode="transparent" allowScriptAccess="always" width="130" height="130" ]

結果如下:

 

修改插件內容

在Gigya短碼中, width,height,wmode這三個選項是可以自由修改的
width是寬度
height是高度
wmode則是背景顏色,transparent代表透明,opaque代表填滿。
而在填滿的情況下必須添加一個新的代碼bgcolor=#HEX顏色代碼來告訴Gigya你要的背景顏色是甚麼,否則將Gigya將自動導入預設置。

這樣說或許有點抽象,所以現在就讓我們實際演練一次吧!

例三

修改插件內容

從原始HTML碼提取出來的Gigya短碼

[gigya src="http://www.clocklink.com/clocks/5010-gray.swf?TimeZone=GMT0800&&quot;  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"]

修改大小以及背景顏色後的Gigya短碼

[gigya src="http://www.clocklink.com/clocks/5010-gray.swf?TimeZone=GMT0800&&quot;  width="320" height="100" wmode="opaque" bgcolor="#FFFFFF" type="application/x-shockwave-flash"]

結果如下:

後記

掌握了Gigya短碼的訣竅後,只要稍微花點時間分析一下插件的HTML代碼,藉由Gigya的力量,插件神馬的就再也不是問題拉!!
不過必須注意的事項如下:
1) Gigya短碼是HTML碼,因此無法支援JAVA程式碼的轉換。
2) 轉換是請確定URL的結尾是.swf.widget,當結尾是.js的時候就代表這是JAVA程式碼,請放棄這個插件。
3) 要在側欄加入插件的話只要將Gigya短碼貼到Text Widget中就可以了。

*  *  *  *  *  *  *  *  *  *  *

資源參考:
1) Panos大神的網站
2) WP各主題文章寬度列表
3) WP各主題側欄寬度列表
4) 顏色編碼網站1
5) 顏色編碼網站2
6) WP支援代碼說明
7) WP短代碼說明
8) Text Widget說明

插件網站
1) ClockLink

裡面有很多時鐘的插件,點擊View HTML Tag後會出現自訂選項,HTML代碼會顯示在最下方的框框裡。

2) Widgia

裡面有很多不同種類的插件,點擊Get This Widget後會出現另一個小視窗,HTML代碼會顯示在最下方的框框裡,點擊框框後會自動複製代碼

*  *  *  *  *  *  *  *  *  *  *

科科~寫這篇網誌竟然用掉了七小時,比畫圖文還久說~嘖嘖~
如果你們覺得宇宙無敵霹靂有用的話,非常歡迎大家把它分享出去。

(P/S:=公告=那邊我沒有開放留言因為那只是公告,一段時間後就會撤掉所以不要慌,你們還是可以到很官方的留言簿 或是其他的文章中留言的。

Advertisements

9 thoughts on “這是教程之如何在WordPress.com文章或側欄中插入Flash物件(Widget)-Gigya Shortcode

  1. 是好久没来了啦,阿费~
    真是好东西,多谢分享啦
    最近真的是忙到连发呆的时间都没有
    不过再过五天就放假咯
    可是放假也不知道该到哪里去 Lol

  2. 我来了!
    怎么你上一篇发泄得那么……
    感觉都是吃的呢?
    好文雅的发泄!
    哈哈哈~
    哦,原来公告那是不能留言的!

  3. 已经放完假马上都要开学了(¯﹃¯)
    最近WP在我这不稳定经常登录不上不好编辑所以更新不了太多我也很着急

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s