3Gケータイでも作品ギャラリーの閲覧が可能になりました

Web-log・ココログ関連,WordPress,パソコン・インターネット,携帯・デジカメ

Ktai Styleプラグインを使って、3G携帯対応のウェブサイトにしてきました。

ですが、なぜか次のページだと、3G携帯から画像が見られないのです。

試行錯誤の末、次の2点が原因だと言う事がわかりました。

  1. JetpackプラグインのPhotonを使っている
  2. 'image_to_link/ktai_style.php’へのパッチを間違えていた

設定を正しく修正して、見られる様になりました。2番目の解決方法を使っています。

Ktai Style on ギャラリー

1. JetpackプラグインのPhotonを使っている

1.の方は、Photonを有効にすると、width/height属性が取れなくなり、"wp-content/plugins/ktai-style/inc/shrinkage.php"の関数内で表示が消されている事がわかりました。

/* ==================================================
 * @param    array  $attr
 * @return    boolean $is_useless
 */
private function is_useless_image($attr) {
    $is_useless = false;
    if (isset($attr['alt'])) {
        $alt = stripslashes($attr['alt']);
        if (empty($alt) && ( !isset($attr['class']) || !preg_match('/(^| )(wp-image-\d+|attachment-\dx\d)( |$)/', $attr['class'])) ) {
            $is_useless = true; // hide images if the alt string is empty. 
        }
    }
    if ( (isset($attr['width']) && $attr['width'] <= 1) || (isset($attr['height']) && $attr['height'] <= 1) ) {
        $is_useless = true; // hide 1 pixel width/height images
    } elseif ( isset($attr['style']) && preg_match('/\b(visibility:\s*hidden|disypay:\s*none)/', $attr['style']) ) {
        $is_useless = true; // hide hidden styled images
    }
    return $is_useless;
}

widthやheight属性が設定されていて、それぞれのサイズが"1″以下の場合に表示がされなくなります。JetpackのPhotonを無効にしたら、表示される様になりました。

Photonが原因ではないかと気づいたきっかけは、次の記事です。ヒントをありがとうございます。

この記事によると、altやclass属性が正しく設定されていないと画像が表示されない事がわかりました。私の場合、altは設定されていましたが、Photonの為に、widthとheightが正しく設定されていませんでした。これらの事を頼りに探し出したソースが、上記の部分です。

ソースを読むと、Ktai Styleでは、次の場合に、画像が表示されません。

  • alt属性が設定されていない
  • class属性に、"wp-image-“か"attachment-“が設定されていない
  • width属性が1以下か、height属性が1以下
  • style属性で、visibilityがhidddenかdisplayがnoneになっている

あ、Ktai Styleのバグ発見。"display"の綴りが間違えて"disypay"になってる。

Jetpackでwidthとheightが出なくなるのは、設計思想の様です。

2. 'image_to_link/ktai_style.php’へのパッチを間違えていた

実は、真の原因はこちらでした。’image_to_link/ktai_style.php’フックを使って、外部サイトにある画像を直接表示できる様に設定できます。JetpackのPhotonを有効にした場合、http://i[0-2].wp.com/と言うURLのCDNが有効になります。フック関数を書く時にこのURL指定を間違えていました。正しく設定した所、表示できる様になりました。

Posted by お市のかた