サポート » 使い方全般 » 画像の代替テキストを入れない場合のALTについて

  • wordpressの仕様をいまいち理解していないのでご教示ください。

    記事投稿に「メディアを追加」から画像を挿入する時に

    ・タイトル
    のみを入れた場合、画像のaltはタイトルになっています。

    ・タイトル
    ・説明
    を入れた場合、画像のaltはタイトルになっています。

    ・タイトル
    ・キャプション
    を入れた場合、altはキャプションになっています。

    ・タイトル
    ・キャプション
    ・説明
    を入れた場合、altはキャプションになっています。

    タイトルには何の画像か分かる名前を、
    キャプションには撮影者の名前をいれているので、
    alt属性はタイトルで統一したいと考えてます。

    また、タイトル=ALTなので、
    できれば代替テキストをいれる手間を省略したいのですが、
    どのようにすれば実現できるかご教示いただけないでしょうか?

    ※色々と調べてみたところ、
    画像にaltを自動挿入できるようなので、
    「SEO Friendly Images」というプラグインを入れて、
    altを画像ファイル名になるように設定してみたりしたのですが、
    キャプションを入れるとaltがキャプションになってしまいます。。。。

    よろしくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • SEO Friendly Imagesって正常に動作しますか?
    自分が試した限りではALT属性が変わりませんでした。
    昔、使用した際に忘れたのですが何か不満があってSEO For Imagesを使ってみたら
    理想通りの動きをしたので現在でもSEO For Imagesを使っています。
    https://ja.wordpress.org/plugins/seo-for-images/
    パクリだとかって書かれてますが自分は別物だと考えています。
    尚、モノが古いですが問題なく動作しています。
    プラグインを適用した場合、全てのALTを置換するので、例えば投稿では適用して
    固定ページでは独自にALTを設定したい場合はテーマファイルに
    remove_filter(‘the_content’, ‘seo_for_images’, 100);
    を追加することで除外できます。

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    Ultra beginner様

    ご丁寧にありがとうございます!

    ALTにタイトルがでるように設定してたので
    キャプションが表示されることにばかり気を取られ、
    気づかなかったのですが、
    SEO Friendly Imagesは動いてないようでした。。。
    大変失礼いたしました!

    SEO For Imagesを入れ、
    ALTの設定に「#NAME」を入れたところ、
    ファイル名が表示されました。

    ちなみにファイル名ではなく画像タイトルを入れることはできないのでしょうか?
    ファイル名だと編集ができないので。。。

    #ALTにしてみてください

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    #ALTにしてみたところ、

    ・画像タイトル
    のみを入れた場合は
    理想通り、タイトルがALTに入ったのですが、

    ・画像タイトル
    ・キャプション
    を入れた場合は
    キャプションがALTに入ってしまいました。

    自作テーマとTwenty Fifteenで試してもキャプションになりません。
    画像の
    タイトル・キャプション・代替テキストのすべてを登録した状態で試しましたが
    #ALTの場合は代替テキストに設定したものになります。
    設定は現状のまま別のテーマで試してみてください。

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    Ultra beginner様

    ご丁寧にありがとうございます。

    >画像の
    >タイトル・キャプション・代替テキストのすべてを登録した状態で試しましたが
    >#ALTの場合は代替テキストに設定したものになります。

    上記の状態ですと#ALTの場合は代替テキストになります。
    テーマを自作テーマとTwenty Fifteenの両方で試しました。

    #ALTの場合は、
    タイトルのみ
    →タイトル

    タイトル・代替テキスト
    →代替テキスト

    タイトル・キャプション
    →キャプション

    となります。
    SEO For Imagesを入れなくても同じ結果です。
    また、SEO For Imagesを入れた状態で
    他のプラグインを停止してみたりもしたのですが変化ありませんでした。

    どのような登録状態でもALTを画像タイトルとしたいのですが、
    やはり代替テキストはいれないといけないのでしょうか?

    こんにちは、
    プラグインの件はちょっとわかりませんが

    image_send_to_editor というフィルタを使うと、挿入時の画像タグをカスタマイズすることが出来ます。

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    nobita様

    ご教示ありがとうございます!

    functions.phpに
    alt=画像タイトルに置換するような記述をすればいいのかなと思うのですが、
    具体的にどのように書けばいいのでしょうか?

    調べてみたのですが、よく分かりませんでした。。。

    個人的なメモですが、

    http://tenman.info/labo/snip/archives/1279

    2個めのフィルタ関数を見ていただくと、引数で URLや altテキスト タイトル を取得できますので、文字列置換を行うと出来るのではないかと思います。(未テスト)

    2個目のフィルタでやっている事は、ペーストされるhtml($html)
    から、a要素を削除(img要素以外を削除)して、新たに、a要素にクラスを付け直しています。

    salut_Mmaruさんのケースだと、img 要素のaltを抽出して、文字列置換するという事になるのではないかと思います。

    置換の具体的な方法は、WordPressの処理というより、PHPでの処理になります。

    preg_match preg_replace 等 PHP関数を調べてみるといいと思います。

    工夫してみてください

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    nobita様

    ご助言ありがとうございます!
    だいぶやりたいことに近づけた気がします。

    function my_image_attribute( $html, $id, $caption, $title, $align, $url, $size, $alt ){
    
    	$html = preg_replace( '/alt=[\'"]([^\'"]+)[\'"]/i', '/alt=" . $title . "/i', $html );
    	return $html;
    }
    
    add_filter( 'image_send_to_editor', 'my_image_attribute', 10 );
    add_filter( 'post_thumbnail_html', 'my_image_attribute', 10 );

    のように書いてみたのですが、

    alt=” . $title . “

    とでてしまいます。

    試行錯誤してみたのですが結果は変わらず、
    何が間違っているのかも分からない状況です。

    何度も恐縮ですが、ご助言いただけないでしょうか?

    '/alt=" . $title . "/i'

    これは、PHPの記述の間違いです

    'alt="' . $title . '"'

    ただ、結果は、alt=""になりそうですね

    第2引数以降が空になってしまうようなので、image_send_to_editorでは、うまくいかないかも、

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    nobita様

    ありがとうございます!

    $html = preg_replace( '/alt=[\'"]([^\'"]+)[\'"]/i', 'alt="' . $title . '"' , $html );

    としましたが、結果は「alt」のみで空になってしまいました。

    また
    「image_send_to_editor」の部分を
    「get_image_tag」に替えて試してみましたが
    結果は変わらず空になってしまうようです。

    もう少し調べてみます。

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    functions.phpにて

    function my_image_attribute( $html, $id, $caption, $title, $align, $url, $size, $alt ){
    
        $html = preg_replace( '/alt=[\'"]([^\'"]+)[\'"]/i', 'alt="' . $title . '"' , $html , 1 );
        return $html;
    }
    
    add_filter( 'get_image_tag', 'my_image_attribute', 10, 8 );
    add_filter( 'post_thumbnail_html', 'my_image_attribute', 10, 8 );

    だと、結果は「alt」のみで空なのですが
    「$title」の部分を「$caption」にするとキャプションは表示されるようです。
    キャプションが入ってない画像に関しては空になります。

    ※add_filterの箇所の10と8の意味を理解してないのですが、
    10だけだと上手く動いていないようなので入れました。

    自分なりに調べて「$title」という引数の名前で間違ってないと思うのですが、
    引数の名前が変更された可能性はありますでしょうか?

    また、視点を変えて
    ALT表示の優先順位が
    代替テキスト>キャプション>タイトルの順で表示されるようなので
    優先順序を変更できれば、やりたいことに近いかと思い、

    media.phpの758行目あたり

    'alt'	=> trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first
    		);
    		if ( empty($default_attr['alt']) )
    			$default_attr['alt'] = trim(strip_tags( $attachment->post_excerpt )); // If not, Use the Caption
    		if ( empty($default_attr['alt']) )
    			$default_attr['alt'] = trim(strip_tags( $attachment->post_title )); // Finally, use the title
    
    		$attr = wp_parse_args($attr, $default_attr);


    ALT>キャプション>タイトル
    から
    ALT>タイトル>キャプション
    に順序を変更してみたのですが変化ありませんでした。
    (見当違いのところをいじってたのかもしれません。。。)

    add_filterの箇所の10と8の意味を理解してないのですが、
    10だけだと上手く動いていないようなので入れました。

    この8は、引数の数です。

    自分なりに調べて「$title」という引数の名前で間違ってないと思うのですが、
    引数の名前が変更された可能性はありますでしょうか?

    本体の方を見ていませんが、多分それはないだろうと思います。

    趣向を変えるという意味で、ちょっとテストを行いました。

    関数は、ネット上から拾ったものですし、URLの抽出もいい加減なものなので、このままでは実装できませんが、

    add_filter( 'the_content','my_image_attribute',10 );
    
    function my_image_attribute( $html ) {
    
    	preg_match('|src="([^"]+)"|', $html, $matches );
    	//url validate 必要
    
    	if ( isset( $matches[1] ) ) {
    
    		$id = pippin_get_image_id($matches[1]);
    		$id = absint( $id );
    		$field_values = my_get_attachment( $id );
    	var_dump( $field_values );
       }
    
    	return $html;
    }
    
    function pippin_get_image_id($image_url) {
        global $wpdb;
        $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
            return $attachment[0];
    }
    
    function my_get_attachment( $attachment_id ) {
    
    	$attachment = get_post( $attachment_id );
    	return array(
    		'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
    		'caption' => $attachment->post_excerpt,
    		'description' => $attachment->post_content,
    		'href' => get_permalink( $attachment->ID ),
    		'src' => $attachment->guid,
    		'title' => $attachment->post_title
    	);
    }

    ここでやっているのは、the_content フィルタ内で、貼り付けられたimage 要素からURLを抜き取り、そのURLから、アタッチメントIDを取得して、dump しています。

    こちらでは、

    array(6) { ["alt"]=> string(4) "test" ["caption"]=> string(0) "" ["description"]=> string(0) "" ["href"]=> string(62) "http://www.example.com/wp/archives/34332/accessibility-test" ["src"]=> string(70) "http://www.example.com/wp/wp-content/uploads/accessibility-test.png" ["title"]=> string(18) "accessibility-test"

    という形で、置換するための材料は揃えられそうです。

    なので、保存の時のフィルタや、表示の時のフィルタをいくつか試すと、置換は可能なのではないかと思います。

    トピック投稿者 salut_Mmaru

    (@salut_mmaru)

    nobita様

    諸々ご教示頂き、ありがとうございます。
    お礼が遅くなりすみません。

    置換したい箇所に
    $attachment->post_titleを入れみるとかいう単純な話ではないですよね?
    上手くできないので、いろいろと調べてみたり格闘したのですが、
    わたしには難しすぎるようです。。。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「画像の代替テキストを入れない場合のALTについて」には新たに返信することはできません。