WordPressでFlash

◎WordPressでFlash
●WordPressでFlashが表示されない原因
Adobe製品で自動生成されるコードでは不具合があるため注意。
具体的にはembedタグに問題あり。
また、通常のHTMLサイトの感覚での相対パス記述が原因となる事も。

手順が煩雑なため、大量に扱う場合はSWFファイル表示用のWordPressプラグインを利用するのが一般的。
●WP-SWFObject:比較的一般的


Flashに限らず、WordPressでのファイル参照は絶対パスが基本

参考サイト
◎参考サイト:取り敢えず表示したい
●WordPressで構築したサイトでFlashコンテンツを表示させる « messaliberty 日本語
http://jp.messaliberty.com/201……ess_flash/
プラグインを利用する方法とコードを自分で書く方法とあり。
トップにムービーを表示する程度ならばコードがおすすめ。

●SWFObject を使用してFlashファイルをページに埋め込み、iPhone用に代替画像を表示 – Web Tech Log by 1KB
http://1kb.jp/blog/archives/233
プラグインのインストールを促すのでは無く、代わりの画像を表示。
単純にウェルカムムービーとしてのFlashの場合は非常に有効。


個人的にはWordPressに限らず代替画像は欲しい所。
シェアは少ないものの、最新プラグイン非対応のマシンのユーザーはかなりにのぼる。
単純にiPhone・iPad対策で無く、できれば検討を。

◎参考サイト:応用
●xml+FlashのギャラリーをWordPressテーマ化し、更新出来るようにする為の作成チュートリアル – かちびと.net
http://kachibito.net/wordpress……orial.html
かなり本格的な情報。
動画中心のギャラリーを作りたいフラッシャー向け。

サンプルコード
◎サンプルコード
※代替画像を表示する事が主眼、プラグインのダウンロードを促さない
●基本

<object data="SWFファイルの絶対パス" type="application/x-shockwave-flash" width="横幅" height="縦幅">
<param name="movie" value="SWFファイルの絶対パス"></param>
<param name="play" value="true"></param>
<param name="loop" value="true"></param>
<!-- 以下、代替記述。画像以外にテキストもOK -->
<img src="代替画像の絶対パス" width="横幅" height="縦幅" alt="メインイメージ" />
<!-- 代替記述ここまで -->
</object>

●テーマファイルにFlashファイルも含める場合
トップにのみムービーを配置する場合などで、階層構造が以下の様な場合。
テーマファイルフォルダ>images>main.swf(Flashムービー)、main.jpg(代替画像)
横幅:960px、縦幅:300px

<object data="<?php bloginfo('template_url');?>/images/main.swf" type="application/x-shockwave-flash" width="960" height="300">
<param name="movie" value="<?php bloginfo('template_url');?>/images/main.swf"></param>
<param name="play" value="true"></param>
<param name="loop" value="true"></param>
<img src="<?php bloginfo('template_url');?>/images/main.jpg" width="960" height="300" alt="メインイメージ" />
</object>

※bloginfo(‘template_url’):テーマファイルディレクトリのURL
表示が崩れる場合は改行を削除。


WordPressの投稿画面にHTMLコードを入力する場合、改行タグが自動挿入されるため注意。
予想外の表示になる場合は出力されたコードを確認する事。

Related posts

タグ: , ,

コメントは受け付けていません。