워드프레스에 페이스북 물결 로딩 스피너 달기

이스북 하면 몇가지 떠오르는 이미지가 있습니다. 사람마다 그 이미지는 다르겠지만 저같은 경우에는 좋아요 버튼()과 페이지 로딩 시 보이는 파란 물결의 로딩 스피너()입니다. 이 중에서 좋아요 버튼은 페이스북에서 제공하는 코드를 사용하여 웹사이트에서 많이들 사용하고 있지만 물결 로딩 스피너(loading spinner)는 크게 사용할 일이 없었죠. 그래서 이번 포스트에서는 여러분의  페이지 로딩을 기다리는 동안 페이스북 물결 로딩 스피너를 다는 방법을  소개하겠습니다.


1. 스피너 준비

스피너의 종류는 매우 다양합니다. 직접 gif로 원하는 스피너를 만들어 사용할 수도 있지만 이미 자동으로 원하는 스피너를 만들 수 있는 사이트가 여럿 있습니다. 아래의 사이트에서 원하는 스피너를 만들고 다운로드 하세요. 다운로드 받은 이미지는 ftp로 테마의 이미지(images) 폴더에 넣어두세요. 저는 hwangc-spinner.gif로 저장했습니다. 참고로 이번 포스팅을 테스트한 테마는 Twenty Eleven과 Twenty Twelve입니다.

Ajaxloadinfo

Loadinfo

Preloaders

2. gif 스피너 달기

테마의 header.php파일에(대시 보드에서 테마 파일 찾기)서 “body”를 찾고 그 아래 줄에 다음과 같은 코드를 넣으세요. 위에서 여러분이 다운 받은 이미지 파일을 넣는 것입니다. “테마이름”에는 여러분의 테마이름을 넣으셔야겠죠.

3. CSS 넣기

테마의 style.css 파일을 열고 아래의 코드를 넣으세요. 화면의 중앙에서 스피너를 보이게 하고 스크롤을 해도 스피너가 계속보이도록 하는 것입니다.

4. javascript 넣기

테마의 footer.php 파일을 열고 /body 위에 아래의 코드를 넣으세요. 화면이 로딩되는 동안 스피너가 보이게 하고 화면 로딩이 끝나면 스피너가 사라지게 되는 액션을 하기위해서 입니다. 또한 어떤 링크를 클릭할 때 즉시 스피너가 보이고 로딩이 끝나면 스피너가 사라집니다. 외부링크를 누를 때는 스피너가 필요없기 때문에 액션을 하지 않습니다.

4 완성 화면

제 사이트에 직접 적용을 해봤어요. 페이스북 물결부터 다양한 로딩 스피너를 사용해보고 선택한 스피너입니다. 링크를 클릭하거나 페이지를 로딩할 때 스피너가 보여요! 여러분도 사이트의 느낌과 맞는 스피너를 선택해서 적용해보세요.

마치며

웹 브라우져에서 사이트를 열때 탭에 기본적으로 스피너를 보여주지만 웹사이트 화면에서도 사이트의 특성에 맞는 스피너를 보여준다면 사용자 편의도 높아지고 페이지 열람률도 높아질 것같습니다. 혹시 gif가 아닌 css를 활용해서 로딩을 보여주고 싶으신 분은 cssload 에서 css 스타일을 복사하여 적용해보세요. 그럼 오늘도 즐거운 블로깅 하세요. 🙂

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스에 페이스북 물결 로딩 스피너 달기”에 대한 8개의 생각

  1. 좋은 정보 감사합니다. 그런데, 스피너가 사라지지 않고 영원히 돌고 있어요 ㅠㅜ 푸터에 안 먹히나봐요 ㅠㅜ

    1. 안녕하세요! 스피너가 안멈추는 것은 hide가 안된다는 거네요. 아래와 같이 load를 위로 빼서 다시해보세요.

      jQuery(window).load(function() {
      jQuery(‘#myspinner’).hide();
      });

      jQuery(document).ready(function() {

      jQuery(“a”).not(‘.external’)click(function() {
      jQuery(‘#myspinner’).show();
      })
      });

        1. 웹브라우져 개발자 툴을 활용해서 어떤 에러가 나는 지 확인하시고 수정해보세요. 또는 플러그인을 비활성화하고 기본 테마에서 테스트 해보시는 것도 좋을 것같네요. 🙂

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.