WordPressのKtai Styleで、特定の画像をaltのテキストに置き換える

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対策を合わせて考えると、今回の機能は既にプラグインにあるか誰かがやっていると思いましたが、検索してもほとんど該当しないのは意外でした。どうか誰かのお役に立ちますように。

ちなみに見出しに画像を使っているのは、このサイトのことではありません。執筆現在、このサイトのデザインはほとんど手つかずです。いずれなんとかしなきゃ…。(^_^;)
お付き合いありがとうございました。読んでくれてありがとう!

4 thoughts on “WordPressのKtai Styleで、特定の画像をaltのテキストに置き換える”

    1. まさか超有名人、ゆりこ@プラグイン作者さんからコメント頂けるとは!
      Ktai StyleプラグインはWordPressを使う際に必ず入れています。素晴らしいプラグインありがとうございます!

      ゆりこさんの「この改造はいいですね」の一言に喜んでいるところです。機能採用で「極僅かなりともWordPress界に貢献したことになるのかも?!」と考えると嬉しいです。
      この記事に「※同機能は既にKtai Styleに搭載されています」というような注意書きが出来る日を楽しみにしています。

      コメントありがとうございます。

  1. 実は本体コードに組み込んでしまうと非常に少ないコードで実装できてしまうんですよ。
    問題はクラス名をどうするか。

    ご提案の「ktai-alt」ではなく、実際の動作である「画像を隠す」ことから class=”ktai-hide” あたりにしようかと思っています。
    しかし、もともと class=”ktai” と書くと画像を縮小せずにそのまま表示する実装があるため、それとの整合性がいまいちに見えます。
    といって、単なる class=”hide” だと PC 向けの class 名として存在しそうですから使えません。

    もうちょっと考えさせてください。

    1. ゆりこ@プラグイン作者さん、コメントありがとうございます。

      プラグイン内部の関数などで少ないコードで実装できるんですね。余計なコードはなければない程良いともいえますので素晴らしいです。
      クラス名が何であろうと同等機能が使えるのであれば、実装されたときに活用させて頂きます!

      楽しみに待っています。ありがとうございます。

ゆりこ@プラグイン作者 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


Deprecated: attribute_escape の使用はバージョン 2.8.0 から非推奨になっています ! 代わりに esc_attr() を使ってください。 in /home/ohaya/wave-sight.net/public_html/haya.wave-sight.net/cms-wp/wp-includes/functions.php on line 5213

Deprecated: attribute_escape の使用はバージョン 2.8.0 から非推奨になっています ! 代わりに esc_attr() を使ってください。 in /home/ohaya/wave-sight.net/public_html/haya.wave-sight.net/cms-wp/wp-includes/functions.php on line 5213

Deprecated: attribute_escape の使用はバージョン 2.8.0 から非推奨になっています ! 代わりに esc_attr() を使ってください。 in /home/ohaya/wave-sight.net/public_html/haya.wave-sight.net/cms-wp/wp-includes/functions.php on line 5213