WordPressの携帯電話プラグインをがっつりカスタマイズしてKtai Styleに移行

Tweet

Check

WordPressの携帯電話プラグインについては以前にも書きましたが。

WordPressのモバイルプラグイン再考 – カイ士伝
https://bloggingfrom.tv/wp/2008/06/04/192

WordPressの携帯電話プラグインにはMobile Eye＋とKtai Styleがあり、前者はもう開発が止まっているものの外部リンクのGoogle変換や外部画像読み込みが便利。対する後者は絶え間ない更新が続いており、絵文字も豊富で対応機種も幅広いのですが、Mobile Eye+で挙げた特徴は備えていない。なので今はMobile Eye＋にパッチを当てて運用していたわけです。

Mobile Eye+ パッチ導入 – カイ士伝
https://bloggingfrom.tv/wp/2008/08/15/344

しかしやんごとなき事情からKtai Styleのある機能が必要になりまして、ちょちょいとヤホーじゃなかったゴーゴルで調べていたらこんなページを発見。

Ktai Style よくある質問と答え
http://wppluginsj.sourceforge.jp/ktai_style/qa/

おお、これ見たら自分がMobile Eye＋に求めていたことが全部Ktai Styleでできるじゃないか！

ということで夜中にいきり立ってしまい一通りカスタマイズしてしまいました。

外部画像表示

まずは外部サイトの画像表示。サンプルはAmazonです。以下は該当部分の引用。

Amazon の画像をそのまま表示したい

デフォルトでは、外部サイトの画像はリンクに変換されるため、Amazon アフィリエイトの画像もリンクになります。これを画像そのまま表示させるには、image_to-link フックを使います。以下のようなコードを、使用している携帯テーマの functions.php に追加してください (functions.php がなければ作る)。「http://ecx.images-amazon.com/images/」の部分は、実際に挿入される画像 URL にあわせて適宜修正してください。

function ks_keep_amazon_image($replace, $orig, $src) {
	if (preg_match('#^http://ecx.images-amazon.com/images/#', $src)) {
		$replace = $orig;
	}
	return $replace;
}
add_filter('image_to_link/ktai_style.php', 'ks_keep_amazon_image', 10,3);

PHPど素人にはfunctions.phpを作ることの意味もわからなかったのですが、要はテキストファイルに上記コードをそのままコピー、そしてPHPファイルの宣言である <?php と ?> でこのコードを挟み込み、あとは「functions.php」という名前で保存すればOKです。ファイル保存場所は自分が使っているテンプレートのフォルダの中で、初期設定なら/wp-content/plugins/ktai_style/themes/default/ の中ね。

さらにURLを変更すればほかのサイトも読みこめるとのことなので、こんなかんじでいじってみました。コピペしやすいように <?php つきですよ。

<?php
function ks_keep_amazon_image($replace, $orig, $src) {
if (preg_match(‘#^http://ecx.images-amazon.com/images/#’, $src)) {
$replace = $orig;
}
return $replace;
}
add_filter(‘image_to_link/ktai_style.php’, ‘ks_keep_amazon_image’, 10,3);

function ks_keep_flickr_image($replace, $orig, $src) {
if (preg_match(‘#^http://static.flickr.com/#’, $src)) {
$replace = $orig;
}
return $replace;
}
add_filter(‘image_to_link/ktai_style.php’, ‘ks_keep_flickr_image’, 10,3);

?>

赤字が上のAmazonから変更したところ。プログラミングの知識ないまま見よう見まねでやってみましたが、これでFlickrの画像も無事読み出せました。モバイルで表示したい画像なんてAmazonとよく使う画像共有くらいだろうから、いくつか自分で設定すれば十分まかなえそう。あとはフォト蔵を設定しとこうかな。

外部リンクのGoogle変換

つづいては外部リンクをGoogleに変換する方法です。素材はこちら。

外部サイトへのリンクを通勤ブラウザ等の変換サービス経由にしたい

external_link フックに独自の変換関数を割り当ててリンク先 URL を変更すれば、いきなり変換サービス経由リンクにできます (バージョン 1.00 から利用可能)。もしくは、redir フックで中継ページの文言を変更することも可能です (バージョン 1.20 から利用可能)。以下のようなコードを、利用中テーマの functions.php に書けば、MT4i と似た中継ページにできます。

function ks_sjk_redir($html, $url) {
	$html = '<p>別のサイトへジャンプしようとしています。</p><p>↓クリック<br /><a href="'
	. attribute_escape($url) . '">' . attribute_escape($url) . '</a></p>';
	$sjk_link = 'http://www.sjk.co.jp/c/w.exe?y=' . rawurlencode(preg_replace('|^http://|', '', $url));
	$html .= '<p>上記URLのサイトは携帯電話で正しく表示できないかもしれませんが、下記URLであれば表示できるかもしれません。</p>'
	. '<p>↓クリック<br /><a href="' . $sjk_link . '">' . $sjk_link . '</a>'
	. '</p><hr /><p>前のページへは携帯電話の戻るボタンで戻ってください。</p>';
	return $html;
}
add_filter('redir/ktai_style.php', 'ks_sjk_redir', 10, 2);

すでに functions.php は作成済みなので、その中に上記ソースをペタっと張るだけなのですが、注意点が2つほど。1つは文字コードの問題で、UTF-8で保存してあげないと文字化けします。最初おもいっきりこれにひっかかった……。

もう1つは、上記は通勤ブラウザがサンプルで使われているので、URLをGoogleに変更する必要があること。具体的にはこんなかんじ。

function ks_sjk_redir($html, $url) {
$html = ‘<p>別のサイトへジャンプしようとしています。</p><p>↓クリック<br /><a href=”‘
. attribute_escape($url) . ‘”>’ . attribute_escape($url) . ‘</a></p>’;
$sjk_link = ‘http://www.google.com/gwt/n?_gwt_noimg=1&u=‘ . rawurlencode(preg_replace(‘|^http://|’, ”, $url));
$html .= ‘<p>上記URLのサイトは携帯電話で正しく表示できないかもしれませんが、下記URLであれば表示できるかもしれません。</p>’
. ‘<p>↓クリック<br /><a href=”‘ . $sjk_link . ‘”>’ . $sjk_link . ‘</a>’
. ‘</p><hr /><p>前のページへは携帯電話の戻るボタンで戻ってください。</p>’;
return $html;
}
add_filter(‘redir/ktai_style.php’, ‘ks_sjk_redir’, 10, 2);

これでリンク先がGoogleのモバイル変換になりました。あとはこれを funtcions.php の中にいれればいいだけ。並び順はあまり関係ないっぽいので、一番最後の ?> の前においておけばいいのかな。

ただ1つ課題は、変換の際にURLがうまく認識されないみたいで、/ が %2F になっちゃうんですよね。これなんとか回避できないかなあ。せっかくMobile Link Discovery設定しているブログでもそれがうまく認識されなくなっちゃうのでここはなんとかしておきたいところ。

しかしまあMobile Link DiscoveryしていたらURLに直接アクセスすれば変換してくれるし、とりあえずやりたいことはやれたのでKtai Styleへの移行を確定。ついでにAdSenseやうごくひともまとめて設定しました。こちらは footer.php のファイルに、モバイルGoogle Adsenseは <!–end paging–> 直下に <hr> を入れてからコピペ、うごく人は最後の </body> の前にコピペすれば設定完了です。おつかれさま！

Tweet

Check