携帯閲覧対応いろいろ

2011.04.04

Ktai Style と SI CAPTCHA Anti-Spam を使用しているのだが、いくつかやりたい事や、うまくいかない事があって、いろいろ編集したのでまとめ。

■ やりたかった事や、うまくいかなかった事。

  1. Ktai Style を使用していて、縮小画像が表示されない。
  2. ktai-style を使用して、固定ページにコメントを表示させたい。
  3. 携帯で見ると認証画像が表示されない。
    Firefox で「User Agent Switcher (0.7.3)」を使って携帯モードで見る時は OK なのだが・・・。

■ Ktai Style を使用していて、縮小画像が表示されない。
縮小する画像が入っているディレクトリのパーミッションが 755 になっていた。
757 にして無事解決。

念のための覚え書き
「Ktai Style マニュアル」の「よくある質問と答え」より

3G 端末で見ても画像がインライン表示されない
3G 端末, ウィルコム, スマートフォン等で見たとき画像がインライン表示されない場合は以下の点を確認してください。
ウェブログ配下の画像であるか (外部サイトの画像は従来通りリンクへの変換です)。
当該画像が入っているディレクトリーに、WordPress (ウェブサーバー) からの書き込み権限があるか。wp-content/uploads 配下のディレクトリーのパーミッションが 757 になっていないと縮小画像が作成できず、インライン表示もされません。
当該画像の img 要素で alt 属性が空になっていたり、width, height 属性の値が 1 になっていないか。この場合、適切な alt 文字列を補完してやったり、適切な width, height 値を与えてやれば画像が出ます。WordPress 2.5 のメディアアップロードは、デフォルトでは「キャプション」(== alt 属性用の文字列) が空白ですので、何も指定しない場合、alt=”” という img 要素を作ってしまいます。
PHP に GD が組み込まれているか確認してください。GD がない場合は画像の縮小処理ができないため、すべてリンクになります。GD がないと、WordPress の利用自体が不便になるため、サーバー管理者に PHP の再インストールを要求してみてください。
どうしても原因不明の場合、inc/shrinkage.php の10行目にあるコメント (KTAI_SHRINKAGE_DEBUG) を外してデバッグモードにしてください。この場合、サムネール作成時のエラーがブラウザーに表示されますので、その内容と shrinkage.php のソースコードを突き合わせて原因を調べてみてください。

■ ktai-style を使用して、固定ページにコメントを表示させたい。
これは、ktai-style に付属しているマニュアルを見て解決。
僕の場合はデフォルトテーマを使用しているので「wp-content\plugins\ktai-style\themes\default」内の「page.php」の 10行目に以下の記述を追加。

<?php ks_header();
global $ks_settings;
?>
<!--start paging-->
<?php if (have_posts()) : the_post(); ?>
	<div<?php echo $ks_settings['h2_style']; ?>><h2><?php the_title(); ?></h2></div>
	<?php ks_content(__('(more...)')); ks_link_pages();
	edit_post_link('<font color="' . $ks_settings['edit_color'] . '">' . __('Edit page') . '</font>', '<div><img localsrc="104" alt="" />', '</div>');
	ks_posts_nav_link(' | ', '<hr /><div align="center">', '</div>');
	comments_template();//ページにコメントを表示させる。
else: ?>
	<h2><?php _e('Not Found', 'ktai_style'); ?></h2>
	<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif;
ks_footer(); ?>

■ 携帯で見ると認証画像が表示されない。
こちらでも書いたが、「wp-content/plugins/si-captcha-for-wordpress」内の「si-captcha.php」を編集して、認証画像は縮小しない設定にした。
(ついでに「キャプチャオーディオ」と「画像のリフレッシュ」も編集した。)
1063 行目　キャプチャ画像
編集前

echo '<img id="'.$label.'" class="si-captcha" src="'.$securimage_show_url.'" alt="';

編集後

echo '<img id="'.$label.'" class="si-captcha ktai" src="'.$securimage_show_url.'" alt="';

1102 行目　キャプチャオーディオ
編集前

<img class="captchaImgAudio" src="'.$si_captcha_url.'/images/audio_icon.png" alt="';

編集後

<img class="captchaImgAudio ktai" src="'.$si_captcha_url.'/images/audio_icon.png" alt="';

1116 行目　画像のリフレッシュ
編集前

echo '      <img class="captchaImgRefresh" src="'.$si_captcha_url.'/images/refresh.png" alt="';

編集後

echo '      <img class="captchaImgRefresh ktai" src="'.$si_captcha_url.'/images/refresh.png" alt="';

■ Softbank の携帯電話はこれで OK だったが、Docomo の携帯電話では、なぜか表示できなかった。
「SI CAPTCHA Anti-Spam」のキャプチャ画像は常に「PNG」が作成されているのだが、これが原因らしい。キャプチャ画像を「JPG」にするために、「wp-content\plugins\si-captcha-for-wordpress\captcha-secureimage」内の「securimage_show.php」を編集。
73 行目
編集前

$img->image_type = 'png';

編集後

$img->image_type = 'jpg';

129 行目
編集前

$img->image_type = 'png';

編集後

$img->image_type = 'jpg';

「Ktai Style マニュアル」を読むと…。

元画像が PNG (または GIF) 画像の場合、携帯電話用サムネールは PNG, GIF 両方を作成します (****.ktai.png, *****.ktai.gif)。また、元画像と同じサイズの GIF (または PNG) 画像も作成されます。「PNG, GIF 自動切り替え機能」により、i-mode 端末では GIF 画像を表示／ソフトバンク PDC 端末では PNG 画像を表示するため、PNG, GIF 画像をシームレスに扱えます。なお、JPEG 画像が表示できない端末については考慮していません。

とのこと。

「SI CAPTCHA Anti-Spam」のキャプチャ画像は元画像という概念にならないのであろう。
とにかく、これでやりたいことがとりあえず出来た。
ほっ。

コメント