2017년을 맞이하여 블로그 리뉴얼을 단행했다. 블로그 리뉴얼의 주요 포인트로는

  • 지향1) 블로그 글들을 펼쳐서 볼 수 있는 테마

원래 테마가 최신글의 “요약글”을 보여주는 형태였지만 그럴 경우 트래픽에 대한 부담감은 적었지만 처음 내 블로그를 들어오는 분들께서 글들을 하나하나 다 열어봐야 한다는 단점이 있었다. 그런데 아무리 생각해봐도 이건 너무 공급자적 마인드라는 생각이 들었다. 이 블로그의 글들이 어떤지 알고 싶어할 때 한 번에 글들이 펼쳐지는 형태가 가장 좋지 않을까 싶었다. 그래서 “요약글” 형태에서 “전체 펼쳐보기” 형태의 테마로 선정했다. (테마 : Twenty Sixteen)

  • 지향 2) Wide한 형태로 글을 볼 수 있는 테마

기존의 테마는 좌우 여백이 넓어 홈페이지를 넓게 사용할 수 없었다. 홈페이지 전체를 넓게 사용할 수 있는 Wide 형태의 테마를 선택했다.

그래서 선택한 테마는 Twenty Sixteen이었다. WordPress에서 직접 만든 테마였다. 하지만 이 테마의 문제점이 있었다

  • 문제점1) 펼쳐보이는 글의 길이가 길어질 경우 Sidebar의 로딩 속도가 느려진다
    • 해결 > 노출 글 수를 줄이고 무한 스크롤 기능 도입으로 스크롤 시에만 추가 포스팅 로딩

펼쳐보이는 글의 수는 관리자 모드 -> [설정] -> [읽기]에서 설정이 가능하다. 기존에는 10개의 “요약글”을 보여주는 형태였는데 이 글을 모두 펼쳐보기로 보여주다 보니 사이드바의 로딩이 너무 느렸다. 무려 30초가 지나도 뜨지 않은 경우가 발생 ^^;; 그렇다고 사이드바가 빠르게 로딩되기에 적합한 글의 수 (2-3개)의 경우 방문자가 직접 페이지를 넘기면서 봐야 하는 문제가 있었다. 이에 도입한 것은 “무한 스크롤” 기능이다 (플로그인 :Ajax Pagination and Infinite Scroll)

지금 내 블로그의 경우 처음 사이트 방문시에는 2개 글만 보여지지만(설정-읽기-보여지는 글 수에서 설정한 숫자다. 만약 설정을 5로 한다면 처음 사이트 방문시에 보여지는 글은 5개 글이다) 스크롤을 내릴 경우 로딩표시가 뜨면서 추가 2개의 글이 로딩이 된다.(설정이 5라면 추가로 5개 글이 로딩된다) 스크롤은 제한 없이 게속 내려가는 형태이다. 만약 블로그의 글들이 맘에 들 경우 계속 내려가면서 내 블로그내에 모든 포스팅을 볼 수 있는 형태이다. 페이스북 Feed 형태를 생각하면 될 것 같다.

이 플러그인의 장점은 한 번에 많은 글을 로딩해도 되지 않아 트래픽과 사이드바 로딩속도 향상에 좋다는 점이다. 그리고 언제 부터 미리 추가 글을 로딩할 수 있을지도 설정할 수 있어 내 블로그의 경우 2번째 블로그 글의 중간 정도로 시선이 왔을 때 아래 2개의 글이 추가 로딩 된다. 그렇게 문제점1을 해결했다.

+ 문제점 추가 발견

위의 플러그인(Ajax Pagination and Infinite Scroll) 로는 인터넷 익스플로러에서 무한 스크롤 기능이 작동하지 않는다 (크롬과 사파리에서는 정상 작동) 이에 다른 플러그인을 찾던 중 YITH Infinite Scrolling 을 사용해보았는데 인터넷 익스플로러, 크롬, 사파리 모두 무한 스크롤이 가능!

  • 문제점2) 구글 애드센스 플러그인이 작동하지 않았다
    • 해결 > 노출 글 수를 줄이고 재시도

이전 테마에서는 구글 애드센스 플러그인을 활용해서 자동으로 사이트를 분석해 광고위치를 설정했었다. 이번에도 테마를 바꾼 뒤 그렇게 하려고 했으나 “사이트 분석 실패” 얼럿이 떴다. 아무리 해도 안되다가.. 방법을 찾은게 “노출 글 수”를 줄이는 것에 있었다. 기존 전면 노출 글수가 10개라 이를 모두 로딩하는데 구글 애드센스 플러그인이 애를 먹은 것이다. 2개 정도로 노출 글 수를 설정하고 다시 사이트 분석을 하자 분석이 완료되며 광고 위치를 설정할 수 있었다.

그 밖에도 몇 가지 변화가 있었다

  • 호스팅사에서 제공하는 무료 CDN을 활용하여 이미지 트래픽 감소
  • 댓글 모듈을 기존 워드프레스 댓글에서 -> 페이스북 댓글로 수정하여 참여도 테스트 진행
  • 젯팩 ‘관련 글’ Activate
    • 기존 테마에서는 ‘관련글’ 기능이 Default였으나 Twenty Sixteen 테마에서는 없었다

그리고 다음 테마 변경 때 잊지 말야할 것들을 정리해보면

  • Header에 들어가는 다양한 코드들
    • 페이스북 픽셀 코드
    • 구글, 네이버 웹마스터도구 사이트 본인 인증을 위한 코드

이다.