[Wordpress] Wordpress REST API 활용법! 이미지 정보 가져오는 방법

Wordpress REST API

Wordpress는 단순히 블로그 같은 CMS(Content Management System)을 넘어서 정말 다양한 용도로 활용되는 플랫폼입니다.

다양한 플러그인뿐만 아니라 다른 애플리케이션과 연동할 수 있도록 REST API도 자체적으로 제공하는데요. 이번 튜토리얼에서는 Wordpress REST API를 응용해볼 겁니다. 직접 Woocommerce의 상품 이미지 정보를 가져오는 REST API를 구현해보면서 나만의 Wordpress REST API를 만드는 방법을 얻어가실 수 있을 겁니다.

 

Woocommerce 상품 이미지 가져오는 API 구현

 /**
     *  Register Routes
     * 
     */
    public function register_routes(){
       // 카테고리 가져오기 custom filter 적용
       add_filter('woocommerce_rest_prepare_product_cat',array($this, 'add_child_category_flag') ,10,3);
       // 찜한 상품 목록 가져오기 API 등록 
       register_rest_route($this->namespace, $this->rest_base . "/wishlist", array(
        'methods' => 'GET',
        'callback' => array( $this, 'get_wishlist_products'),
        'permission_callback'   =>  "is_user_logged_in",
        'args'  =>  array(
            'page'  =>  array(
                'required'  =>  true
                ),
            ),
        ));
    }
    

 

먼저 Wordpress REST API 등록을 위해 라우팅 설정을 등록해줍니다.
API를 통해 데이터를 가져오기 위한 권한 설정과 HTTP Method 그리고 필수 파라미터 값도 설정해줍니다.
callback에는 해당 API가 호출되었을 때 실행할 콜백 함수를 등록할 수 있습니다.
이 함수에서 특정 로직을 거쳐 사용자에게 데이터를 전달해주게 됩니다.

 /**
     * 
     *  찜한 상품 목록 가져오기 API 로직
     * 
     */
    function get_wishlist_products($request){
        global $wpdb;
        $page = $request['page'] - 1;
        $offset = $this->post_per_page * $page;
        $product_wishlist = array();

        // 현재 사용자 아이디 값을 가져온다
        $user_id = get_current_user_id();

        // 사용자가 찜한 상품 목록 정보를 가져온다
        $query = "select * from wp_yith_wcwl where user_id={$user_id} order by dateadded DESC limit {$offset},{$this->post_per_page}";
        $results = $wpdb->get_results($query);
        
        if($results){
            foreach($results as $key => $item){
                // 상품 상세 정보를 가져온다
                $product_id = $item->prod_id;
                $product = wc_get_product($product_id);

                // 필요한 정보를 추출한다
                if($product){
                    // 썸네일 정보를 가져온다
                    $attachment_id = $product->get_image_id();
                    $img_src = wp_get_attachment_image_src($attachment_id, 'full');

                    $data = array(
                        "id"    =>  $product_id,
                        "name"  =>  $product->name,
                        "thumbnail_url" =>  $img_src[0],
                        "price"     =>  $product->price,
                        "regular_price" =>  $product->regular_price,
                        "sale_price"    =>  $product->sale_price,
                        "status"    => $product->status,
                    );
                    // 리턴 데이터 목록에 넣는다
                    array_push($product_wishlist, $data);
                }
            }
        }
        

        
        // 찜한 상품 목록을 리턴
        $response = new WP_REST_RESPONSE($product_wishlist);
        $response->set_status(200);
        return $response;

    }
}

위의 로직을 간략하게 설명하면 Woocommerce에서 찜한 상품 목록을 리턴해주는 것인데요.
일단 Woocommerce는 대표적인 e-commerce 플랫폼으로 블로그에 최적화되어있는 Wordpress를 쇼핑몰로 업그레이드해주는 플러그인입니다. 하지만 Woocommerce에서는 기본적으로 상품 찜하기(위시리스트) 기능을 제공하지 않는데요. 이를 위해 YITH Woocommerce wishlist라는 플러그인을 추가적으로 사용합니다.
따라서 위의 로직이 정상적으로 실행되려면 2개의 플러그인이 미리 설치되어있어야 하는 것이죠.

• Woocommerce
• YITH Woocommerce Wishlist

세팅이 완료되었다는 가정하에 로직에서 이미지 정보를 가져오는 부분을 중점적으로 설명드리겠습니다.

 // 상품 상세 정보를 가져온다
$product_id = $item->prod_id;
$product = wc_get_product($product_id);

