티스토리 스킨 변경 없이 사이드바 메뉴 보이게 하기(PC버전)

#2라는 티스토리 스킨을 쓰고 있는데 이 스킨은 PC버전에서 사이드바 메뉴가 노출되지 않습니다.

좌측 상단의 메뉴버튼을 눌러야 사이드바 메뉴가 열리게 되는데요, 이 스킨에서도 사이드바를 꼼수로 노출 시킬수 있습니다.

이 방법을 공유해보려고 합니다.

---

개요

처음 스킨을 고를때 그냥 디자인이 깔끔해서 아무 생각 없이 사용하게 됬는데 티스토리 블로그를 만들 처음에 스킨선택은 엄청나게 중요하다.

사이드바가 나오게 할 수 있는 법은 없을까? 사이드바가 보이면 방문객을 다른 글로 유입시킬 가능성이 늘어나는 장점이 있고 블로그에 어떤 글들이 있는지 한눈에 파악할 수가 있다. 

이런 사이드바 메뉴를 노출해서 방문자를 오래 있게 하고 싶은데 사이드바가 없으니 다른 방법이 없을까 고민해봤다.

첫번째로 스킨을 변경하는 방법이다. 

하지만 이렇게 되면, meta태그와 구글애드센스 광고로 삽입된 코드가 날아가고 검색최적화도 재수없으면 사라지게 될 수 있으니 심혈을 기울이고 변경해야한다. 

고민끝에 스킨을 변경하지 않고 PC버전에서 사이드바를 노출하는 꼼수를 생각해 냈다.

바로 사이드바 메뉴를 오픈시키는 햄버거 버튼을 PC버전에서 항상 활성화 시켜 놓으면 되지 않을까?

이런 단순한 생각에서 시작하게 되었다. 

한번 꼼수를 시작해보자. 

---

수정작업하기

첫번째로 사이드 메뉴를 제어하는 Class가 뭔지 추적해보자.

바로 navi_on 이라는 녀석이다. 

사이드바 카테고리버튼 클릭시 'navi_on' 클래스를 새롭게 부여하고 있는걸 알 수 있다.

 

그렇다면 navi_on 을 PC버전에선 항상 부여해 두면 사이드바가 항상 열려 있지 않을까? 

일단 if문을 적어보겠다.

if($(window).width() >480) { /* do something */ }

윈도우 창의 크기가 480px 이상이면, 무언가를 하겠다. 란 뜻이다.

결론적으로 윈도우창이 480px 이상이면(모바일 사이즈 이상이면) 사이드메뉴를 항상 열겠다라는 식으로 작업해보겠다. 

<!--만약 창이 1280px이상이면 navi_on이 활성화된다-->

<script>

if($(window).width() >1280) {$('.wrap_skin').addClass('navi_on'); }

</script>

<!--//사이즈별 메뉴바활성-->

위의 소스 코드를 복사하면 된다.

위 소스를 해석하면 윈도우창이 1280px 이상일때 wrap_skin에 navi_on을 추가하겠다는 뜻이다. 

navi_on의 추가는 결국 사이드바가 활성화 됨을 의미한다. 

윈도우창을 1280px으로 한 이유는 타블렛과 모바일 또는 노트북에서 사이드바가 활성화 되는걸 막기 위함이다. 

모바일이나 타블렛에서 접속시 아래처럼 메뉴바가 다 가려버리면 정말 황당하지 않을까. ㅎㅎㅎ

이제 위 소스를 티스토리 html편집에서 최하단 body 위에 붙여넣어주면 끝이다.

이와 같이 넣어주자. 

---

확인

이제 PC로 접속하면 메뉴바가 항상 열려있는 상태로 보인다. 

일단 꼼수로 사이드바 메뉴를 항상 보이게 하는건 성공했다.  

사이드바가 보이는 스킨으로 바꿀 엄두가 안나서 일단 이렇게 둘 예정이다. 

사이드바에 광고를 넣으니 지저분해져서 광고를 뺐다. 

티스토리 내맘대로 조금씩 수정해가는게 꽤 재미있다.