Hoy vamos a hablar sobre cómo utilizar la API de Envato en WordPress y crear un shortcode de WordPress que promueva nuestros artículos de Envato Marketplace dentro de nuestro sitio de WordPress. Combinaremos la poderosa API de Envato, la flexibilidad de WordPress y un poco de creatividad, para crear un complemento increíble para nuestro sitio.
En este tutorial nos centraremos en:
Así que entremos en la primera!
Envato proporciona una API que permite a los desarrolladores obtener información sobre los artículos de Envato Marketplace, la información de los usuarios, los proyectos populares, etc. Todas las consultas posibles se enumeran en la documentación oficial. En este artículo discutimos la API pública solamente.
La API pública de Envato tiene la siguiente estructura.
http://marketplace.envato.com/api/edge/set.json
La palabra conjunto debe reemplazarse con una opción que figura en la columna del conjunto de la documentación de la API. Entonces, si queremos toda la información sobre un artículo del mercado, tenemos que reemplazar conjunto con artículo: the_item_id. La URL de solicitud final será:
http://marketplace.envato.com/api/edge/item:1263846.json
Puede intentar insertar la URL anterior en su navegador web y ver los datos devueltos.
También podemos concatenar más de una. configurar opción En una sola solicitud para obtener más datos. Por ejemplo, queremos los datos del artículo y su información de autor. Así que la URL anterior se convertirá en:
http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json
La API Envato devuelve JSON, por lo que en el siguiente párrafo vamos a mostrar cómo administrarlo en WordPress.
En este tutorial no vamos a discutir cómo crear un complemento de WordPress, pero nos centraremos en algunas técnicas para usar la API en WordPress:
La siguiente función recupera los datos del servidor Envato y devuelve una matriz de PHP que contiene toda la información que deseamos..
/ ** * @param String $ item_id - El ID de un artículo de Envato Marketplace * @returns Array - Las informaciones del elemento * / function WPTP_get_item_info ($ item_id) / * Establecer la URL de la API,% s se reemplazará con el ID del elemento * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Obtener datos usando la función de WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Compruebe si hay errores, si hay algunos errores, devuelva falso * / if (is_wp_error ($ respuesta) o (wp_remote_retrieve_response_code ($ respuesta)! = 200)) return false; / * Transformar la cadena JSON en una matriz PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Compruebe si hay datos incorrectos * / if (! Is_array ($ item_data)) return false; / * Devuelve la matriz de información del elemento * / return $ item_data;
Podemos mejorar la función de arriba. Para evitar el estrés en el servidor de la API Envato, podemos almacenar en caché los datos del elemento y solicitar la información nuevamente después de un tiempo de espera. WordPress nos ofrece algunas funciones para implementar esta característica. Vamos a añadirlo.
/ ** * @param String $ item_id - El ID de un artículo de Envato Marketplace * @returns Array - Las informaciones del elemento * / function WPTP_get_item_info ($ item_id) / * Tiempo de espera de caché de datos en segundos - Envía una nueva solicitud cada hora de cada actualización de página * / $ CACHE_EXPIRATION = 3600; / * Establezca la ID de transitorio para el almacenamiento en caché * / $ transient_id = 'WPTP_envato_item_data'; / * Obtenga los datos en caché * / $ cached_item = get_transient ($ transient_id); / * Compruebe si la función tiene que enviar una nueva solicitud de API * / if (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Establecer la URL de la API,% s se reemplazará con el elemento ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Obtener datos usando la función de WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Compruebe si hay errores, si hay algunos errores, devuelva falso * / if (is_wp_error ($ respuesta) o (wp_remote_retrieve_response_code ($ respuesta)! = 200)) return false; / * Transformar la cadena JSON en una matriz PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Compruebe si hay datos incorrectos * / if (! Is_array ($ item_data)) return false; / * Preparar datos para el almacenamiento en caché * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Establezca el dato transitorio - caché datos * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Devuelve la matriz de información del elemento * / return $ item_data; / * Si el elemento ya está en caché, devuelva la información en caché * / return $ cached_item-> item_info;
Ahora la función principal de nuestro plugin de WordPress está lista. Hemos utilizado algunas funciones de WordPress que nos ayudan a ahorrar tiempo. Toda la información sobre ellos se explica en el WordPress Codex oficial..
En los siguientes pasos, vamos a codificar un útil plugin de WordPress que nos permite mostrar algunas informaciones sobre un elemento de Envato Marketplace. Todo el código a continuación está bien comentado para que pueda entender fácilmente cada línea. Para obtener más detalles sobre cómo escribir un complemento de WordPress y la API de código corto de WordPress, consulte la documentación en línea en el Códice de WordPress.
Vamos a escribir la información del encabezado de nuestro plugin.
Añadir el shortcode de WordPress
Ahora escribimos el código para agregar el shortcode y sus funcionalidades..
"), $ atts); extract ($ atts); / * Validación * / if (vacío ($ item_id)) return"Por favor inserte un ID de artículo de Envato Marketplace.
"; / * Obtenga datos de la API * / $ item = WPTP_get_item_info ($ item_id); / * Validación: verifique si algo salió mal * / if ($ item === false) return"Huy! Algo salió mal. Por favor revisa la identificación del artículo y vuelve a intentarlo.
"; / * Formatee el $ item array * / $ item = $ item ['item']; extract ($ item); / * Prepare el complemento HTML * / $ html ="; $ html. = ''; devuelve $ html;'. $ item'.clasificación'. WPTP_get_stars ($ rating). ''. $ ventas'. ventasPS'.round ($ costo).' solamenteFunción de clasificación de estrellas
los WPTP_add_shortcode () función anterior tiene la WPTP_get_stars () Procedimiento que cubre el número de calificación de las estrellas HTML. Vamos a implementarlo.
Aún no puntuar
Cuando se completan las funciones de shortcode, tenemos que incluir el style.css archivo que diseña nuestro plugin.
Paso 4: Escribir reglas CSS
los style.css el archivo está dentro del mismo directorio que el archivo principal del complemento y contiene todas las reglas CSS.
/ * WordPress Tutsplus Envato Item Info - Reglas CSS * / / * Diseño y tipografía principal * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; margen: 20px 0; .wptp_wrap ancho: 210px; .wptp_text display: block; .wptp_num display: block; tamaño de fuente: 24px; peso de la fuente: 300; margen: 0; relleno: 0; altura de línea: 24px; color: # 66696d; .wptp_num span font-size: 14px; alineación vertical: super; .wptp_desc display: block; tamaño de fuente: 12px; peso de la fuente: 300; margen: 0; relleno: 0; línea de altura: 12px; color: # 96999d; .wptp_not_rating color: # 66696d; tamaño de fuente: 13px; font-weight: negrita; .wptp_title font-size: 14px; peso de la fuente: 300; color: # 66696d; margen inferior: 10px; / * Sección de calificación de estrellas * / .wptp_rating width: 82px; text-align: center; margen: 0 auto 10px auto; .wptp_stars margin: 0; relleno: 0; estilo de lista: ninguno; .wptp_stars li margin-left: 2px; pantalla: bloque en línea; alineación vertical: medio; ancho: 13px; altura: 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; / * Secciones de ventas y precios * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; alineación vertical: medio; .wptp_sales text-align: right; margen derecho: 10px; .wptp_sales .wptp_text width: 52px; .wptp_img_sales background: url (icons-sprite.png) 0px 0px; ancho: 32px; altura: 32px; bloqueo de pantalla; margen: 0 0 12px 20px; .wptp_img_price background: url (icons-sprite.png) 0px -32px; ancho: 32px; altura: 32px; bloqueo de pantalla; margen inferior: 7px; .wptp_price text-align: left; margen izquierdo: 10px; .wptp_price .wptp_text ancho: 34px; / * Sección del botón de compra * / .wptp_bottom a display: block; ancho: 78px; altura: 33px; fondo: url (icons-sprite.png) -32px 0px; margen: 10px auto 0 auto;
Conclusión
Eso es todo, ahora podemos cargar el complemento en nuestro sitio Worpdress y usar el poder de los códigos cortos de WordPress para mostrar información sobre los artículos de Envato Marketplace. Para obtener más detalles sobre cómo escribir un complemento de WordPress y la API de código corto de WordPress, consulte la documentación en línea en el Códice de WordPress.
Soy Michele Ivani y espero que este tutorial haya sido útil para el desarrollo de WordPress. Gracias por leer.