이전에 team 관련해서 ACF 작업은 미리 되어 있으므로 index.php 파일에 내용 추가를 하면서 정리 하겠습니다.
index.php
<!-- team: meet the team --> <section id="section_4" class="team bg-dark-gray"> <div class="container"> <div class="row"> <div class="col-12"> <h4 class="under-bar text-center">MEET THE TEAM</h4> <p class="fs-14 fw-300 text-center"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br> Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.<br> </p> </div> </div> <div class="row"> <?php $args = array( 'post_type' => 'team', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => -1, 'post_status' => 'publish', ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) : while( $the_query->have_posts() ) : $the_query->the_post(); $fullImg = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->ID ), 'full' ); ?> <div class="col-md-6 col-lg-3"> <div class="div-team-wrap"> <figure> <img src="<?php echo $fullImg[0]; ?>" alt="<?php echo get_the_title(); ?> photo"> </figure> <p class="name"><?php echo get_the_title(); ?></p> <p class="email font__eng"><a href="mailto:<?php echo get_field('email'); ?>"><?php echo get_field('email'); ?></a></p> <p class="mobile font__eng"><a href="tel:<?php echo get_field('mobile'); ?>"><?php echo get_field('mobile'); ?></a></p> </div> </div> <?php endwhile; wp_reset_postdata(); endif; ?> </div> </div> </section>
main.css
/* team : MEET THE TEAM */ .div-team-wrap { text-align: center; } .div-team-wrap figure { margin: 2rem 0; } .div-team-wrap figure img { border-radius: 500px; } .div-team-wrap .name { font-size: 1.2rem; margin-bottom: 0.4rem; } .div-team-wrap .email { font-size: 0.875rem; opacity: 0.6; letter-spacing: 0.6px; margin-bottom: 0; } .div-team-wrap .mobile { font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.6px; } .div-team-wrap a { color: white; }
포트폴리오 과정에 ACF, CPT 플러그인들 설명과 AJAX까지 있어서 내용이 많은 것에 비해 team 과정은 너무 쉬운 느낌 아닌가요?