Использование API Envato с WordPress

10 января 2018

Сегодня мы обсудим, как использовать API-интерфейс Envato в WordPress и создать короткий код WordPress, который продвигает наши объекты Marketplace Envato на нашем сайте WordPress. Мы объединим мощный API Envato, гибкость WordPress и немного творчества, чтобы создать удивительный плагин для нашего сайта.


Настроим нашу цель

В этом уроке мы сосредоточимся на следующем:

Некоторые базовые знания об Envato APInHow для использования данных результата API в WordPressnBuild для WordPress Shortcode, который продвигает элементы Envato Marketplace на нашем сайте WordPress.

Итак, давайте займемся первым!


Шаг 1: Понимание API Envato

Envato предоставляет API, который позволяет разработчикам получать некоторую информацию о товарах Envato Marketplace, информации о пользователях, популярных проектах и ​​т. д. Все возможные запросы перечислены в официальной документации. В этой статье мы обсуждаем только открытый API.

API-интерфейс Envato Public API имеет следующую структуру.

http: marketplace.envato.com api edge set.jso

Набор слов должен быть заменен опцией, указанной в столбце набора документации API. Поэтому, если нам нужна вся информация о позиции на рынке, мы должны заменить набор на item: the_item_id. Конечным URL-адресом запроса будет:

http: marketplace.envato.com api edge item: 1263846.jso

Вы можете попробовать вставить URL-адрес выше в свой веб-браузер и посмотреть возвращаемые данные.

Мы также можем объединить несколько опций одного запроса для получения большего количества данных. Например, нам нужны данные элемента и его авторская информация. Таким образом, предыдущий URL-адрес станет:

http: marketplace.envato.com api edge item: 1263846+ пользователь: evoG.jso

API Envato возвращает JSON, поэтому в следующем параграфе мы покажем, как управлять им в WordPress.


Шаг 2: Как использовать результаты API в WordPress

В этом уроке мы не собираемся обсуждать, как создать плагин WordPress, но мы сосредоточимся на некоторых методах использования API в WordPress:

Отправить запрос API. Управление данными результата (строка JSON).

. Функция ниже извлекает данные с сервера Envato и возвращает массив PHP, содержащий всю необходимую информацию.

/**
 * @param String $item_id - The ID of an Envato Marketplace item
 * @returns Array - The item informations
 */
function WPTP_get_item_info( $item_id ) {
    /* Set the API URL, %s will be replaced with the item ID  */
    $api_url = "http://marketplace.envato.com/api/edge/item:%s.jso";
    /* Fetch data using the WordPress function wp_remote_get() */
    $response = wp_remote_get( sprintf( $api_url, $item_id ) );
    /* Check for errors, if there are some errors return false */
    if ( is_wp_error( $response ) or ( wp_remote_retrieve_response_code( $response ) != 200 ) ) {
        return false;
    }
    /* Transform the JSON string into a PHP array */
    $item_data = json_decode( wp_remote_retrieve_body( $response ), true );
    /* Check for incorrect data */
    if ( !is_array( $item_data ) ) {
        return false;
    }
    /* Return item info array */
    return $item_data;
}

Мы можем улучшить функцию выше. Чтобы предотвратить стресс на сервере API Envato, мы можем кэшировать данные элемента и запрашивать информацию снова после таймаута. WordPress предлагает нам некоторые функции для реализации этой функции. Давайте добавим его.

/**
 * @param String $item_id - The ID of an Envato Marketplace item
 * @returns Array - The item informations
 */
function WPTP_get_item_info( $item_id ) {
    /* Data cache timeout in seconds - It send a new request each hour instead of each page refresh */
    $CACHE_EXPIRATION = 3600;
    /* Set the transient ID for caching */
    $transient_id = 'WPTP_envato_item_data';
    /* Get the cached data */
    $cached_item = get_transient( $transient_id );
    /* Check if the function has to send a new API request */
    if ( !$cached_item || ( $cached_item->item_id != $item_id ) ) {
        /* Set the API URL, %s will be replaced with the item ID  */
        $api_url = "http://marketplace.envato.com/api/edge/item:%s.jso";
        /* Fetch data using the WordPress function wp_remote_get() */
        $response = wp_remote_get( sprintf( $api_url, $item_id ) );
        /* Check for errors, if there are some errors return false */
        if ( is_wp_error( $response ) or ( wp_remote_retrieve_response_code( $response ) != 200 ) ) {
            return false;
        }
        /* Transform the JSON string into a PHP array */
        $item_data = json_decode( wp_remote_retrieve_body( $response ), true );
        /* Check for incorrect data */
        if ( !is_array( $item_data ) ) {
            return false;
        }
        /* Prepare data for caching */
        $data_to_cache = new stdClass();
        $data_to_cache->item_id = $item_id;
        $data_to_cache->item_info = $item_data;
        /* Set the transient - cache item data*/
        set_transient( $transient_id, $data_to_cache, $CACHE_EXPIRATION );
        /* Return item info array */
        return $item_data;
    }
    /* If the item is already cached return the cached info */
    return $cached_item->item_info;
}

