워드프레스 AJAX 사용법

AJAX는 클라이언트(front)에서 서버(back)에 특정 내용을 요청하면 서버가 해당 내용을 클라이언트에 전달하는 일종의 커뮤니케이션 방식입니다. 워드프레스에서 AJAX를 사용할 때 몇가지 스텝이 있어 복잡해 보이지만 조금만 들여다보면 사용법은 의외로 간단합니다. 이번 포스트에서는 AJAX 사용법에 대해 소개하겠습니다.


AJAX를 사용하는 이유

몇가지 대표적인 이유가 있습니다만 결국에는 사용자 편의를 위해 많이 사용되는 컨텐츠 로딩 방식입니다.

  • * 원하는 영역만 로딩이 가능
  • * 사용자 편의
  • * 비동기로 서버와 통신하여 페이지 로딩 빠름

워드프레스에서 AJAX 적용 순서

  1. JS 파일 생성 및 ajax call 코딩
  2. JS 파일 워드프레스에 등록
  3. ajax 요청시 필요한 action 워드프레스에 등록

아래는 위의 순서에 따른 간단한 예제입니다. 이 예제에서는 특정 포스트 id를 서버에 넘겨주고 서버에서 해당 포스트의 정보를 다시 넘겨줍니다.

1. JS 파일 생성 및 ajax call 코딩

2. JS 파일 워드프레스에 등록

3. ajax 요청시 필요한 action 워드프레스에 등록

마치며

위의 포스트를 작성하고 보니 처음 코드를 보시는 분들은 왠지 복잡하게 느끼실 것 같습니다. 아마도 action과 action에서 불리는 함수의 이름이 많아서 그럴 것 같습니다. 그래서 워드프레스에 ajax를 적용할 때는 함수나 action의 이름을 기억하기 쉽고 구분이 잘 되도록 지어주는 것이 좋습니다. 또한 서버쪽과 클라이언트 쪽 파일들을 이동하며 코딩을 해야하기 때문에 원하는 작업의 내용을 노트 등에 구체화 한 이후에 코딩을 진행하는 것도 좋을 것 같네요. 🙂

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.