[워드프레스 REST API] 간단한 글 불러오기 및 쓰기

얼마전까지만 해도 REST API 에 관한 정보를 찾으면 제대로 된 것을 구하기가 힘들었다. 메뉴얼도 복잡하고 엉성하고 예제도 없었다. 그래서 여태 손놓고 있다가 검색해보니 많은 발전이 있었던 것 같다. 배우기 좋은 토양이 갖추어져있다. 그럼 이제 시작해볼까. 쉬운 것 부터. 간단한 읽기오 쓰기.

워드프레스 REST API 를 이용하여 POST를 불러오기

http://localhost:8080/wp-json/wp/v2/posts

이 주소를 치면 최근 post 를 array 로 돌려준다. 예전에는 rest api 플러그인을 설치해야 가능했는데, 이제 기본으로 제공되어 플러그인을 따로 설치할 필요가 없다.

그렇다면 불러들인 글을 어떻게 표시할까?

먼저 theme 폴더내에 아무 테마나 선택해서 functions.php 파일을 열고 다음을 추가한다. 3번째 라인은 style 로딩하는 것이니 그냥 패스하고, 4번째 라인은 functions.php가 위치해있는 폴더안에 js 폴더를 생성하고 main.js 파일을 만들어 넣은 후, functions.php 파일에서 포드해주는 작업이다. wp_enqueue_script 한 후에는 6번째 라인에서는 wp_localize_script 를 통해 security 를 강화시켜준다.

function learningWordPress_resources() {
  
  wp_enqueue_style('style', get_stylesheet_uri());
  wp_enqueue_script('main_js', get_template_directory_uri() . '/js/main.js', NULL, 1.0, true);

  wp_localize_script('main_js', 'magicalData', array(
    'nonce' => wp_create_nonce('wp_rest'),
    'siteURL' => get_site_url()
  ));
  
}

add_action('wp_enqueue_scripts', 'learningWordPress_resources');

wp_localize_script 의 array 안에 정의된 값들은 magicalData 라는 이름의 변수 아래에 정의되어 main_js 가 로드된 html 페이지에 다음과 같이 삽입된다. array 안에는 임의의 값도 정의할 수 있다. 예를 들면, array(‘blue’=>’sky’,’red’=>’apple’,’yellow’=>’banana’) 처럼 말이다. wp_create_nounce 는 그냥 임의의 값을 생성해주는 함수다.

wp_localize_script는 읽기에서는 필요치않은데, 쓰기에서 보안을 위해 main.js 와 그것을 로딩한 페이지를 묶어주는 기능을 하기위해 array 안에 nounce 값을 설정해주었다.

<script type="text/javascript">
/* <![CDATA[ */
var magicalData = {"nonce":"36b6bc8d55","siteURL":"http:\/\/bloomberg.iptime.org"};
/* ]]> */
</script>

아무 페이지에서나 버튼하나와 빈 div를 적어넣는다.

<button id="portfolio-posts-btn"></button>
<div id=""portfolio-posts-container""></div>

js/main.js 파일에서

var portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");

if (portfolioPostsBtn) {
  portfolioPostsBtn.addEventListener("click", function() {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', magicalData.siteURL + '/wp-json/wp/v2/posts?categories=6&order=asc');
    ourRequest.onload = function() {
      if (ourRequest.status >= 200 && ourRequest.status < 400) {
        var data = JSON.parse(ourRequest.responseText);
        createHTML(data);
        portfolioPostsBtn.remove();
      } else {
        console.log("We connected to the server, but it returned an error.");
      }
    };

    ourRequest.onerror = function() {
      console.log("Connection error");
    };

    ourRequest.send();
  });
}

function createHTML(postsData) {
  var ourHTMLString = '';
  for (i = 0; i < postsData.length; i++) {
    ourHTMLString += '<h2>' + postsData[i].title.rendered + '</h2>';
    ourHTMLString += postsData[i].content.rendered;
  }
  portfolioPostsContainer.innerHTML = ourHTMLString;
}

워드프레스 REST API 를 이용하여 POST를 쓰기

// Quick Add Post AJAX
var quickAddButton = document.querySelector("#quick-add-button");

if (quickAddButton) {
  quickAddButton.addEventListener("click", function() {
    var ourPostData = {
      "title": document.querySelector('.admin-quick-add [name="title"]').value,
      "content": document.querySelector('.admin-quick-add [name="content"]').value,
      "status": "publish"
    }

    var createPost = new XMLHttpRequest();
    createPost.open("POST", magicalData.siteURL + "/wp-json/wp/v2/posts");
    createPost.setRequestHeader("X-WP-Nonce", magicalData.nonce);
    createPost.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    createPost.send(JSON.stringify(ourPostData));
    createPost.onreadystatechange = function() {
      if (createPost.readyState == 4) {
        if (createPost.status == 201) {
          document.querySelector('.admin-quick-add [name="title"]').value = '';
          document.querySelector('.admin-quick-add [name="content"]').value = '';
        } else {
          alert("Error - try again.");
        }
      }
    }
  });
}

 

댓글 남기기