Oggi parleremo di come utilizzare l'API Envato in WordPress e creare uno shortcode WordPress che promuova i nostri articoli Envato Marketplace all'interno del nostro sito WordPress. Combineremo la potente API Envato, la flessibilità di WordPress e un po 'di creatività, per creare un plug-in fantastico per il nostro sito.
In questo tutorial ci concentreremo su:
Quindi entriamo nel primo!
Envato fornisce un'API che consente agli sviluppatori di ottenere alcune informazioni sugli articoli di Envato Marketplace, informazioni sugli utenti, progetti popolari e così via. Tutte le domande possibili sono elencate nella documentazione ufficiale. In questo articolo discutiamo solo dell'API pubblica.
L'API pubblica Envato ha la seguente struttura.
http://marketplace.envato.com/api/edge/set.json
La parola impostato deve essere sostituito con un'opzione elencata nella colonna set della documentazione API. Quindi se vogliamo tutte le informazioni su un articolo di mercato dobbiamo sostituirlo impostato con oggetto: the_item_id. L'URL della richiesta finale sarà:
http://marketplace.envato.com/api/edge/item:1263846.json
Puoi provare a inserire l'URL sopra nel tuo browser web e vedere i dati restituiti.
Possiamo anche concatenare più di uno imposta l'opzione in una singola richiesta per ottenere più dati. Ad esempio vogliamo i dati dell'articolo e le informazioni dell'autore. Quindi l'URL precedente diventerà:
http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json
L'API Envato restituisce JSON, quindi nel prossimo paragrafo mostreremo come gestirlo in WordPress.
In questo tutorial non parleremo di come creare un plugin per WordPress, ma ci concentreremo su alcune tecniche per utilizzare l'API in WordPress:
La funzione seguente recupera i dati dal server Envato e restituisce un array PHP che contiene tutte le informazioni che vogliamo.
/ ** * @param String $ item_id - L'ID di un oggetto Envato Marketplace * @returns Array - Le informazioni sull'elemento * / function WPTP_get_item_info ($ item_id) / * Imposta l'URL dell'API,% s sarà sostituito con l'ID oggetto * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Recupera i dati utilizzando la funzione WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Controlla gli errori, se ci sono errori restituiscono false * / if (is_wp_error ($ response) o (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Trasforma la stringa JSON in un array PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Controlla dati errati * / if (! Is_array ($ item_data)) return false; / * Restituisce array di informazioni sull'elemento * / return $ item_data;
Possiamo migliorare la funzione sopra. Per evitare stress sul server API Envato, è possibile memorizzare nella cache i dati degli articoli e richiedere nuovamente le informazioni dopo un timeout. WordPress ci offre alcune funzioni per implementare questa funzionalità. Aggiungiamolo.
/ ** * @param String $ item_id - L'ID di un oggetto Envato Marketplace * @returns Array - Le informazioni sull'elemento * / function WPTP_get_item_info ($ item_id) / * Timeout cache dati in secondi - Invia una nuova richiesta ogni ora invece di ogni aggiornamento della pagina * / $ CACHE_EXPIRATION = 3600; / * Imposta l'ID transitorio per la memorizzazione nella cache * / $ transient_id = 'WPTP_envato_item_data'; / * Ottieni i dati nella cache * / $ cached_item = get_transient ($ transient_id); / * Verifica se la funzione deve inviare una nuova richiesta API * / if (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Imposta l'URL dell'API,% s verrà sostituito con l'elemento ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Recupera i dati utilizzando la funzione WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Controlla gli errori, se ci sono errori restituiscono false * / if (is_wp_error ($ response) o (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Trasforma la stringa JSON in un array PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Controlla dati errati * / if (! Is_array ($ item_data)) return false; / * Preparazione dei dati per la memorizzazione nella cache * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Imposta il transitorio - dati dell'elemento della cache * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Restituisce array di informazioni sull'elemento * / return $ item_data; / * Se l'elemento è già memorizzato nella cache, restituisce le informazioni memorizzate nella cache * / return $ cache_item-> item_info;
Ora la funzione principale del nostro plugin WordPress è pronta. Abbiamo usato alcune funzioni di WordPress che ci aiutano a risparmiare tempo. Tutte le informazioni su di loro sono spiegate nel codice WordPress ufficiale.
Nei prossimi passi andremo a codificare un utile plugin per WordPress che ci permette di mostrare alcune informazioni su un oggetto di Envato Marketplace. Tutto il codice qui sotto è ben commentato in modo da poter facilmente comprendere ogni riga. Per maggiori dettagli su come scrivere un plugin WordPress e l'API di WordPress Shortcode, consulta la documentazione online nel codice WordPress.
Scriviamo le informazioni dell'intestazione per il nostro plugin
Aggiungi lo shortcode di WordPress
Ora scriviamo il codice per aggiungere lo shortcode e le sue funzionalità.
"), $ atts); extract ($ atts); / * Validation * / if (vuoto ($ item_id)) return"Si prega di inserire un ID dell'oggetto del Marketplace Envato.
"; / * Ottieni dati dall'API * / $ item = WPTP_get_item_info ($ item_id); / * Validation - Verifica se qualcosa è andato storto * / if ($ item === false) return"Oops! Qualcosa è andato storto. Si prega di controllare l'ID dell'articolo e riprovare.
"; / * Formatta l'array $ item * / $ item = $ item ['item']; estrai ($ item); / * Prepara il plugin HTML * / $ html ="; $ html. = ''; return $ html;'$ Item.'valutazione'. WPTP_get_stars ($ rating). ''$ Vendite.' i saldi$'.Round ($ costo).' soloFunzione di classificazione delle stelle
Il WPTP_add_shortcode () la funzione sopra ha il WPTP_get_stars () procedura che copre il numero di valutazione in stelle HTML. Implementiamolo.
Non votare ancora
Quando le funzioni shortcode sono completate, dobbiamo includere il style.css file che disegna il nostro plugin.
Passaggio 4: scrivere regole CSS
Il style.css il file si trova nella stessa directory del file del plugin principale e contiene tutte le regole CSS.
/ * WordPress Tutsplus Envato Informazioni sull'articolo - Regole CSS * / / * Layout e tipografia principali * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; margine: 20px 0; .wptp_wrap width: 210px; .wptp_text display: block; .wptp_num display: block; font-size: 24px; font-weight: 300; margine: 0; padding: 0; altezza della linea: 24px; colore: # 66696d; .wptp_num span font-size: 14px; vertical-align: super; .wptp_desc display: block; font-size: 12px; font-weight: 300; margine: 0; padding: 0; altezza della linea: 12px; colore: # 96999d; .wptp_not_rating color: # 66696d; dimensione del font: 13px; font-weight: bold; .wptp_title font-size: 14px; font-weight: 300; colore: # 66696d; margin-bottom: 10px; / * Stelle rating section / / .wptp_rating width: 82px; allineamento del testo: centro; margine: 0 auto 10px auto; .wptp_stars margin: 0; padding: 0; stile elenco: nessuno; .wptp_stars li margin-left: 2px; display: blocco in linea; allineamento verticale: medio; larghezza: 13px; altezza: 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; / * Sezioni di vendita e prezzi * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; allineamento verticale: medio; .wptp_sales text-align: right; margin-right: 10px; .wptp_sales .wptp_text width: 52px; .wptp_img_sales background: url (icons-sprite.png) 0px 0px; larghezza: 32 px; altezza: 32px; blocco di visualizzazione; margine: 0 0 12px 20px; .wptp_img_price background: url (icons-sprite.png) 0px -32px; larghezza: 32 px; altezza: 32px; blocco di visualizzazione; margin-bottom: 7px; .wptp_price text-align: left; margin-left: 10px; .wptp_price .wptp_text width: 34px; / * Sezione pulsante di acquisto * / .wptp_bottom a display: block; larghezza: 78 px; altezza: 33 px; background: url (icons-sprite.png) -32px 0px; margine: 10px auto 0 auto;
Conclusione
Ecco fatto, ora possiamo caricare il plug-in sul nostro sito Worpdress e utilizzare la potenza degli shortcode di WordPress per visualizzare alcune informazioni sugli oggetti di Envato Marketplace. Per maggiori dettagli su come scrivere un plugin WordPress e l'API di WordPress Shortcode, consulta la documentazione online sul codice WordPress.
Sono Michele Ivani e spero che questo tutorial sia stato utile per il tuo sviluppo in WordPress. Grazie mille per la lettura.