画像がリンク切れの場合、代替画像とリンクの削除を行うには？

  • 解決済 conte9999

    (@conte9999)


    10年、 9ヶ月前

    いつも大変お世話になっております、

    カスタムフィールドで設定した画像URLがリンク切れの場合に
    代替画像のみを替わりに表示する、もしくは画像もリンクも非表示にするというカスタマイズを行いたいと思っています。

    【状況】
    csvのインポート機能を使って、あらかじめアップロードしておいた画像と記事を紐付けしたいと考えています。

    そこで以下の様に画像をリンクさせました。

    /img/<?php the_field(“t-code”, $post->ID); ?>.jpg”>
    <img src=”<?php echo home_url(”); ?>/img/<?php the_field(“t-code”, $post->ID); ?>.jpg” width=”60″>

    t-codeというカスタムフィールド名にコードを入れておき、
    あらかじめアップロードしておいた「コード名.jpg」というファイルがあれば画像が記事にひも付けされて表示されるという仕組みです。

    【やりたいこと】
    t-codeと画像ファイルが一致しなかった場合は画像がリンク切れになるため、リンク切れになった画像は削除、もしくは代替画像に置き換えつつ、リンクも削除したいと考えています。

    【やってみたこと】
    代替画像を表示させるまではJqueryやonError=を利用すればできたのですが、リンクした画像まで代替することができません。

    サムネイルなどの変数が利用できる場合だったり、
    カスタムフィールドの値が空欄だった場合であれば

    <?php if(): ?> などで条件分岐できると思ったのですが、

    今回の場合はカスタムフィールドに値自体はありますし、
    サムネイル画像として出力するわけでもないので、
    どちらにも該当せず、どう記述してよいかわかりませんでした。

    おそらくphpに明るければ何らかの形で条件分岐が出来るのかと思うのですが、なにかよい方法はありませんでしょうか。何卒よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • Hinaloe

    (@hnle)

    10年、 9ヶ月前

    この方法がいいかどうかは置いておいてjQueryでonerrorで代替表示できるのならばjQueryのunwrap()を使えばリンクは消せるかも。(単純に使うと思っていない動作になるかもなので注意が必要ですが)

    nobita

    (@nobita)

    10年、 9ヶ月前

    こんにちは、

    個人的に、最近、超お気に入りのアイディアなんですけど、

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

    img要素を使わず、CSSのマルチプルバックグラウンドを使う事で、条件分岐を省いて、代替画像が表示できます。

    リンクが、ちょっと問題ですね

    良かったら、問題点の指摘などいただけるとうれしいです。

    トピック投稿者 conte9999

    (@conte9999)

    10年、 9ヶ月前

    Hinaloe様 nobita様

    ご指導とアドバイス、誠にありがとうございます。
    アドバイスも参考にしながらいろいろと試行錯誤してみたのですが、
    結果的に下記のURLで情報提供してくださっている方のやりかたで
    リンク切れ画像をリンクごと非表示にすることができました。

    ttps://ja.forums.wordpress.org/topic/151241?replies=3

    本当にありがとうございました。
    今後ともどうぞよろしくお願いいたします。

    mocomoco

    (@silent_dandy)

    10年、 9ヶ月前

    phpで条件分岐を行うのであればfile_exists関数を利用するのが簡単だと思います．
    今回の場合であれば

    <?php
$image_url = home_url('').'/img/'.get_post_meta($post->ID,'t-code',true).'.jpg';
$image_url = esc_url($image_url);
if(file_exists($image_url)) { //画像がある場合
  echo '<a href="'.$image_url.'">';
  echo '<img src="'.$image_url.'" width="60">';
  echo '</a>';
} else { //画像がない場合
  $image_url = home_url('').'/img/代替画像.jpg';
  $image_url = esc_url($image_url);
  echo '<img src="'.$image_url.'" width="60">';
}
?>

    以上のようにリンクのあるなしが，分岐可能です．
    ただ，file_existsを利用することが最適解とは限らないので，
    そのあたりはご自身で工夫してみてください．

    動作確認はしておりませんので，もしかしたらタイプミスがあるかもしれません．

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「画像がリンク切れの場合、代替画像とリンクの削除を行うには？」には新たに返信することはできません。