워드프레스에서 Ajax 따라해보기

13027842-3d-ajax-sphere-with-several-words-on-white-background

 

워드프레스에서 AJAX 사용하는 방법은 참 다양하게 많은 것으로 보이는데 제가 다 파악하지는 못했구요!
이번에 템플릿내에 Ajax를 이용해 특정 뷰를 불러오기 위해서 적용했던 방법에 대해서 말씀드려보고자 합니다.

워드프레스가 워낙에 잘 되있어서 구현하는 것은 어렵지 않습니다.
자, 그럼 시작해보겠습니다.

저의 경우 해당 post type의 카테고리 전체 리스트와 사진을 추출한 후 제가 원하는 형식의 JSON 데이터로 변환시키고 이 데이터를 스크립트를 이용해 동적으로 페이지에 로딩하는 부분을 만들어보았습니다.
오랫만에 워드프레스를 공부하는 거라 재미있네요!

그럼, 적용하고자 하는 테마의 function.php 를 열어준 후 아래와 같이 넣어봅니다.
아래 함수는 워드프레스의 카테고리와 사진정보를 특정 데이터 형식으로 만들어 JSON 스트링으로 변환시켜 프린트합니다.
설명이 필요한 곳에는 간단하게 주석을 달아놓겠습니다.

이렇게 만들어 보았습니다.

자 그럼 하단에 add_action을 유의 깊게 보셔야 하는데요!
wp_ajax_ 와 wp_ajax_nopriv_ 이게 ajax 액션의 키입니다.

권한이 필요한 경우 즉 로그인한 경우 wp_ajax_… 액션이 실행되고,
그와 반대로 권한이 없는 로그인 안한 경우는 wp_ajax_nopriv_… 액션이 실행됩니다.

그럼 이렇게 함수로 만들었는데 특정 Url이 있는건가?

네 있습니다. 워드프레스에서 공식적으로 /wp-admin/admin-ajax.php 이와 같은 주소를 지원하고 있습니다.
이 주소로 던지시면 방금 만들었던 함수를 타고 해당 json스트링을 가져옵니다.
그럼, 다음과 같이 자바스크립트를 이용해 처리하면 됩니다.

 

사실 이렇게만 하면 끝입니다.
ajax를 호출하는 스크립트 넣는 부분은 어려움이 없지만 ajax를 어디에 호출해야 하는지에 대한 궁금증은 다소 풀리셨으리라 생각합니다.

 

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.

  • 이미 ajax 포스팅을 하셨군요 ㅎㅎ

    • ㅋㅋ 그러게요! 지훈씨가 더 디테일하던데요! ㅋㅋ 이제 워프 개발자 다 되셨네요!! ^^

  • 지종

    감사합니다ㅣ!