WPJ-Highslide Plugin導入
MTでは画像の表示にLightbox 2を使用していましたが
Highslide JSを知って色んなエフェクトがかけられるので
一目惚れして乗り換えました。ドラッグできるのが可愛いｗ
WordPressでもHighslide JSをと思ったらなんと。
プラグインがあるのですね！お手軽な。
サイドバーにRecent Entriesでお世話になった
Odysseygate.comのおでさんが制作された
プラグインを使用させていただくことに。
コチラからWPJ-Highslide Pluginをダウンロード。
wpj-highslide.phpの18行目をWordPressを
インストールした環境に合わせて書き換えます。
$highslide_path=get_settings(’home’).”
/wordpress/wp-content/plugins/wpj-highslide/”;
うちの場合はlogというディレクトリを作りWordPressを
インストールしてあります。
$highslide_path=get_settings
(’public_html‘).”/log/wp-content/plugins/wpj-highslide/”;
homeのままでは動かなかったのでpublic_htmlに修正
これは環境によって違うみたい。
で
おもむろにWordPressプラグインフォルダにアップロード。
管理画面でプラグインを有効化します。
テーマの管理画面でheader.phpの<body>直下に
<div id=”highslide-container”></div>
タグを入れファイルを更新。
Highslide JSで表示する画像を以下の書式で書きます。
<a href=”images/元 画 像 ” class=”highslide” onclick=”return hs.expand(this)”>
<img src=”images/サ ム ネ イ ル 画 像 ” alt=”Highslide JS” id=”thumb1″
title=”Click to enlarge” width=”" height=”"/>
画像の下にキャプションをつける場合は
上記の画像の書式の下に以下の書式を。
<div class=’highslide-caption’ id=’caption-for-thumb1′>
画像の説明
</div>
参考にさせていただいたのは以下のサイト様。
WPJ-Highslideプラグイン v0.1.0：Odysseygate.com
WPJ-Highslide 0.2：M’s Life
関連記事:
