JackBox

先日、ブログのコメントにてWordPressをRetina対応させる
プラグイン「WP Retina 2X」に関する質問を頂いた。(これ

質問自体は問題無く解決されたようで何よりなんだけど、
余談として「LightboxもRetina対応できたら良いのに・・・」的な話が出て、
少し調べたらRetina対応してるっぽいプラグインを発見。
JackBox – Responsive Lightbox – WordPress Plugin
JackBox – A Responsive Lightbox with Retina Display Graphics and Social Sharing
ただ日本語の情報が全然なかったり、
16ドルと有料だったりで、かなり敷居が高そう^^;

で、その時は見送ったんだけど、ずっと気になってて・・・
見た目とか動作がカッコイイし、なんか面白そう。
ただウチのブログで動く確証すらない状態に16ドルは・・・
と、色々と悩みに悩んだ挙げ句、
「ネタにはなるしイイか!」と人柱へ(笑

とりあえず購入。
JackBox – Responsive Lightbox – WordPress Plugin
↑のサイトの「Purchase」を押して「Create Account」でアカウント作成。
入力する情報は特に難しいことない。
アカウント作成後に再度「Purchase」を押して、支払い方法はPaypalを選択。
もう1つの支払い方法は良く分からない^^;
てか、Paypalだったら18ドルだったー・・・
そして日本円だとPaypal価格が1,934円。
円安の影響もあってか高め・・・

で、いよいよダウンロード。
落としたzipファイルを解凍して、その中の
wp-jackbox.zip をWordPressにインストール。
これでプラグインの導入は完了。

今まで使っていたLightboxのプラグインを無効にして、
「JackBox」を有効にしてみる・・・
そしたら今までLightboxで表示されてた
画像が全て普通の画像リンクに・・・!orz
全く効いてねぇ!

そして色々と見ていて発覚したんだけど、
どうも自動的に画像リンクを置き換える機能がないっぽい・・・!
設定を眺めてみても、それらしい設定がなくて・・・

ヘルプを見たところJackBoxを適応するには、
ビジュアルエディタで画像を貼る。

貼った画像を選択して、
「JB」ボタンを押してJackBoxの動作の設定。

これで初めてJackBoxが有効になるみたい。
うん・・・面倒・・・
過去の記事全てに適応するとか絶望的だし、
これからも画像を貼る度に面倒すぎる!!
それにビジュアルエディタとか使ってない。

これは流石に使うのが厳しい・・・
し、しかし18ドル払ったのに、そんなワケには・・・!!

で、色々と考えて、ちょっと別のアプローチを。

HTML的にJackBoxを有効するには、画像リンクの
aタグのclassに”jackbox”を入れたら良いみたい。
要するに、これを記事出力時に動的に置換できれば・・・!

他のLightbox系のプラグインは出来てるんだし出来るはず!
と調べてみると、意外と簡単に出来そう。
意外と簡単!?WordPressプラグインの作り方 その1 » とりあえず9JP
“the_content”が正に記事出力時のフックっぽい!
ってことで、↑の記事を参考にプラグイン作り・・・

<?php
/*
Plugin Name: JackBox Auto Link
Plugin URI: http://mitsu.three-atmarks.com
Description: 画像のリンクを自動的にJackBoxのコードに書き換えます。
Author: Mitsu
Version: 1.0.0
Author URI: http://mitsu.three-atmarks.com
*/

add_filter('the_content', 'contentFilter');
add_filter('post_gallery','galleryFilter', 2001, 2);

function contentFilter($contentData) {
	global $post;
	$html = preg_replace('/<a((?:(?!class).)*?)>.*?<img(.*?)(alt|title)="(.*?)"(.*?)<\/a>/m', '<a class="jackbox" $1 title="$4" alt="$4" data-jbhover="black-magnify" data-jbtitle="$4" data-jbgroup="jackbox-' . $post->ID . '"><img $2 $3="$4"$5</a>', $contentData);
	return $html;
}

function galleryFilter($output, $attr) {
	global $post;
	$html = preg_replace('/<a((?:(?!class).)*?)>.*?<img(.*?)(alt|title)="(.*?)"(.*?)<\/a>/m', '<a class="jackbox" $1 title="$4" alt="$4" data-jbhover="black-magnify" data-jbtitle="$4" data-jbgroup="jackbox-' . $post->ID . '-' . rand() . '"><img $2 $3="$4"$5</a>', $output);
	return preg_replace('/i.\.wp\.com\//', '', $html);
}

?>

ファイルが1つだけの超シンプルなプラグイン。
中身もすっごく短くてシンプル!
単純に正規表現で置き換えるだけ。
既にclassが書いてあるリンクは対象外にしたり、
JackBox用のタイトルを既存のimgタグから抜き出したり、
上手いことグループ化されるようにしたりと、少しだけ拘ったりも。

とにかく正規表現が難しくて苦労した・・・!!
Rex V: an AJAX Regular EXpression eValuator –
このサイトを利用して、あーでもない、こーでもないと試行錯誤^^;

で、作ったは良いものの、正規表現の部分とか環境依存してそうで恐いので、
プラグインとして公開せずに、ソースコードを載せておくことに・・・。

因みに”post_gallery”の方は、ギャラリーのコードを
出力するときに呼ばれるフィルタ。
これがJetpackのパネル風にする機能と競合してて、
なかなかにややこしいコトに^^;

Jetpackでパネル風に出力すると、何故か画像のリンクが
外部のサーバになってしまっていて、
それが異様に重いって問題が前々からあって、
この際にリンクをウチのサーバに再び戻すコードも仕込んどいた。

↓テスト的に過去の画像からギャラリーを。


杏子かわいい!
・・・じゃなくて、とりあえず正常に動いてそう?

カッコイイし、フルスクリーンの機能があったりと面白い。
ただ開く度にヒストリが溜まるのは戻るときに鬱陶しくなるね・・・
それに開いたらRetinaディスプレイとか関係なく元画像が出てるような・・・?
んーいまいち細かく分からないけど、カッコイイからイイや!^^;
とにかく18ドルが無駄にならなくて良かったー

じゃ、ゲームして寝るー
バイニー☆

test?

JackBox」への1件のフィードバック

  1. ピンバック: 久々に鯖更新 | みつ(@@@)の雑記

コメントを残す