Ktai Styleのテーマのカスタマイズ〜強行突破作戦[追記あり]
iPhoneやAndroidなどのスマートフォン向けには、Jetpackのモバイルテーマをカスタマイズして使っています。
- モバイルテーマを有効化しました〜翔べ!モバイルテーマ : プラスα空間 (2014年6月8日)
- Jetpackのモバイルテーマのカスタマイズ[追記あり] | プラスα空間 (2014年5月18日)
- Jetpackのモバイルテーマをカスタマイズ(フッタを追加) | プラスα空間 (2014年6月3日)
- JetpackのMobile themeをCustomize(CSS変更) : プラスα空間 (2014年6月10日)
このプラグインは3G携帯にも対応していて、それなりの表示にはなります。ですが、あまり携帯サイトっぽくなりません。日本の3G携帯(ガラケー)では、使い勝手が悪いのです。
なので、3G携帯、PSPなどに対応するために、Ktai Styleと言うプラグインを入れています。かなり凝った作りで、日本の3G携帯事情(当時は、PDC端末もあった)に最適化されています。
普通にインストールしただけだと、PCのブラウザで見た時と、3G携帯から見た感じの統一感がとれません。それと、(X)HTMLの文法的におかしい所があるのです。それで、かなり苦労して、テーマをカスタマイズしました。
- 3G携帯にも対応〜Ktai Styleの激戦 : プラスα空間 (2014年6月11日)
- PSPからつないでみました〜復活のPSP : プラスα空間 (2014年6月12日)
テーマのカスタマイズは、なるべく(全く)Ktai Styleプラグイン本体には手を入れない方針で望みました。プラグインが更新されると、カスタマイズが台無しになってしまいますので。とは言っても、もう3年も更新が無いので、無駄な努力かもしれませんが…。
- テスト環境の構築
- カスタマイズしたテーマの置き場所
- ヘッダのカスタマイズ
- functions.phpの作成
- その他
上記の5つに付いて説明していきます。
1. テスト環境の構築
ホスティングしているサーバにアップロードすれば、3G携帯からの確認ができるのですが、いきなり本番はきついです。非常に基本的な所でミスしてしまいます。なので、ローカルサーバでテストする必要があります。よって、カスタマイズ途中は、ローカルサーバで動作させています。
きちんと表示できているかどうかは、iLunascapeと言うアプリを使って確認しています。User Agent (UA)の変更ができるブラウザだからです。
ですが、ソースコードの確認ができません。そのため、FirefoxのUser Agent (UA)を3G携帯の物に変更してテストしました。設定すべきUAは公開されている物を使いました。
auは、公式の説明を見つけられなかったので、次のウェブサイトを参考にさせていただきました。ありがとうございます。
これで、テスト環境が揃いました。
2. カスタマイズしたテーマの置き場所
プラグインサイトの解説を読んでいただければわかりますが、Ktai Styleプラグインとは別な場所に、Ktai Style専用のテーマディレクトリを作って、そこに入れます。場所は、"wp-content/ktai-themes/"です。
% cd wp-content/ % mkdir ktai-themes % cp -rp ../plugins/ktai-style/themes/green/ orange
私は、"green"と言うテーマを、"orange"と言う名前にコピーして使いました。
コピー後、style.cssの中身を編集します。編集するべき所は、中身を見たらわかると思いますので、割愛します。
3. ヘッダのカスタマイズ
ヘッダのカスタマイズが、一番苦労しました。header.phpで、ヘッダを宣言している部分だけ紹介します。
<?php $service_type = ks_service_type();
$mimetype = strcasecmp($service_type, "FOMA") ? "text/html" : "application/xhtml+xml";
ks_use_appl_xhtml(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="<?php echo $mimetype; ?>; charset=<?php ks_charset(); ?>" />
<title><?php if (ks_is_redir()) {
_e('Confirm connecting to external sites', 'ktai_style');
} else {
ks_title();
} ?></title>
<?php ks_wp_head(KTAI_NONE_PC_HEAD); ?>
</head>
概要としては、次の通りです。
- FOMAとそれ以外の場合で、cotentのMime Typeを変更
- <html>構文を書き直す
オリジナルの実装だと、ks_service_type()を呼び出す事で、3G携帯はキャリアを問わず、"application/xhtml+xml"になってしまいます。ですが、この実装は正しくない様です。FOMA以外は、ks_force_text_html()を使って、"text/html"に直せば良いだろう、と思っていたら、style指定(CSS)がすべて消えてしまいました。これは困ります。Ktai Styleは、ks_service_type()を使わないと、style指定を削除する仕様になっている様です。
DOCTYPEやcontentをどうすれば良いかは、次のウェブサイトを参考にさせていただきました。ありがとうございます。
“FOMA"の時だけ"application/xhtml+xml"にし、それ以外は"text/html"にすれば良い様です。Ktai Styleのオリジナルの実装で、DOCTYPE宣言はあっていましたので、そのまま使いました。また、<html>での文書タイプが違います。これも、上記のウェブサイトの通りに変更しました。この変更をしないと、UAをSoftbankに変えたとき、正しい表示ができませんでした。
他の部分は、色やアイコンなどなので、お好みにあわせて修正してください。
4. functions.phpの作成
functions.phpに、header.phpなどの修正だけでは対応できない事を記述します。
<?php
function my_ks_fix($buffer) {
$entities = array(
""" => """,
"&" => "&",
"<" => "<",
">" => ">",
" " => " ",
"¡" => "¡",
"¢" => "¢",
"£" => "£",
"¤" => "¤",
"¥" => "¥",
"¦" => "¦",
"§" => "§",
"¨" => "¨",
"©" => "©",
"←" => "←",
"↑" => "↑",
"→" => "→",
"↓" => "↓",
"↔" => "↔",
"↵" => "↵",
);
foreach ($entities as $entkey => $entval) {
$buffer = str_replace($entkey, $entval, $buffer);
}
// bug fix for Ktai Style Header
$buffer = str_replace('<html>', '', $buffer);
return $buffer;
}
add_filter('raw_content/ktai_style.php', 'my_ks_fix');
function my_ks_keep_externalsite_image($replace, $orig, $src) {
if (preg_match('#^https?://(ecx.images-amazon.com/images/|thumbnail.image.rakuten.co.jp/)#', $src)) {
$replace = $orig;
}
return $replace;
}
add_filter('image_to_link/ktai_style.php', 'my_ks_keep_externalsite_image', 10,3);
?>
概要は、次の通りです。
- 特殊文字の変換
- <html>文の削除
- Amazonなどの画像の直接表示
まず、特殊文字の変換です。my_ks_fix()の中で変換していますが、割愛します。この変換をしないと、次の様なエラーになります。
→(→)などの文字が使えないと言われてしまいます。仕方が無いので、直接10進数で指定する様に変換しました。実際には、もっとたくさんの種類の文字の変換をしています。次のウェブサイトを参考にさせていただきました。ありがとうございます。
それと、3.の様に<html>を書き直してしまうと、ks_service_type()が出力する<html>とぶつかってしまいます。なので、ks_service_type()が出力する<html>をstr_replace()で強制的に消しています。
後は、’raw_content/ktai_style.php’にフィルタを追加すればOKです。
また、Amazonなどの画像をそのまま表示させる様にしました。プラグインのFAQにもやり方が載っています。次のウェブページなどを参考に修正しました。ありがとうございます。
そして、’image_to_link/ktai_style.php’にフィルタを追加します。
5. その他
他は、footer.phpに、アクセス解析用のタグを入れたり、アイコンを変更したりしています。それほど難しくないので、省略します。
ただ、一つだけハマった事があります。footer.phpをvi(vim)で編集したのですが、最終行に改行が追加されてしまいます。
% od -c footer.php : 0004100 b o d y > < / h t m l > \n
最後に、"\n"が追加されています。そのため、出力された(X)HTMLの最終行に、空行が入ります。emacsで編集して、"\n"を削除しました。
% od -c footer.php : 0004100 b o d y > < / h t m l >
この"\n"があると、</html>の後に文字があると言う事で、文法エラーになります。
実は、文法上のエラーが多少あっても、3G携帯のブラウザだと表示されてたりします。ですが、気持ち悪いので修正しました。
(追記 2014-06-13 23:58)
最後は、次のウェブサイトで紹介されている、gooモバイルのサイトビューワを使って確認しました。ご紹介ありがとうございます。
gooモバイルのサイトビューワ。docomo, au, Softbankを選べます。