Теперь основная функция нашего плагина WordPress готова. Мы использовали некоторые функции WordPress, которые помогают нам сэкономить время. Вся информация о них объясняется в официальном кодексе WordPress.

wp_remote_get () - извлекает URL-адрес с помощью HTTP GET methodwp_remote_retrieve_response_code () - проверяет, нет ли ошибок в сыром responseewp_remote_retrieve_body () - получает тело уже полученного HTTP-запроса.set_transient () - Caches dataget_transient () - получает cached data


Шаг 3: Сборка короткого кода WordPress

В следующих шагах мы собираемся закодировать полезный плагин WordPress, который позволяет нам отображать некоторую информацию об элементе Envato Marketplace. Весь код ниже хорошо прокомментирован, поэтому вы можете легко понять каждую строку. Подробнее о написании плагина WordPress и API Shortcode WordPress читайте в онлайн-документации в WordPress Codex.

Начнем

Давайте напишем информацию заголовка для нашего плагина

<?php
/*
Plugin Name: WordPress Tutsplus Envato Item Info
Plugin URI: http://wp.tutsplus.com
Description: Display some informations about Envato Marketplace items
Version: 1.0
Author: Michele Ivani
Author URI: http://evographics.net
*/

Добавьте короткий код WordPress

Теперь мы пишем код для добавления короткого кода и его функциональных возможностей.

<?php
/**
 * Add the shortcode using the WordPress function add_shortcode()
 * We used as shortcode tag "wptp-envato-item"
 */
add_shortcode( 'wptp-envato-item', 'WPTP_add_shortcode' );
/**
 * Hook to run when the shortcode is found
 * @param Array $atts - shortcode attributes
 * @param String $content - shortcode content (not necessary for our plugin)
 * @return String - plugin HTML code
 */
function WPTP_add_shortcode( $atts, $content = null ) {
    /* Default shortcode attributes  */
    $atts = shortcode_atts( array(
        'item_id' => ''
    ), $atts );
    extract( $atts );
    /* Validation */
    if ( empty( $item_id ) ) {
        return "<p>Please insert an Envato Marketplace Item ID.</p>";
    }
    /* Get data from the API*/
    $item = WPTP_get_item_info( $item_id );
    /* Validation - Check if something went wrong */
    if ( $item === false ) {
        return "<p>Oops… Something went wrong. Please check out the item ID and try again.</p>";
    }
    /* Format the $item array */
    $item = $item['item'];
    extract( $item );
    /* Prepare the Plugin HTML */
    $html = '';
    $html .= '
    <div class="wptp_envato_item">
        <div class="wptp_title">'.$item.'</div>
        <div class="wptp_wrap">
            <div class="wptp_top">
                <div class="wptp_rating">
                    <span class="wptp_desc">rating</span>'.
                    WPTP_get_stars($rating)
                .'</div> <!-- end wptp_rating -->
            </div> <!-- end wptp_top -->
            <div class="wptp_middle">
                <div class="wptp_sales">
                    <span class="wptp_img_sales"></span>
                    <div class="wptp_text">
                        <span class="wptp_num">'.$sales.'</span>
                        <span class="wptp_desc">sales</span>
                    </div> <!-- end  wptp_text -->
                </div> <!-- end wptp_sales -->
                <div class="wptp_thumb">
                    <img src="'.$thumbnail.'" alt="'.$item.'" width="80" height="80"/>
                </div> <!-- end wptp_thumb -->
                <div class="wptp_price">
                    <span class="wptp_img_price"></span>
                    <div class="wptp_text">
                        <span class="wptp_num"><span>$</span>'.round($cost).'</span>
                        <span class="wptp_desc">only</span>
                    </div> <!-- end wptp_text -->
                </div> <!-- end wptp_price -->
            </div> <!-- end wptp_middle -->
            <div class="wptp_bottom">
                <a href="'.$url.'" target="_blank"></a>
            </div> <!-- end wptp_bottom -->
        </div> <!-- end wptp_wrap -->
    </div> <!-- end wptp_envato_item -->'; 
    return $html;
}

