워드프레스 엔폴테마에서 fullpage.js 적용하는 방법

워드프레스에서 Enfold 테마에 fullPage.js를 적용하는 과정은 몇 가지 단계로 구성됩니다. fullPage.js는 전체 화면을 섹션으로 나누어 스크롤을 각 섹션으로 이동시키는 JavaScript 라이브러리입니다. 아래는 Enfold 테마에 fullPage.js를 적용하는 기본적인 단계입니다.

fullPage.js 라이브러리 추가:

fullPage.js 라이브러리를 다운로드하고 워드프레스 테마의 폴더 구조에 추가합니다.
또는 CDN을 통해 라이브러리를 로드할 수 있습니다.

스크립트 및 스타일 추가:

워드프레스 테마의 header.php 파일이나 테마의 커스텀 스크립트 파일에 fullPage.js 및 관련 스타일을 추가합니다.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- fullPage.js -->
<script src="path/to/fullpage.js"></script>

<!-- fullPage.js styles (optional) -->
<link rel="stylesheet" href="path/to/fullpage.css">

초기화 및 설정:

<script>
  $(document).ready(function() {
    $('#fullpage').fullpage({
      // 여러 옵션들을 설정할 수 있습니다. 필요에 따라 적절히 설정하세요.
      sectionsColor: ['#000', '#111', '#222', '#333'],
      anchors: ['section1', 'section2', 'section3', 'section4'],
      menu: '#menu',
      // 기타 옵션들...
    });
  });
</script>

HTML 구조 수정:

<div id="fullpage">
  <div class="section"> <!-- Section 1 -->
    <!-- Content for section 1 -->
  </div>
  <div class="section"> <!-- Section 2 -->
    <!-- Content for section 2 -->
  </div>
  <!-- 추가적인 섹션들 -->
</div>

스타일 조정 (선택 사항):

fullPage.js의 스타일이 기본적으로 제공되지만, 테마의 디자인에 맞게 스타일을 추가하거나 수정할 수 있습니다.

위의 단계를 차례로 따라가면서 Enfold 테마에 fullPage.js를 성공적으로 적용할 수 있을 것입니다. 필요에 따라 fullPage.js의 공식 문서나 Enfold 테마의 문서를 참고하여 더 자세한 정보를 얻을 수 있습니다.

functions.php 파일에 스크립트 추가하기

워드프레스 functions.php 파일에 스크립트 추가하기

add_action('wp_head', 'my_wp_head');
function my_wp_head()
{
?>
    <script src="/wp-content/themes/enfold-child/js/scrolloverflow.min.js"></script>
    <script src="/wp-content/themes/enfold-child/js/jquery.easings.min.js"></script>
    <link rel="stylesheet" href="/wp-content/themes/enfold-child/js/jquery.fullPage.css">
    <script src="/wp-content/themes/enfold-child/js/jquery.fullPage.js"></script>
    <script src="/wp-content/themes/enfold-child/js/jquery.simplr.smoothscroll.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                if ($(window).width() < 767) {
                    $('.section').removeClass('el_after_av_fullscreen');
                } else {

                    $("#footer-page").addClass("section");
                    $(".section").addClass("fp-auto-height");

                    $('#main').fullpage({
                        'verticalCentered': true,
                        'navigation': true,
                        'navigationPosition': 'right',
                        'scrollBar': true,
                        'scrollOverflow': true,
                        'scrollOverflowReset': false,
                        'scrollOverflowOptions': null,
                        'easing': 'easeOutQuint',
                        // 'easingcss3': 'ease',
                        'scrollingSpeed': 500,
                        'fitToSection': true,
                        // 'responsiveHeight': true,
                        'responsiveWidth': 767,
                        'afterResize': function(widht, height) {

                        }
                    });
                }
            });

            $(document).ready(function() {
                let shrinkHeader = 50;
                $(window).scroll(function() {
                    let scroll = getCurrentScroll();
                    if (scroll >= shrinkHeader) {
                        $('.container.av-logo-container').addClass('hidden_logo');
                        $('#header_meta').addClass('hidden_meta');
                    } else {
                        $('.container.av-logo-container').removeClass('hidden_logo');
                        $('#header_meta').removeClass('hidden_meta');
                    }
                });

                function getCurrentScroll() {
                    return window.pageYOffset || document.documentElement.scrollTop;
                }
            });

        })(jQuery);
    </script>
<?php
};

fullpage.js 라이브러리 사용시 제약사항

fullPage.js를 사용하는 경우 몇 가지 제약 사항을 고려해야 합니다. 아래는 일반적으로 알려진 제약 사항 목록입니다:

모바일 호환성:
- fullPage.js는 일부 모바일 기기에서 부드럽게 작동하지 않을 수 있습니다. 특히 일부 터치 기반 디바이스에서는 스와이프 동작이 예상대로 작동하지 않을 수 있습니다. 이는 fullPage.js가 터치 이벤트를 처리하는 데 어려움을 겪을 수 있기 때문입니다.
접근성 문제:
- fullPage.js는 섹션 간의 이동을 스크롤로 처리하므로, 일부 사용자에게는 접근성 문제가 발생할 수 있습니다. 스크린 리더 사용자 및 키보드 네비게이션을 선호하는 사용자들에게는 어려움이 될 수 있습니다. 이를 해결하기 위해 추가적인 접근성 개선을 고려해야 합니다.
콘텐츠 로딩 지연:
- fullPage.js는 모든 섹션을 페이지 로딩 시에 모두 로드하므로 초기 로딩 속도에 영향을 줄 수 있습니다. 특히 섹션이 많거나 섹션 내용이 많은 경우 더 많은 시간이 소요될 수 있습니다.
스크롤 이벤트 감지:
- fullPage.js는 스크롤 이벤트를 사용하여 페이지 이동을 처리하므로, 다른 스크롤 이벤트를 사용하는 플러그인 또는 스크립트와 충돌이 발생할 수 있습니다. 충돌을 방지하기 위해 코드를 충분히 테스트하고 조정해야 합니다.
브라우저 호환성:
- fullPage.js는 대부분의 최신 브라우저에서 잘 작동하지만, 오래된 브라우저나 일부 특정 브라우저에서는 문제가 발생할 수 있습니다. 특히 IE(Internet Explorer)에서는 호환성 문제가 발생할 수 있습니다.

이러한 제약 사항을 고려하여 fullPage.js를 사용할 때는 프로젝트의 요구 사항과 사용자 경험에 대한 고려를 하여 적절한 대응을 해야 합니다. 접근성, 성능 및 브라우저 호환성을 고려하여 플러그인을 선택하고 구현하는 것이 중요합니다.

워드프레스 엔폴테마에서 fullpage.js 적용하는 방법