Simplicity の lightbox でアフィリエイトできない時の対策

2015/01/08 追記

本家 Simplicity 1.4.0 の方で対応されたようです。


Simplicity 1.4.0 から lightbox で画像をギャラリーで表示できるようになった。

てか、Simplicity で実装する前から当ブログでは lightbox 実装してたんだけど、
せっかくなので、独自のやつは外して、
本家の機能をそのまま使うことにした。

が、、、

問題発生 (´Д`)

画像ギャラリーの中に img タグを埋め込むタイプの
アフィリエイトリンクが挟まってると

Lightbox で表示できない

リンク先へ飛ばず、lightbox が出てくる上に読み込めないw

てか、こりゃ当たり前だ。
リンク先が画像じゃないもんね・・・

親テーマには手を出さずに対策を施す

とりあえず、親テーマで lightbox のリンクを生成してる部分を確認

//画像リンクのAタグをLightboxに対応するように付け替え
function add_lightbox_property( $content ) {
  //プレビューやフィードモバイルなどで遅延させない
  if( is_feed() || is_preview() || wp_is_mobile() )
    return $content;

  //既に適用させているところは処理しない
   if ( false !== strpos( $content, 'data-lightbox="image-set"' ) )
    return $content;

  //Aタグを正規表現で置換
  $content = preg_replace(
    '/<a([^>]+?)>\s*(<img[^>]+?>)\s*<\/a>/',//Aタグの正規表現
    '<a${1} data-lightbox="image-set">${2}</a>',//置換する
    $content );//投稿本文(置換する文章)

  return $content;
}
if ( is_lightbox_enable() ) {
  add_filter( 'the_content', 'add_lightbox_property', 11 );
}

親テーマの functions.php 内で発見

フムフム・・・ (・ω・。)

本来なら、remove_filter で関数を消すか、
もしくは、同じ関数名でオーバーライドしたいところだが・・・

そもそも、親テーマの関数は remove できないし、
Simplicity の場合、functions.php の関数はオーバーライドできない。

親テーマには、いっさい手は出したくないので、
さて、どーすっかなー

子テーマ側で、強引に書き換えることにした

親テーマの add_lightbox_property が実行されてから、
後で、さらに書き換える処理にすることにした。

子テーマの functions.php に以下を追加

function add_lightbox_property_thk( $content ) {
	// リンク先が画像以外の場合は lightbox を付けない
	// title の無い a タグにもタイトル付けたいので data-title 追加
	$content = preg_replace(
		"/<a([^>]+?(\.jpg|\.png|\.gif)\"[^>]+?)data-lightbox=\"image-set\">\s*(<img[^>]+?alt=\")(.*?)(\"[^>]+?>)\s*<\/a>/",
		'<a${1}rel="lightbox[Image]" data-title="${4}">${3}${4}${5}</a>',
	$content );

	// 不要な部分に付いた data-lightbox を削除
	$content = str_replace( " data-lightbox=\"image-set\"", "", $content );

	return $content;
}
add_filter( 'the_content', 'add_lightbox_property_thk', 15, 1 );
処理の流れ

  1. 親テーマがリンクに data-lightbox="image-set" を付ける
  2. 子テーマ側で画像(.jpg .png .gif)にリンクしてる部分だけ
    rel="lightbox[Image]"
    に書き換える
  3. (ついでに)title 属性の無い a タグにもタイトル付けたいので data-title 追加
  4. 不要な部分に付いた data-lightbox="image-set" を削除

rel="lightbox[Image]" の部分は、親テーマと別の記述であれば、
data-lightbox="image-1" とかでもいい。

修正後の結果

3日前の記事「USBデータリンクケーブルとマウス&キーボード共有ソフト」には、
amazon にリンクしてる画像が2つある。
それ以外の画像が9枚。

修正前
修正前

修正後
修正後

amazon にリンクしてる画像だけ、
ギャラリーから外れました。

タイトルもちゃんと付いてる (`・ω・´)b

WordPress

Posted by るな