In questo tutorial, utilizzeremo l'API widget di WordPress e l'API Flickr per creare un widget Flickr di base. Il widget sarà un widget a uso multiplo; chiede all'utente un nome utente e il numero di immagini da visualizzare e utilizza tali informazioni per visualizzare le foto di Flickr. Ci sono molti plug-in pre-compilati che funzionano con Flickr, ma non c'è niente di meglio da fare se stai cercando di fare un altro passo nella tua educazione WordPress!
introduzione
Flickr è uno dei siti di condivisione di foto più popolari al mondo - ospita oltre 5 miliardi di immagini - e creando un widget di Flickr, imparerai sia come utilizzare l'API di Flickr, sia come creare widget di WordPress che possono essere facilmente adattato al tuo tema o sito web. Prima di iniziare a scrivere qualsiasi codice, è necessario prepararsi per il progetto. Per creare un widget all'interno di un tema, è necessario innanzitutto un file in cui inserire il codice del widget. Utilizzerò il valore predefinito TwentyEleven tema che viene fornito con WordPress, è ovviamente possibile utilizzare qualsiasi tema di vostra scelta. Esegui questi passaggi:
Crea una nuova cartella nel tema chiamato widgets.
Fare un vuoto php file chiamato widget.php e salvarlo nella cartella.
Scarica l'eccellente libreria phpFlickr da qui e incolla i file in widgets / phpFlickr
Iscriviti per una chiave API da Flickr. Dovresti avere bisogno di una chiave non commerciale, a meno che tu non stia creando un prodotto commerciale.
Passaggio 1 Ottenere il codice del widget pronto
Da WordPress 2.8, c'è stata una comoda API widget che puoi usare per creare i tuoi widget. Copia e incolla questo codice scheletro nel tuo widgets.php file:
'flickr_widget', 'description' => 'Mostra le tue foto Flickr preferite!' ); $ this-> WP_Widget ('flickr_widget', 'Flickr Posts', $ widget_ops); function function ($ instance) funzione widget ($ nuova istanza, $ vecchia_istanza) funzione widget ($ args, $ istanza) add_action ('widgets_init', 'rm_load_widgets'); function rm_load_widgets () register_widget ('RM_Flickr'); ?>
Ognuna di queste funzioni ha uno scopo specifico:
RM_FLickr è sia il nome della classe, sia il nome della prima funzione (il costruttore). Il costruttore contiene il codice per impostare il widget - si chiama Flickr Posts.
modulo() genera il modulo che vedi nella pagina di gestione dei widget in WordPress.
aggiornare() aggiorna le opzioni che inserisci nel modulo quando viene salvata la configurazione del widget.
Widget () visualizza l'output effettivo del widget nel sito principale.
L'ultima parte del codice si aggancia all'inizializzazione del widget di WordPress e ordina di registrare il widget
Rimane solo una cosa: il tuo file widget esiste, ma al momento non fa nulla. Perché sia usato da WordPress, devi includere il file dal tuo functions.php file. Quindi apriti functions.php e incolla in questa riga: (L'ho messo in TwentyEleven's twentyeleven_setup () metodo)
Se accendi WordPress, dovresti vedere il widget apparire nella pagina di gestione Widget:
Naturalmente, poiché non sono stati aggiunti altri codici, il widget non ha opzioni o output. Ora, ci assicureremo che il widget abbia input di modulo
Passaggio 2 Creazione del modulo
Prima di creare il modulo per un widget, è necessario capire quale tipo di input è necessario. Per questo particolare widget, sono necessari tre input da utilizzare dall'utente: un titolo per il widget, il nome utente FLickr e il numero di foto da visualizzare. Se dai un'occhiata al codice dello scheletro qui sopra, noterai che c'è un parametro $ esempio nel modulo() funzione. Questo contiene fondamentalmente i valori correnti per tutti gli input nel modulo (ad esempio, quando si salva il modulo con determinati valori). Quindi abbiamo bisogno di estrarre i valori attuali del widget e compilare con loro i campi di input del widget. Incolla questo pezzo di codice nella funzione:
Innanzitutto, usiamo il wp_parse_args () funzione per assicurarsi che ci siano determinati valori predefiniti nel widget, e quindi estraiamo i valori in variabili come $ titolo. Ora che abbiamo i valori, abbiamo bisogno di costruire l'html della funzione:
?>
Questo sembra un grosso pezzo di codice, ma è davvero piuttosto semplice. Sta semplicemente creando un normale modulo HTML, con alcune modifiche. Per prima cosa, invece di usare il tuo id e Il nome di, devi usare get_field_id (). Questo perché se ci sono più istanze di un widget e un solo ID, ci saranno ovviamente degli errori. WordPress si prende cura di te per te se usi questa funzione. L'altra cosa è che il valore dei campi di input viene generato utilizzando PHP. Salva il file e dai un'occhiata a WordPress:
Noterai che se provi a modificare i valori e fai clic su Salva, questi non vengono salvati. Questo perché non abbiamo ancora scritto il aggiornare() funzione. Facciamolo dopo
Passaggio 3 Assicurare gli aggiornamenti del modulo
Per assicurarti che il modulo venga aggiornato, devi configurare il tuo aggiornare() funzione. Questo è in realtà piuttosto semplice. Per impostazione predefinita, WordPress ti invia due parametri: la vecchia istanza e la nuova istanza. Fondamentalmente non abbiamo davvero bisogno della vecchia istanza perché la vecchia istanza è usata solo se ci sono valori che potresti non voler cambiare. Incolla questo codice nel file aggiornare() funzione:
Abbastanza semplice: copia la nuova istanza in una variabile $ esempio, apporta le modifiche che potresti desiderare (come rimuovere i tag html) e ritorno la variabile per garantire l'aggiornamento delle modifiche. Ora se vai su WordPress, le modifiche verranno salvate!
Passaggio 4 Abilitazione dell'HTML del widget
Questo è il passaggio finale e assicura che il widget visualizzi HTML sul front-end. Ora che abbiamo impostato gli input dell'utente, possiamo semplicemente utilizzare gli input per interagire con l'API di Flickr e visualizzare le immagini. Il primo passo nel Widget () la funzione è di recuperare i valori degli input dell'utente. Incolla in questo codice:
estrarre ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); if (vuoto ($ title)) $ title = false; $ flickr_id = $ istanza ['flickr_id']; $ numero = assente ($ istanza ['numero']);
Auto esplicativo: gli input sono recuperati e memorizzati in variabili. Quindi, è necessario richiedere la libreria phpFlickr e configurala usando la tua chiave API:
require_once (TEMPLATEPATH. "/widgets/phpFlickr/phpFlickr.php"); $ f = new phpFlickr ("[API KEY]");
Una volta impostato, incolla questo codice:
if (! empty ($ flickr_id)) echo $ before_widget; if ($ title) echo $ before_title; echo $ title; echo $ after_title; $ person = $ f-> people_findByUsername ($ flickr_id); $ photos_url = $ f-> urls_getUserPhotos ($ person ['id']); $ foto = $ f-> people_getPublicPhotos ($ person ['id'], NULL, NULL, $ number); foreach ((array) $ foto ['foto'] ['foto'] come $ foto) echo " \ n "; echo" "; echo""; eco ""; eco " \ n "; echo $ after_widget;
Passiamo attraverso questo passo dopo passo. Per prima cosa, dobbiamo vedere se il nome utente di Flickr è stato specificato. In caso contrario, non è possibile visualizzare le immagini. Le variabili $ before_widget, $ before_title e $ after_title, che vengono automaticamente dati da WordPress, devono quindi essere visualizzati. Quindi, usiamo la libreria phpFlickr per ottenere le foto dell'utente specificato. Il numero di foto è definito dalla variabile numero di $. Infine, effettuiamo il ciclo delle immagini utilizzando un ciclo foreach e costruiamo l'HTML per visualizzare la foto, quindi visualizziamo il contenuto del post-widget. Ora, a seconda del tema su cui stai lavorando e delle immagini che desideri, puoi modificare l'HTML. L'unica parte che deve rimanere costante è il link all'immagine, che può essere in diverse dimensioni come Square, small, medium, large ecc. Ora che è stato fatto, puoi provare a impostare il widget e vedere l'output. Ho usato un utente Flickr famoso, Dimentica di me la fotografia di Knott come nome utente. Guarda:
Conclusione
Per chi ama la fotografia, un widget di Flickr è una grande aggiunta a un sito Web WordPress. Con questo tutorial, è facile creare un widget Flickr personalizzabile. È possibile aggiungere o rimuovere opzioni, modificare le dimensioni dell'immagine, modificare l'aspetto del widget e molto altro ancora. Ora sai come creare facilmente i widget di WordPress!
Un widget Flickr personalizzato potrebbe assomigliare a questo!
Share
Accentsconagua
