WordPressでKtai Styleプラグインを使って携帯用表示をさせるときに、特定の画像をテキストにしたいことがありました。そこで携帯用表示時には、特定のclassのimg画像をaltの代替テキストに置き換えるようにしてみました。プログラムソースと一緒に公開します。
なぜそうしたのか
携帯用表示には、Ktai Styleプラグインを使っています。画像は自動で縮小され、とても便利です。しかし自分の使い方で不都合が起こりました。見出しに画像を使っている場合に、縮小された見出し画像の見栄えが悪かったのです。元が大きい画像だと、文字も含めて余計に小さく感じることも。
そこで見出しは、携帯では画像を表示せずに代替テキストのみを表示したいと思いました。そのような処理は、Ktai Styleの関数にはなさそうなので、下記プログラムを書いて対処しました。（WordPress3.2.1で確認）
ソースコード
/*
ktai style で、特定のclassの画像をaltの文字に置換える
（見出し画像を携帯ではテキスト表示にしたい場合などに活用）
*/
// 初期設定（function.php？）などに
define( 'KTAI_IMG_TO_ALT_CLASS', 'ktai-alt' ); // 置換えるimg画像のclass名
// function.phpなどに
// フィルタ用関数
function ktai_img_to_alt_by_class( $img_html, $orig_html ="", $src ="" ){
$r = $img_html;
if( defined( 'KTAI_IMG_TO_ALT_CLASS' ) ){
if( preg_match( '/class=[\"\']?([^>\"\']*)/i', $img_html, $m ) ){
if( strpos( " ".$m[1]." ", " ".KTAI_IMG_TO_ALT_CLASS." " ) !== false ){
preg_match( '/alt=[\"\']?([^>\"\']*)/i', $img_html, $m );
$r = $m[1] ? $m[1] : "";
}
}
}
return $r;
}
// ktai styleにフィルタを設定する
add_filter( 'ktai_image_to_link', 'ktai_img_to_alt_by_class', 10 );
Ktai Styleが出力するimg画像のタグをフィルターで書換えています。
（フィルター解説の$imageは$orig_htmlのことだと思いますが、$orig_htmlと$srcはテスト時に値が一度も入っておらず謎でした。今回$orig_htmlを使う方が確実だと思ったのですが）
使い方
上記ソースを、使用テーマのfunction.phpなどに入力します。
記事内で、テキストに置き換えたいimg画像にclassとalt属性を指定します。
↓
<img src="…" class="ktai-alt" alt="携帯では画像ではなくこの代替テキストを表示します" />
もちろんKtai Styleプラグインを有効にしていないと意味がありません。
以上。
その他、つらつらと
最初、見出しにはimg画像を使わず、CSSで背景画像による画像置き換えをしていました。ちゃんとHTMLでも見出しの文字を入れつつ、背景画像と表示が重なるのでCSSで文字を非表示に。するとCSSの違うKtai Styleでは文字のみで表示出来ます。スマートではないのですが問題はありませんでした。しかしテキストを非表示にするのはSEO対策的には良くないかもしれない…ということで、見出しに画像を使うことになったという経緯です。
SEO対策的にというのはわかるけど、CSS的には勿体ない話です。デザインを変更する場合、CSSなら一気にデザインを変更できるのに、img画像を使っちゃったらHTMLのコーディング変更も必要です。デザインとロジックを分けるCSSの役割が台無しです。更にこれからHTML5でアプリ的な使い方が増えると、非表示も多用されると思うのですが、どう折り合いをつけることになるのでしょう。このような問題の原因は、検索アルゴリズムというより、非表示などを悪用してスパムサイトを作る人たちにあるのでしょうね。
…とまぁ、携帯用CSSや画像を全部作れって話でもありますが（汗）。しかし、優秀なプラグインを使わせて頂くことも含めて、そもそもコンピューターってある程度楽をする為にあると思いません？？？
見出しの見栄えとSEO対策を合わせて考えると、今回の機能は既にプラグインにあるか誰かがやっていると思いましたが、検索してもほとんど該当しないのは意外でした。どうか誰かのお役に立ちますように。
ちなみに見出しに画像を使っているのは、このサイトのことではありません。執筆現在、このサイトのデザインはほとんど手つかずです。いずれなんとかしなきゃ…。(^_^;)
お付き合いありがとうございました。読んでくれてありがとう！