TRIPLEXXX

前回に続いて、今回は javascript で動的にソースを書き出すことで、Flashを表示しつつ、XHTML Valid にする方法を説明します。

JavaScript で XHTML Valid

通常は以下のように、HTML の任意の位置に <script> タグで括って、document.write(’～’) と記述すれば JavaScript は実行されます。<!– ～ –> の部分はコメントと見なされるので XHTML Valid となります。

ソース:

<script type="text/javascript">
<!--
document.write('
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN=""> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF  WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
');
//-->
</script>

しかし、WordPressのエディタにそのまま記述すると、’ や — が 実体参照の &#番号; のように変換されてしまうため、プラグインを使って document.write() を機能させる必要があります。

プラグインの作成

エントリ内にプレースホルダを記述し、ファイルやカスタムフィールドの内容と置換させます。

プレースホルダ:

<!--xxx_insert:ファイル名またはカスタムフィールドのキー-->

例:　<!--xxx_insert:hoge.js-->  ファイル名　
例:　<!--xxx_insert:hoge,js-->  カスタムフィールド

ピリオドとコンマが紛らわしいですが、ファイル拡張子が .js の JavaScript ファイル名か、カスタムフィールドのキー,jsと記述すれば、JavaScript 用のタグを自動で追加するようにします。書式はお好みで変更してください。

ソース:

function hoge_insert($content)
{
  global $post;

  $pattern = '<!--xxx_insert:([\w\-\/]+)([\.|,\w$]*)-->';

  if(!preg_match_all('@'.$pattern.'@', $content, $fields))
    return $content;

  $search  = array();
  $replace = array();

  for($i=0; $i<count($fields[0]); $i++) {
    $key = $fields[1][$i];
    $ext = $fields[2][$i];
    $sep = substr($ext, 0, 1);
    $typ = substr($ext, 1);
    $val = '';

    if($sep == '.')
      $val = file_get_contents(TEMPLATEPATH.'/'.$key.$ext);
    else
      $val = get_post_meta($post->ID, $key, true);

    if(!empty($val)) {
      switch($typ) {
        case 'js':
          $val = '<script type="text/javascript">'
               . "<!--\n" . $val . "\n//-->"
               . '</script>';
        break;
      }

      $search[]  = $fields[0][$i];
      $replace[] = $val;
    }
  }

  return str_replace($search, $replace, $content);
}

add_filter('the_content', 'xxx_insert');

このソースでプラグインファイルを作成し、プラグインフォルダにアップロードして、管理画面からプラグインを有効にします。

ファイルから置換する場合:

<!--xxx_insert:js/flash_sample.js-->

カスタムフィールドから置換する場合:

<!--xxx_insert:flash_sample,js-->

jQuery で XHTML Valid

jQuery Flash Pluginを使うとさらに簡単に Flash を表示できます。 ソース:

jQuery(function(){
  jQuery('#insert_flash_sample').flash({
    src: '/image/flash_sample.swf',
    width: 200,
    height: 50
  });
});

上記ソースを .js ファイルかカスタムフィールドに記述し、エントリにはプレースホルダを記述します。ここでは例として、カスタムフィールドを使用し、キーを jquery_flash_sample とします。

ソース（エントリ内）:

<div id="insert_flash_sample"></div>
<!--xxx_insert:jquery_flash_sample,js-->

表示結果（Flash）:

なお、jQuery Flash Plugin は Flash 挿入元の div を class=”alt” で置換するため、すでに同じクラス名を使用している場合は、これを変更しましょう。バージョン 1.0.1 なら、216行目 $$.replace 関数です。

this.innerHTML = '<div class="alt">'+this.innerHTML+'</div>';