페이지 하단에 SNS 페이지로 이동하는 버튼들을 ACF와 연계하여 만들어 보도록 하겠습니다.
이 부분은 ACF의 사용방법을 한번 더 익히고 숙지 하는데 목적이 있습니다.
ACF 플러그인에서 index 페이지에 SNS 페이지로 이동하는 fields를 추가 합니다.
ACF PRO 에는 repeater 기능이 있어서 SNS 관련 내용을 추가 및 삭제 할 수 있지만 우리는 우선 무료 플러그인을 사용하고 있으므로 플러그인이 제공하는 기능을 최대한 활용해 보고 필요에 따라 PRO 버전을 사용하도록 하겠습니다.
위와 같이 필드를 추가 하고 페이지 > index 페이지 수정화면으로 이동하면 instagram, facebook, twitter를 입력할 수 있는 화면이 나옵니다.
각 SNS의 접속 url을 입력해 주고 index.php에 내용을 추가 합니다.
index.php
<!-- sns --> <section id="section_7" class="sns"> <div class="bg-wrap" data-bottom-top="background-position: 50% 200px" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#section_7" ></div> <div class="desc-wrap"> <ul> <?php if ( get_field('social_facebook') ) : ?> <li> <a href="<?php echo get_field('social_facebook'); ?>" target="_blank"> <img src="/wp-content/uploads/2017/11/icon-sns-facebook.svg" alt="icon-facebook" /> <?php echo get_field('social_facebook'); ?> </a> </li> <?php endif; ?> <?php if ( get_field('social_instagram') ) : ?> <li> <a href="<?php echo get_field('social_instagram'); ?>" target="_blank"> <img src="/wp-content/uploads/2017/11/icon-sns-instagram.svg" alt="icon-instagram" /> <?php echo get_field('social_instagram'); ?> </a> </li> <?php endif; ?> <?php if ( get_field('social_twitter') ) : ?> <li> <a href="<?php echo get_field('social_twitter'); ?>" target="_blank"> <img src="/wp-content/uploads/2017/11/icon-sns-twitter.svg" alt="icon-twitter" /> <?php echo get_field('social_twitter'); ?> </a> </li> <?php endif; ?> </ul> </div> </section>
svg 파일은 무료 svg 파일들로 검색하셔서 미디어 폴더에 미리 올리고 경로를 설정해 주세요.
main.css
/* sns */ .sns { position: relative; background-color: black; } .sns .bg-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/wp-content/uploads/2017/11/bg-sns.jpg'); background-repeat: no-repeat; background-attachment: fixed; opacity: 0.15; z-index: 1; } .sns .desc-wrap { position: relative; z-index: 10; text-align: center; color: white; } .sns .desc-wrap ul { margin: 0; padding: 0; display: inline-block; list-style: none; } .sns .desc-wrap ul li { float: left; padding-right: 1rem; } .sns .desc-wrap ul li a { color: white; font-size: 0.75rem; font-family: 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: normal; text-decoration: none; opacity: 0.5; transition: opacity 0.3s ease; } .sns .desc-wrap ul li a:active, .sns .desc-wrap ul li a:hover { opacity: 1 } .sns .desc-wrap ul li img { width: 20px; margin-right: 0.2rem; }
/* sns */ .sns .bg-wrap { background-size: cover; background-attachment: inherit; } .sns .desc-wrap ul li { padding: 0.4rem 0; text-align: left; float: none; } .sns .desc-wrap ul li a { font-size: 0.9rem; }
반응형에 따른 레이아웃 변경을 위해 css 추가 후 media 사이즈에도 css를 추가 해 주세요.