본문으로 바로가기

티스토리 특정카테고리에서만 나타나는 메뉴 만들기를 해보았습니다.

Intro - 해당기능을 달게 된 이유

사실 특정카테고리에서만 나타나는 메뉴의 최종 목적은 추천 글을 보여주는 사이드바 모듈을 만들려고 했습니다.

Addthis나 기타 추천 모듈 위젯 플러그인을 사용하면 추천 글 보여주기는 가능하나

주제별로 맞춤형 포스팅을 제공하기도.. 추천 구독 모듈 디자인을 수정하기도..

내 마음대로 커스터마이징을 하기는 힘들었습니다.


그래서 한번 직접 만들어 볼까?하고 시작을 하게 되었습니다.


본론 및 현재 진행 상황

저는 많지는 않지만 여러 주제로 블로그를 운영하고 있는데

게임 카테고리에서 작성된 글게임 추천 포스팅 사이드바 메뉴 보여지게 만들고

CSS 수정 카테고리에서는 관련 티스토리 꾸미기 추천 글 보여지게 하려고 했습니다.


결론 부터 말씀드리면 성공은 했습니다.


게임 관련 게시글은 게임 추천 포스팅이 보여집니다.



HTML및CSS게시글 에서는 꾸미기 관련 추천글 메뉴가 보여지게 됩니다.


그.러.나 ㅠ 100% 성공이라고 말하기는 아직 몇가지 오류가 있습니다.



생각보다 오래 걸린 작업입니다. ㅠ jQurey 와 JS 기본 문법 조차 모르는 상태로 시작했기에...

구글 검색을 해봐도 관련 내용은 없을 뿐더러, 대부분이

특정 카테고리 펼치기 밖에 없더군요...


기본 원리는 jQurey의 filter() 함수를 사용해서 값을 축출하는 방식을 사용했습니다.

특정 클래스 포함 여부를 확인하기 위해서 진짜 오만 함수는 다사용한 것 같네요. hasclass, hasdata, is, indexof 기타 등등


아무튼 그래서 결국 하나는 성공은 했는데... 두 개를 설치해보니

두 개중 하나가 position 씹혀버린다고 해아하나요? ㅠ

캐시가 되지 않은 상태에서 방문시 위치를 뚫고 올라오게 됩니다.. (새로고침을 하면 제대로 표현됨)


함수 순서를 바꿔보고 모든 id , class를 각각 다르게 해도 동일 증상이 나타납니다...

결국 하나는 $(document).ready() 로 실행을 $(window).load() 실행을 해서 순서를 구분하니 정상적으로 표현이 됩니다.


그말은 즉슨 두개의 카테고리에서 두개의 추천 메뉴 밖에 사용 못한다는 소리?!!


아무튼 그래서 현재 미완성입니다. ㅠ_ㅠ 언제 완성 될 지는 모르겠습니다.

아무튼 그래서 해당 "티스토리 특정카테고리에서만 나타나는 메뉴 만들기" 꾸미기 관련 강좌는 무기한 연기!!


100% 완성 되기 전에는 ㅠ...


독학으로 이것 저것 꾸미다가 웹언어를 배워서 HTML과 CSS는 어느정도 알겠는데

JS 및 jQuery는 ㅠ 기초문법도 읽을줄 모르니, 기초강좌부터 다시 배워볼까합니다. opentutorials.org


어떻게 보면 억지로 해당 카테고리 여부를 맞춰나서 문제가 발생할 가능성이 높습니다.

즉, 다른 스킨을 사용하시는 분들은 쉽게 적용이 힘들 수 있습니다.

또한 특정 게시글에서는 추천 모듈이 충돌해서 겹쳐지는 일이 발생할 수 있습니다.


아직 잘 모르겠지만 스크립트 자체를 싹갈아 엎어야할 것 같은 느낌인데..

혹시 좋은 아이디어나 ㅠ_ㅠ 구원의 길로 인도해주실 웹개발자분이 계신다면 좋겠네요.


아무튼 특정카테고리안의 게시글을에게 특별한 이벤트를 발생시키는 것은 

팝업을 띄운다거나? 특정 카테고리일 때 모양을 바꾼다거나 이미지뷰어를 교체한다거나 등등

다양하게 응용할 수 있기에 좋은 기능이라고 생각합니다.


결국에는 좀 더 많이 공부를 해야겠습니다. 끝 ㅠ_ㅠ

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.07 18:12 신고

    너무 고급기술인거 같아요. ㅠ,ㅠ
    저는 시도도 못할거 같은...

    • BlogIcon COCOSOFT COCO Media 2016.03.07 20:06 신고

      너도 여기저기서 눈으로 보고 붙여넣기해봤는데 제대로 만들지는 못했네요 ㅠ_ㅠ 시간되면 천천히 공부하고 다시 만들어 보고싶네요!!

  2. BlogIcon 아치아라 2016.11.26 17:30 신고

    몇달된 글인데 해결하셨는지 모르겠네요. 간단하게 카테고리 div에 id 값 주고, document.getElementById.innerHTML('id값') 해서 해당 카테고리 안에 있는 값을 if 구문으로 비교한 다음 자바스크립트로 Dom을 직접 컨트롤 해주면 됩니다.

티스토리 툴바