Функция оценки звезд

Функция WPTP_add_shortcode () выше имеет процедуру WPTP_get_stars (), которая скрывает номер рейтинга до звезд HTML. Давайте реализуем его.

<?php
/**
 * Convert the rating number to HTML stars
 * @param String $rating - Envato Item rating
 */
function WPTP_get_stars( $rating ) {
    /* If item rating is null the function prints a message */
    if ( ( int ) $rating == 0 ) {
        return '<div class="wptp_not_rating">Not rate yet</div>';
    }
    /* Else if rating is >= 1 the function converts it to HTML stars and returns them as a string */
    $return = '<ul class="wptp_stars">';
    $i=1;
    while ( ( --$rating ) >= 0 ) {
        $return .= '<li class="wptp_full_star"></li>';
        $i++;
    }
    if ( $rating == -0.5 ) {
        $return .= '<li class="wptp_full_star"></li>';
        $i++;
    }
    while ( $i <= 5 ) {
        $return .= '<li class="wptp_empty_star"></li>';
        $i++;
    }
    $return .= '</ul>';
    return $return;
}

Включить CSS

Когда функции shortcode завершены, мы должны включить файл style.css, который стилирует наш плагин.

<?php
/**
 * Add the CSS style file
 */
add_action( 'wp_print_styles', 'WPTP_add_css' );
/**
 * Attach the plugin CSS file to the WordPress site
 */
function WPTP_add_css() {
    /* Register style */
    wp_register_style( 'WPTP_css', plugins_url( 'style.css', __FILE__ ) );
    /* Enqueue style */
    wp_enqueue_style( 'WPTP_css' );
}

Step 4: Создать правила CSS

Файл style.css находится в том же каталоге, что и основной файл плагина, и содержит все правила CSS.

/* WordPress Tutsplus Envato Item Info - CSS Rules*/
/* Main layout and typography */
.wptp_envato_item {
    font-family: "Helvetiva Neue", Arial, sans-serif;
    margin: 20px 0;
}
.wptp_wrap { width: 210px; }
.wptp_text { display: block; }
.wptp_num {
    display: block;
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 24px;
    color: #66696d;
}
.wptp_num span {
    font-size: 14px;
    vertical-align: super;
}
.wptp_desc {
    display: block;
    font-size: 12px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 12px;
    color: #96999d;
}
.wptp_not_rating {
    color: #66696d;
    font-size: 13px;
    font-weight: bold;
}
.wptp_title { font-size: 14px; font-weight: 300; color: #66696d; margin-bottom: 10px; }
/* Stars rating section */
.wptp_rating {
    width: 82px;
    text-align: center;
    margin: 0 auto 10px auto;
}
.wptp_stars {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wptp_stars li {
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
}
.wptp_stars li.wptp_full_star { background: url(icons-sprite.png) 0px -64px ; }
.wptp_stars li.wptp_empty_star { background: url(icons-sprite.png) -14px -64px ; }
/* Sales and Price sections */
.wptp_sales, .wptp_thumb, .wptp_price {
    display: inline-block;
    vertical-align: middle;
}
.wptp_sales {
    text-align: right;
    margin-right: 10px;
}
.wptp_sales .wptp_text {
    width: 52px;
}
.wptp_img_sales {
    background: url(icons-sprite.png) 0px 0px;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 0 12px 20px;
}
.wptp_img_price {
    background: url(icons-sprite.png) 0px -32px ;
    width: 32px;
    height: 32px;
    display: block;
    margin-bottom: 7px;
}
.wptp_price {
    text-align: left;
    margin-left: 10px;
}
.wptp_price .wptp_text { width: 34px; }
/* Purchase button section */
.wptp_bottom a {
    display: block;
    width: 78px;
    height: 33px;
    background: url(icons-sprite.png) -32px 0px;
    margin: 10px auto 0 auto;
}

Заключение

Вот и все, теперь мы можем загрузить плагин на наш сайт Worpdress и использовать мощь коротких кодов WordPress, чтобы отобразить некоторую информацию о товарах Envato Marketplace. Подробнее о написании плагина WordPress и API Shortcode WordPress читайте в онлайн-документации в WordPress Codex.

Я Michele Ivani, и я надеюсь, что этот учебник был полезен для разработки WordPress. Спасибо за прочтение.