WordPressにGoogle Maps API V3！

リンクURLのテキストをクリックしたら、写真や動画、HTMLコンテンツなどを別のウィンドウでポップアップ表示するのに便利なのが、Highslide JS。 WordPress用のHighslide JSプラグインをいくつか試したのですが、考えるような動作をしてくれませんでしたので、本家Highslide JSを使うことに。

scriptは、”Highslide JS“のサイトの左サイドバーにあるDownroadからZipファイルをダウンロードして、解凍後にFTPでアップロード。 多くのサンプルがありますので、自分好みにカスタマイズすれば宜しいかと。Add to Header等のプラグインを使えば、すべての記事で動作するようになりますね。

＜デモサンプル＞

1.　 Googleサイトディレクトリ メニュー

2.　Flickr フォト

実は、簡単！！・・・と思っていたらWordpressでは標準の「html contents」のサンプルがうまく動作せず・・・・・理由は調査していませんが気にしないことに。

動作すればよいので難しいことは何も確認していませんが、ともかく実現したかった上記サンプルは下記で動作しました。

記事本文には、

<a onclick="return hs.htmlExpand(this, { maincontentId: 'content-1'})" href="http://waox.main.jp/news/?s=highslide">Googleサイトディレクトリ メニュー</a>
<div id="content-1" class="highslide-maincontent">
表示させたいhtmlソース
</div>

幅を指定したければ
<a onclick="return hs.htmlExpand(this, { maincontentId: 'content-1',width:600px})" href="http://waox.main.jp/news/?s=highslide">Googleサイトディレクトリ メニュー</a>
<div id="content-1" class="highslide-maincontent">
表示させたいhtmlソース
</div>

ここで、使う外部scriptは「highslide-full.js」。cssと併せて下記をheaderタグ内に落とし込んで終了。

<script type="text/javascript" src="http://nao.chips.jp/highslide_JS/highslide_demo/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="http://nao.chips.jp/highslide_JS/highslide_demo/highslide/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
hs.preserveContent = false;
</script>

他にもhighslide JSを使用したサンプルを紹介しているサイトは、次の通り。

• http://www.roadrash.no/・・・・・Youtube動画を表示したり、Google Mapを表示させたりと、かなりのサンプルがコチラにもありますので希望にかなうものがあるかもしれません。
• http://www.roadrash.no/highslide-picasa-template/・・・・・Picasa用のHighslideを使用したフォトギャラリーのテンプレート

スポンサードリンク