はじめて作ったプラグインなのでうまく動作するかあまり自信がありませんが、lomoさんのところでHighslide JSを知り、誰も作らないようだったので調子にのって作って公開してしまいました。皆さんでテストしてみてください!画像をかっこよくオーバーレイ表示して見せる、いや魅せるステキなJavaScript、Highslide JSをWordPressに組み込むプラグインです。
Downloadはコチラから。162KB
最新バージョンをご利用ください。
使い方(Zipの中のReadme_first_japaneseをご利用ください。)
1. wpj-highslide.phpをエディタで開き、15行目を修正してください。
// 以下の行をWordPressをインストールした環境に合わせて修正してください。
$highslide_path = get_settings('home')."/wordpress/wp-content/plugins/wpj-highslide/";
wordpressという名前のディレクトリにインストールしている場合、修正の必要はありません。
2. 次に画像をオーバーレイ表示するデザインを選びます。
16行目以下 説明、3行のスクリプトという順でデザインを決める部分が並んでいます。
日本語を参考に好きなデザインを選んで、コメントアウト(//を消す)してください。
3. WordPressのプラグインフォルダにwpj-highslideフォルダをアップロードします。
4. WordPress管理画面でwpj-highslideプラグインを有効にします。
5. ご使用中のテンプレートファイルheader.phpの
タグの直下に<div id="highslide-container"></div>を加えます。
位置はJavaScriptで自動制御されるので、まったく直下においてしまって問題ありません(たぶん)。
6. オーバーレイしたい画像を以下の書式で書きます。hrefの中は自由に。
<a>タグ内のhrefは大きい画像を、<img>タグ内のhrefはサムネイル画像を指定します。
<a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
title="Click to enlarge" height="120" width="107" />
7. (オプション)画像に注釈をつけたい場合は、上記6の下に以下のような書式で注釈を書きます。
<div class='highslide-caption' id='caption-for-thumb1'>
This caption can be styled using CSS.
</div>
利用にあたって
Highslide JSはクリエイティブコモンズ非営利2.5の元で提供されています。よってWPJ-Highslideもこれに従います。
http://creativecommons.org/licenses/by-nc/2.5/
◆http://vikjavev.no/highslide/のクレジット表示を外してはいけません。
◆営利目的での利用はできません。
◇http://www.odysseygate.com/へもリンクしてくれたらうれしいな。
Special Thanx: lomoさん(紹介してくださらなければ作りませんでしたw)、Naoさん(WordPress標準ガイドブックのPlugin作成ページを参考にしました!)、Atsushiさん、Kohakuさん(応援ありがとうございますw)。
for English User
You can find usage of this plugin in wpj-highslide.zip. Readme_first_english there! Enjoy it!
Here’s the Latest Version.












この道わが旅:栃木加仁湯温泉を目指して
「紅葉見に行きませんか」とお誘いを頂いて、一体どこに行くのかすらよく知らないまま行って来ました栃木は加仁湯温泉。最寄の駐車場から1時間半ほどかけて歩いていくのだそうです。
いよいよ出発する我々
川口探検隊。この先に一体何が待ち受けているのであろうか!(だみ声のナレーター)