[워드프레스] 목록페이지 내용 클릭시 글로 이동시키기

#wordPress #generatePress #목록페이지꾸미기 #리스트페이지꾸미기 #자바스크립트적용

안녕하세요, 배곧동개발자 입니다.

generatePress를 이용해서 티스토리, 네이버 블로그와 비슷하게 만들어보고 있던 중에 목차페이지에서 이상한 점을 발견했습니다.

앞서 포스팅에서 이렇게까지는 만들었는데, 저 본문요약부분을 클릭하면 당연히 글로 넘어가질거라는 UX적인 판단에도 불구하고 아무런 이벤트가 주어지지 않더라구요?

안되면 되게하라. 이번 포스팅에서는 저 요약글을 눌렀을 때에 해당 포스팅으로 넘어갈 수 있게 한번 만들어보겠습니다.

1. 객체를 특정해보자

우선 저 글에 대해 접근하고 알아보기 위해서 어떤 클래스로 이루어져 있는지 확인을 해봅시다.

지난버 포스팅들에서도 다뤄봤듯이 목록페이지에서 각각의 글들은 entry-summary라고 하는 클래스로 이루어져 있습니다. 그러면 저 entry-summary에 클릭 이벤트를 주면 되겠지요?

근데 여기서 한가지! 클릭 이벤트까지야 뭐 줄 수 있겠는데 포스팅 경로는 어떻게 얻어야할까요?

2. 상세페이지 주소를 얻어보자

해당 포스팅의 경로를 얻기 위해서 html 소스를 조금 더 까봅시다.

보시면 저쪽 아래에 떡하니 적혀있지요? 저것에 접근을 하는것이 이번 포스팅의 핵심입니다. 조금은 어려울 수 있으니 모르겠으면 굳이 이해하지 않으셔도 되요.

먼저 우리가 건드릴 객체인 entry-summary부터 시작해봅시다. 그 아래에 p 태그가 있습니다. 그리고 그 p 태그 아래에 a 태그가 있고 그 a 태그의 href 속성이 바로 포스팅 주소입니다. 이걸 소스코드로 적어보자면

// 포스팅 주소
var url = $(".entry-summary").children("p").children("a").prop("href");

이렇게 됩니다. 제이쿼리의 내장함수 중 children 이라는 함수가 있는데, 위에서 언급한 “아래에”를 구현해주는 함수입니다. 자식이죠 자식.

3. 이벤트를 입혀보자

자, 포스팅주소까지는 알게되었습니다. 이제 남은 것은 저 요약글에 이벤트를 입혀줘서 클릭하면 넘어가게 만드는 것이지요.

잠깐! 아마 다들 header and footer는 깔려 있으실겁니다. 그리고 제이쿼리도 깔려 있으시죠? 없으시다면 아래 포스팅 참고해주세요!

다들 셋팅은 되셨다 판단하고 스크립트를 짜보도록 할까요? 골자는 “각 요약글마다 위에 얻게 된 경로로 이동하는 클릭 이벤트를 입혀라”.

// 각 요약글마다
$(".entry-summary").each(function(){
  // 클릭이벤트를 입혀라
 $(this).click(function(){
    // 위에서 얻게된 경로로 이동하는
  location.href=$(this).children("p").children("a").prop("href");
 });
  // 이건 마우스 모양바꾸기 뽀나스!
 $(this).css("cursor","pointer");
});

제이쿼리 써보신분들은 바로 이해하실거고 개발 잘 모르시는분들은 굳이 이해하지 마시고 복붙해주시면 됩니다. 대신 여기서 꼭 지켜주셔야 할 점!

// ★반드시 document.ready 아래에 놓는다★
$(document).ready(function(){
 $(".entry-summary").each(function(){
  $(this).click(function(){
   location.href=$(this).children("p").children("a").prop("href");
  });
  $(this).css("cursor","pointer");
 });
});

바로 “반드시” document.ready 아래에 놓아야 한다는 점 입니다. 이렇게 하지 않으면 클릭 이벤트가 정상적으로 입혀지지 않을 수 있습니다. 더 이상의 설명은 머리 아프실테니 스킵.

4. 마무리

자 이렇게까지 하셨으면 이제 목록페이지로 넘어가서 요약글을 한번 눌러보시지요. 본문으로 아주 잘 넘어가지는걸 볼 수 있으실겁니다.

제가 generatePress 유료버전을 안써서 모르겠는데, 이런거 다 유료버전엔 포함되어있나요? 저야 개발자니까 이런거 하나하나 만들어가며 하면되는데 아니면 답답해서라도 유료결제 할거같습니다.

혹시 궁금하거나 추가적으로 필요한 기능들 있으시면 댓글로 알려주세요! 연구해보고 공유하겠습니다.

이만, 배곧동개발자였습니다.