advanced custom fields で画像と文章を表示作例（自分用メモ）
advanced custom fields で画像と文章を表示の作例。
【やったこと】
profileというカテゴリを作成して、投稿時にプロフィールの専用フォームを表示。
別ページで、その一覧も表示させる。
投稿でデフォルトで表示されるsingle.phpの表示を変えたいので
single.phpを分岐させるために、single_prof.php みたいな物を作成。single.phpの中身は分岐の条件に書き換える
|
1 2 3 4 5 6 7 8 9 10 |
<?php $post = $wp_query->post; if ( in_category('profile') ) { include(TEMPLATEPATH.'/single_prof.php'); } elseif ( in_category('prpf2') ) { include(TEMPLATEPATH.'/single_prof2.php'); } else { include(TEMPLATEPATH.'/single-default.php'); } ?> |
single_prof.phpの中身に
プロフィール画像があって、見出し、名前、血液型、画像、文章、画像、文章、画像、文章・・・みたいな紹介ページを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<? $img = get_field('prpf_img');//プロフィール画像 $imgurl = wp_get_attachment_image_src($img, 'medium'); if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""> <? } ?> <?php the_field('midashi_txt'); ?>//見出し用テキスト <?php the_field('name'); ?>//名前 <?php the_field('blood'); ?>//血液型 <? $img2 = get_field('other_img2');//その他画像 $imgurl = wp_get_attachment_image_src($img2, 'medium'); if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""> <? } ?> <?php the_field('txt2'); ?>//その他文章 <? $img3 = get_field('other_img3');//その他画像 $imgurl = wp_get_attachment_image_src($img3, 'medium'); if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""> <? } ?><?php the_field('episode_txt'); ?> <?php the_field('txt3'); ?>//その他文章 <? $img4 = get_field('other_img4');//その他画像 $imgurl = wp_get_attachment_image_src($img4, 'medium'); if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""> <? } ?> <?php the_field('txt4'); ?>//その他文章 |
作成したsingle_prof.phpの中身を一覧表示させるページを作成する
prof_itiran.phpをつくる。
|
1 2 3 4 5 |
<?php /* Template Name: itiran */ ?> |
画像を表示して、その後に、文章を２件表示するパターンをループ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $args = array( 'category_name' => 'profile', 'posts_per_page' => 10, 'order' => 'DEC' ); ?> <?php $the_query = new WP_Query( $args ); ?> <?php if($the_query -> have_posts()): ?> <?php while($the_query -> have_posts()): $the_query->the_post();?> <? $img = get_field('prpf_img'); $imgurl = wp_get_attachment_image_src($img, 'medium'); if($imgurl){ ?><a itemprop="url" href="<?php the_permalink(); ?>" target="_self"><img src="<? echo $imgurl[0]; ?>" alt=""></a> <? } ?> <?php the_field('midashi_txt'); ?> <?php the_field('name'); ?> <?php the_field('blood'); ?> <?php endwhile; ?> <?php endif; ?> |
追伸、デザイン的に一覧表示の際に、カスタムフィールドで入力した長い文章とかを短く切るための設定。作例は５０文字以降を・・・にする。
|
1 2 3 4 |
<?php if(mb_strlen(get_field('midashi_txt'))>50) { $hoge= mb_substr(get_field('midashi_txt'),0,49) ; echo $hoge. … ;} else {echo get_field('midashi_txt');} ?> |
カスタムフィールドではないタイトルを抜粋するとき。
|
1 2 3 4 |
<a href="<?php the_permalink() ?>"><?php if (mb_strlen($post->post_title) > 30) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 25) . '…'; } else { the_title(); } ?></a> |