// 필요한 정보를 추출한다
if($product){
    // 썸네일 정보를 가져온다
    $attachment_id = $product->get_image_id();
    $img_src = wp_get_attachment_image_src($attachment_id, 'full');

    $data = array(
        "id"    =>  $product_id,
        "name"  =>  $product->name,
        "thumbnail_url" =>  $img_src[0],
        "price"     =>  $product->price,
        "regular_price" =>  $product->regular_price,
        "sale_price"    =>  $product->sale_price,
        "status"    => $product->status,
    );

바로 이 부분입니다. 여기까지는 일단 찜한 상품 정보를 데이터베이스로부터 가져온 상태입니다.
YITH 플러그인에서 생성한 DB 테이블에서 사용자 id로 필터링해서 데이터를 가져온 것이죠. 하지만 여기에는 상품에 대한 자세한 정보가 없습니다. 특히 이미지의 경우 상품 정보에도 image id 값만 저장되어있어 또 개별적으로 가져와야 합니다.
그렇기 때문에 우선 Woocommerce에서 제품의 상세 정보를 먼저 가져와야 합니다.

wc_get_product() 메서드를 통해 제품 상세정보를 가져올 수 있는데요.

$WC_Product|null|false = wc_get_product( $the_product, $deprecated );

Woocommerce에서 제공하는 함수로, id값을 통해 제품의 상세 정보를 가져올 수 있습니다.
이렇게 제품의 상세정보 값을 가져오면 아래와 같이 많은 데이터를 확인할 수 있습니다.

디버깅을 해보면 WC_Product_Simple 클래스에 다양한 정보가 포함되어있을 것을 확인할 수 있습니다.

data 항목에서 자세한 필드 값들을 확인할 수 있습니다.

상품의 이름부터 가격, 생성 날짜 등 API 구현에 필요한 많은 정보들이 있습니다. 여기에서 자신이 필요한 값들을 추출해서 사용하면 됩니다.
참고로 필드 값에 접근할 때에는 아래와 같이 사용하면 됩니다.

$product = wc_get_product($product_id);
$product->name;
$product->price;

이제 상품 이미지 정보를 가져와야 하는데요. Woocommerce의 상품 관련 이미지는 다른 테이블에 저장되어있습니다. 그리고 관련 이미지 id값만 가지고 있습니다. Woocommerce에서 제공하는 get_image_id() 메서드를 통해 이미지 id값을 받아옵니다.
그리고 이미지에 대한 상세 정보를 가져오면 되는데요. 이를 구현한 코드가 바로 이 부분입니다.

// 썸네일 정보를 가져온다
    $attachment_id = $product->get_image_id();
    $img_src = wp_get_attachment_image_src($attachment_id, 'full');

wp_get_attachment_image_src() 메서드로 이미지 상세정보를 가져올 수 있습니다. 파라미터로 이미지 id 값과 사이즈가 들어가는데요.

 

• full : 이미지 원본 사이즈
• thumbnail : 썸네일 사이즈 150 X 150

이렇게 사이즈를 선택해서 사용할 수 있습니다. 리턴된 데이터에는 이미지 URL과 너비, 높이 픽셀 값이 포함되어있고 해당 이미지가 리사이징 된 이미지인지 여부도 함께 나타나 있습니다.

 

 

반응형

 

Featured Image 정보 가져오기

 

    // 쿼리실행
    $event_query = "select * from wp_posts where post_type='{$post_type}' and post_name like '{$filter_slug}' and post_status='{$status}' order by post_date DESC limit {$offset},{$post_per_page}";
    $results = $wpdb->get_results($event_query); 
    $event = $results[0];
    
    // 썸네일 정보 추출
    $id = (int)$event->ID;
    $thumbnail_id = get_post_thumbnail_id($id);
    // 사이즈를 선택할 수 있다. full은 원래 사이즈, thumbnail은 150 x 150
    $thumbnail_data = wp_get_attachment_image_src($thumbnail_id, "full"); 
    $thumbnail_url = $thumbnail_data[0]; // 차례대로 img src 값, width, height 정보가 포함되어있다.
    

wp_get_attachment_image_src()를 활용해서 Wordpress 기본 포스팅이나 페이지에 설정된 썸네일(Featured Image)도 가져올 수 있습니다. 페이지 또는 포스트를 쿼리를 통해 가져온 다음 id값을 가져옵니다. 이제 썸네일 이미지 id 값을 알아야 하는데 get_post_thumnail_id() 메서드에 파라미터로 앞에서 구한 포스트 혹인 페이지 id값을 넣어서 구할 수 있습니다.

마지막으로 wp_get_attachment_image_src에 사이즈와 썸네일 이미지 id값을 넣으면 썸네일 상세 정보를 확인할 수 있습니다. 

 

이렇게 Wordpress REST API를 응용해서 커스텀 API를 구현해보았습니다. Wordpress REST API 기본 구조와 설정 방법은 다른 포스팅을 참고해주세요. 궁금한 점 있으시면 언제든 댓글을 통해 알려주세요 :)