Wordpressで画像をクリックすると関連する下層ページにリンクをするというページを作っております。
添付のようなページをイメージしていますが固定ページで登録を行った画像が表示されません。
chromeのデベロッパーツールで確認を行ったところ該当の部分が<ul class="casebn"></ul>となっていて<li></li>が
読み込まれていない状態でした。
ただし、直接「A」や「B」のphpファイルをアドレス打ちしてみると画像は表示されます。
「A」と「B」はそれぞれパーツテンプレートとしていてcase_topで
「A」
php
1<div class="case-bn_container"> 2 <?php get_template_part( 'page-case_advance' ); ?> 3</div>
「B」
php
1<div class="case-bn_container"> 2 <?php get_template_part( 'page-case_interview' ); ?> 3</div>
と指定して外部パーツテンプレートとして読み込ませるようにして
「A」を<page-case_advance.php>
php
1<ul class="casebn"> 2 <?php 3 $parent_id = get_the_ID(); 4 $args = array( 5 'posts_per_page' => -1, 6 'post_type' => 'page', 7 'orderby' => 'menu_order', 8 'order' => 'ASC', 9 'post_parent' => $parent_id, 10 ); 11 12 $common_pages = new WP_Query( $args ); 13 if( $common_pages->have_posts() ): 14 while( $common_pages->have_posts() ): $common_pages->the_post(); 15 ?> 16 <li> 17 <a href="<?php the_permalink(); ?>"> 18 <?php if(!is_mobile()){ ?> 19 <?php if( get_field('case_advance') ): ?> 20 <img src="<?php the_field('case_advance'); ?>" /> 21 <?php endif; ?> 22 <?php }else{ ?> 23 <?php if( get_field('case_advance_sp') ): ?> 24 <img src="<?php the_field('case_advane_sp'); ?>" /> 25 <?php endif; ?> 26 <?php } ?> 27 </a> 28 </li> 29 <?php 30 endwhile; 31 wp_reset_postdata(); 32 endif; 33 ?> 34</ul>
「B」を<page-case_interview.php>
php
1<ul class="casebn"> 2 <?php 3 $parent_id = get_the_ID(); 4 $args = array( 5 'posts_per_page' => -1, 6 'post_type' => 'page', 7 'orderby' => 'menu_order', 8 'order' => 'ASC', 9 'post_parent' => $parent_id, 10 ); 11 12 $common_pages = new WP_Query( $args ); 13 if( $common_pages->have_posts() ): 14 while( $common_pages->have_posts() ): $common_pages->the_post(); 15 ?> 16 <li> 17 <a href="<?php the_permalink(); ?>"> 18 <?php if(!is_mobile()){ ?> 19 <?php if( get_field('case_interview') ): ?> 20 <img src="<?php the_field('case_interview'); ?>" /> 21 <?php endif; ?> 22 <?php }else{ ?> 23 <?php if( get_field('case_interview_sp') ): ?> 24 <img src="<?php the_field('case_interview_sp'); ?>" /> 25 <?php endif; ?> 26 <?php } ?> 27 </a> 28 </li> 29 <?php 30 endwhile; 31 wp_reset_postdata(); 32 endif; 33 ?> 34</ul>
としました。
このほかに拾い物ですがfunctions.phpでユーザーエージェントの判別のために
php
1//ユーザーエージェントの判別 2function is_mobile(){ 3 $useragents = array( 4 'iPhone', // iPhone 5 'iPod', // iPod touch 6 'Android.*Mobile', // 1.5+ Android *** Only mobile 7 'Windows.*Phone', // *** Windows Phone 8 'dream', // Pre 1.5 Android 9 'CUPCAKE', // 1.5+ Android 10 'blackberry9500', // Storm 11 'blackberry9530', // Storm 12 'blackberry9520', // Storm v2 13 'blackberry9550', // Storm v2 14 'blackberry9800', // Torch 15 'webOS', // Palm Pre Experimental 16 'incognito', // Other iPhone browser 17 'webmate' // Other iPhone browser 18 ); 19 $pattern = '/'.implode('|', $useragents).'/i'; 20 return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); 21}
も指定しております。
結果的に添付ファイルのようにページを表示させるにはどのようにしたらよろしいでしょうか?
また可能であればhtmlで表示時に画像タグが
<img src="ファイル名" width="" height="" alt=""/>と思っております。(ファイル名とaltだけでも)
このような質問なのですが
ご回答、改善のご教授いただけると幸いです。
何卒よろしくお願い致します。
case_top.php
1<?php get_header(); ?> 2 3 <div class="wrap page_first_contents page_first_contents-sp"> 4 <div class="contents"> 5 6 <div id="page_main_title"> 7 <div id="title_container"> 8 <h2>「A」タイトル</h2> 9 </div> 10 </div> 11 12 <div class="case_top_intro_container"> 13 <p>「A」テキスト</p> 14 </div> 15 16 <div class="case-bn_container"> 17 <?php get_template_part( 'page-case_advance' ); ?> 18 </div> 19 20 </div> 21 </div> 22 23 <hr class="case_interview"> 24 25 <section class="case_interview_wrap"> 26 <div class="contents"> 27 <div class="page_main_title"> 28 <div class="title_container"> 29 <h2>「B」タイトル</h2> 30 </div> 31 </div> 32 33 <div class="case_top_intro_container"> 34 <p>「B」テキスト</p> 35 </div> 36 37 <div class="case-bn_container"> 38 <?php get_template_part( 'page-case_interview' ); ?> 39 </div> 40 </div> 41 </section> 42 43 <?php get_footer(); ?>
回答2件
あなたの回答
tips
プレビュー