Wordpress カスタム投稿での動的な画像リンクの取得

Question

WordPressのsingle-aaa.phpファイルに以下を書き込んでいます。

やりたいことしては、カスタム投稿(aaa)の画像を取得して
１５枚表示させ、その画像それぞれに画像URLリンクを貼りたいです。

画像のフィールド名はimg_02～img_15で設定してあります。

<?php 				
	// アイキャッチ画像のIDを取得
	$thumbnail_id = get_post_thumbnail_id();  
	$img_full = wp_get_attachment_image_src( $thumbnail_id , 'full' );
	echo '<img  class="img-responsive" src="'.$img_full[0].'">';
?>	
			  </a>

<?php	
	$e = 1;
	for ($i = 2 ; $i < 16 ; $i++) {
		$ctm = get_post_meta($post->ID, 'img_0'.$i, true);
		if($ctm):
		echo '<a data-slide-index="'.$e.'" href="">' ;
		echo '<img  class="img-responsive" src=" ' ;
		echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true));
		echo ' "></a>' ;  
		$e++ ;
		 endif;
	}	
?>

これだと画像はきちんと取得して表示されるのですが、リンクが動作しません。
echo '<a data-slide-index="'.$e.'" href="">' ;
の部分を
echo '<a data-slide-index="'.$e.'" href=" ' ; echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true)); echo ' ">
としてみましたが、何も変わりませんでした。
どのように修正すべきか教えて頂けないでしょうか？

宜しくお願い致します。

Answer 1

こんにちわ。

phpの出力に関しては解決されているようですが、ちょっとだけ、画像のフィールド名が気になります。
このfor文だと$iが10より大きい数字なった時に
'img_010' となってしまうと思います

get_post_meta関数を使用する箇所の記述を

get_post_meta($post->ID, 'img_'.str_pad($i,2,'0',STR_PAD_LEFT),true)

としておいたほうが良さそうです。

あとリンク機能の動きの件ですが、とりあえず

<?php                 
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id();  
    $img_full = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    echo '<img  class="img-responsive" src="'.$img_full[0].'">';
?>    
              </a>

上記の閉じ</a>タグは、対となる開始タグ<a>は存在していますか？
あとはCSSやJsの問題と思われます。imgのclass属性にimg-responsiveとあるので、画面幅によって何かしらの実装が施してありそうですが...

Comments

[web]

akira888様、回答ありがとうございます。

確かにそうです！なので、フィールドは010と指定してましたが、そのように記述すると解決できるのですね！
とても勉強になりました。ありがとうございます。

<a>開始タグはちゃんとあります。
私のコードの載せ漏れでした・・すみません。
bootstrapを使用しているので、それが何か原因なのでしょうか・・。

Answer 2

forの部分を下記のようにしても動きませんか？
for ($i = 2 ; $i < 16 ; $i++) {
$ctm = get_post_meta($post->ID, 'img_0'.$i, true);
if($ctm):
echo '<a data-slide-index="'.$e.'" href="'; echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true)); echo '"><img class="img-responsive" src="'; echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true)); echo '"></a>' ;
$e++ ;
endif;
}

Comments

[web]

narakener様
昨日に引き続き、ありがとうございます！

それで動きました！が、画面幅を縮めた場合のみ動作します。。
画面が広いと動作しません。。これは一体なぜでしょうか。。
画像をdisplay:inline-blockで並べて、それをクリックでリンク動作したいだけなんですが・・・。

[narakener]

昨日も私が回答していたんですね。今気づきました。。

動作しないという状況を確認したいのですが、今aタグの範囲はどうなっていますか？

確認方法として、Google Chromeの場合なら、F12キーでデベロッパーツールを立ち上げ、Elementsタブで問題が出ているaタグのソースにマウスオーバーすれば、範囲が画面上でハイライトすると思います。

もしimgタグより小さくなっているのでしたら、aタグにdisplay:block;を適用すれば直るかもしれません。

[web]

narakener様
そうです。毎回助けて頂いてありがとうございます。

Firefoxで確認してみたら、<a>で指定されているのはちゃんと画像の範囲でした。
bootstrapの何かが原因なのでしょうか。。

[narakener]

そうですか。。実際の表示されているページを見てみたいところですが難しいとのことですので…

回答ではありませんが参考までに、下記サイトにbootstrapのテンプレートがありました。
.img-responsiveも使っていますので、実現されたい内容に近いのではないかと思っています。
http://ironsummitmedia.github.io/startbootstrap-creative/
このサイトのhtml、cssの構成を参考にすれば解決の糸口がつかめるかもしれません。

また、あまりteratailのルールには慣れていませんが、
当初の質問と内容が変わってきていますので、質問を新しくしなおして頂いたほうが良いかもしれません。
そのほうが有志の方の手助けもあるかと思います。
うまく解決しない場合はご検討ください。

[web]

いろいろとありがとうございます。
そちら参考にして少し自分で調べてみます。
それでも分からなかったら、再度質問致します。
どうもありがとうございました！