페이지 하단에 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를 추가 해 주세요.