Salvataggio di immagini con il WordPress Media Uploader

In questa serie, diamo un'occhiata a come implementare il WordPress Media Uploader in un vero plugin. L'idea alla base di questa serie e del suo codice associato è di dare una chiara comprensione di come funziona, di come possiamo usarla in futuro e di come possiamo incorporarla nel nostro lavoro.

Fino a questo punto, abbiamo coperto:

1. Iniziare con il WordPress Media Uploader
2. Aggiunta e rimozione di immagini con WordPress Media Uploader

E in tutti questi articoli, abbiamo attraversato il processo di creazione di un plug-in che utilizza il WordPress Media Uploader per introdurre un'immagine in primo piano nel footer dei nostri post del blog (e pagine).

Ma c'è un problema: l'immagine non viene salvata e non viene visualizzata nel contenuto del post del blog associato (o pagina).

In questo articolo, riprendiamo da dove eravamo rimasti e finiamo di implementare il resto di questo plugin. Nota che presumo che tu abbia letto i due post precedenti e capisca il codice sorgente che abbiamo trattato finora.

Detto questo, riprendiamo.

Salvataggio dell'immagine in primo piano

La chiave per assicurarsi che l'immagine possa essere visualizzata sul front-end di WordPress è salvare le informazioni dell'immagine fornite di WordPress.

Nell'articolo precedente, abbiamo usato alcune di queste informazioni per visualizzare l'immagine nella meta-scatola che abbiamo creato, ma nessuna di queste informazioni è stata effettivamente salvata. In quanto tale, l'immagine non può essere visualizzata nella dashboard o sul front-end del sito perché WordPress in realtà non lo ricorda.

Siamo noi a fissarlo. In particolare, stiamo andando a salvare i campi per:

• L'URL dell'immagine in modo che possiamo impostare l'immagine src attributo
• Il titolo dell'immagine in modo che possiamo impostarlo come immagine alt attributo e come il titolo attributo

Presenta i metadati

La prima cosa che dobbiamo fare è aggiungere un altro contenitore con tre campi di input nel admin.php vista del nostro plugin. Ciascuno di questi campi corrisponderà a quello dei valori sopra.

Dai un'occhiata al codice qui sotto, dopo di che elaborerò:

Fin dall'inizio, dovrebbe essere abbastanza facile capire:

• Abbiamo introdotto un contenitore identificato da In primo piano-footer-image-meta
• Contiene tre elementi di testo di input ciascuno dei quali corrisponde agli attributi degli elementi dell'immagine che verranno salvati

A questo punto, dobbiamo tornare al nostro file JavaScript in modo che possiamo prendere le informazioni restituite tramite Media Uploader e compilare i campi di input con queste informazioni.

Aperto admin.js e quindi aggiungere le seguenti tre linee alla fine della funzione di gestione per l'inserimento evento (per file_frame):

// Memorizza le informazioni dell'immagine nei campi dei metadati $ ('# footer-thumbnail-src') .val (json.url); $ ('# footer-thumbnail-title') .val (json.title); $ ('# footer-thumbnail-alt') .val (json.title);

Da qui, accedi alla tua dashboard di WordPress, aggiungi un nuovo post o modifica un post esistente e dovresti vedere qualcosa come la seguente immagine:

Supponendo che tu abbia scritto direttamente tutto il codice JavaScript, dovresti vedere qualcosa del genere basandoti sui dati che hai fornito nel Media Uploader quando selezioni un'immagine.

Nota, tuttavia, che quando fai clic su "Rimuovi immagine in primo piano" il testo rimane. Prima di guardare effettivamente a salvare queste informazioni, completiamo il JavaScript in modo che cancelli i campi di input ogni volta che l'utente rimuove l'immagine.

Anche se ci sono un paio di modi per farlo, ho scelto di usare il seguente codice:

// Infine, ripristiniamo i campi di input dei metadati $ ('# featured-footer-image-info') .children () .val (");

Ricorda che questo deve essere posizionato nel gestore eventi per l'ancora "Rimuovi immagine in primo piano". Nel precedente articolo, abbiamo chiamato questa funzione resetUploadForm. 

A questo punto, dovresti essere in grado di fare clic su "Rimuovi immagine in primo piano" e vedere che l'immagine e i campi di inserimento sono stati ripristinati. Se hai problemi, controlla il codice sorgente nel repository GitHub associato a questo post (sarà nel ramo principale e sarà anche contrassegnato come 1.0.0).

Salvataggio dei metadati

Ora dobbiamo introdurre del codice nel plug-in che disinfetterà i valori dei campi di input, li assocerà al post e lo salverà nel database in modo che possiamo visualizzare le informazioni al piè di pagina di ogni post.

Nel correre funzione per Acme_Footer_Image, aggiungi la seguente riga di codice:

add_action ('save_post', array ($ this, 'save_post'));

Quindi dobbiamo definire una funzione che sarà responsabile per il salvataggio effettivo dei valori dei campi di input nel database. Ci sono due cose da sapere sul seguente codice:

• Stiamo disinfettando i dati prima di salvarli
• Siamo associati ai campi con i tasti che useremo per visualizzare l'immagine sul front-end.

/ ** * Sanitized e salva i metadati delle immagini footer in evidenza post con questo post. * * @param int $ post_id L'ID del post con cui stiamo lavorando attualmente. * @since 0.2.0 * / public function save_post ($ post_id) if (isset ($ _REQUEST ['footer-thumbnail-src'])) update_post_meta ($ post_id, 'footer-thumbnail-src', sanitize_text_field ($ _REQUEST ['footer-thumbnail-src']));  if (isset ($ _REQUEST ['footer-thumbnail-title'])) update_post_meta ($ post_id, 'footer-thumbnail-title', sanitize_text_field ($ _REQUEST ['footer-thumbnail-title']));  if (isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt'])); 

Prima di essere pronti a testare questo, è necessario apportare altre due modifiche alla visualizzazione dashboard prima di visualizzare le immagini sul front-end.

Per prima cosa, dobbiamo assicurarci di riportare i metadati ai campi di input. Hop in the admin.php e aggiornalo ancora una volta per includere questo:

Qui, stiamo facendo una chiamata al get_post_meta funzione per recuperare i valori che vengono salvati utilizzando la funzione che abbiamo dichiarato sopra. 

Successivamente, dobbiamo assicurarci di popolare l'elemento immagine creato in precedenza in questa serie con gli stessi valori:

Ovviamente, se i metadati sono vuoti, allora nulla popolerà gli attributi e l'immagine non verrà visualizzata.

Supponendo che tutto vada per il meglio, dovresti vedere l'immagine e i suoi dati associati visualizzati nei campi di input quando salvi il post. Allo stesso modo, quando rimuovi l'immagine in primo piano, i campi dovrebbero essere cancellati e non dovrebbero più essere visualizzati.

Pulire

Prima di passare alla visualizzazione dell'immagine sul front-end, ci sono alcune piccole cose che dobbiamo fare per pulire la visualizzazione della meta-box.

Innanzitutto, dobbiamo assicurarci che tutti i campi di input precedenti fossero di tipo testo sono di tipo nascosto.

Successivamente, dobbiamo scrivere una piccola funzione JavaScript che visualizzerà l'immagine assumendo che sia stata salvata. La funzione controllerà se il campo di input per l'URL dell'immagine non è una stringa vuota.

Se non lo è, visualizzerà l'immagine. Quindi aggiungiamo questa funzione al nostro file JavaScript:

/ ** * Verifica se il campo di input per l'origine delle miniature ha un valore. * In tal caso, vengono visualizzate l'immagine e l'ancora 'Rimuovi immagine in primo piano'. * * In caso contrario, viene eseguito il rendering dell'ancora standard. * * @param object $ Un riferimento all'oggetto jQuery * @since 1.0.0 * / function renderFeaturedImage ($) / * Se un URL di anteprima è stato associato a questa immagine * Quindi dobbiamo visualizzare l'immagine e il link di reset . * / if ("! == $ .trim ($ ('# footer-thumbnail-src') .val ())) $ ('# featured-footer-image-container') .removeClass ('hidden') ; $ ('# set-footer-thumbnail') .parent () .hide (); $ ('# remove-footer-thumbnail') .parent () .removeClass ('hidden');

Quindi, effettua una chiamata alla funzione JavaScript nel contesto della funzione DOM-ready:

renderFeaturedImage ($);

In breve, quando la pagina si carica, controlla se esiste un URL nel nostro campo di input. Se è così, rende l'immagine e ci dà la possibilità di rimuoverlo. In caso contrario, mostra solo la casella immagine vuota. 

Di nuovo, se hai problemi a seguire questo codice, assicurati di controllare il repository GitHub associato usando il link nella barra laterale di questa pagina.

Visualizzazione dell'immagine in primo piano

A questo punto, abbiamo fatto tutto ciò che è necessario fare nella dashboard, quindi è il momento di visualizzare l'immagine sul front-end sul blog. Per fare ciò, dobbiamo impostare un hook a cui connettersi il contenuto azione, controlla se esiste un'immagine e, in tal caso, aggiungila al contenuto del post. 

Per fare ciò, prima aggiungi la seguente riga al correre metodo del tuo Acme_Footer_Image classe:

add_action ('the_content', array ($ this, 'the_content'));

Successivamente, abbiamo bisogno di scrivere una funzione che è agganciata a questa azione. Questa funzione sarà responsabile del controllo se siamo solo una singola pagina (perché non vogliamo aggiungere un'immagine al piè di pagina di un post se un utente ha, per esempio, un Di Più tag come parte del loro contenuto).

Lo facciamo usando il seguente codice:

/ ** * Se il post corrente è un singolo post, controlla se c'è un'immagine in primo piano. * Se è così, append è per il contenuto del post prima di rendere il post. * * @param stringa $ contenuto Il contenuto del post. * @since 1.0.0 * / public function the_content ($ content) // Ci interessa solo accodare l'immagine a pagine singole se (is_single ()) // Per aggiungere un'immagine, ci deve essere almeno un attributo source if ("! == ($ src = get_post_meta (get_the_ID (), 'footer-thumbnail-src', true))) // legge gli attributi rimanenti anche se sono stringhe vuote $ alt = get_post_meta (get_the_ID (), 'footer-thumbnail-alt', vero); $ title = get_post_meta (get_the_ID (), 'footer-thumbnail-title', true); // crea l'elemento image all'interno del proprio contenitore $ img_html = '
'; $ img_html. = ""; $ img_html. = '
'; // aggiungilo al contenuto $ content. = $ img_html;  restituisce $ content; 

E con questo, dovremmo avere un plugin pienamente funzionale che aggiunge un'immagine footer in primo piano a un post che esegue il rendering su una singola pagina di post.

Conclusione

In tutta questa serie, abbiamo coperto un sacco di materiale il meno che riguardava l'utilizzo di Media Uploader. Sebbene questo particolare articolo abbia dedicato più tempo a mostrarci come collegare i dati dalla meta-box al front-end, dimostra ancora come applicare un'applicazione pratica di Media Uploader nel contesto di un plugin.

Detto questo, c'è ancora molto da imparare su Media Uploader che potremmo trattare in futuro. Se sei interessato, per favore fammi sapere nei commenti qui sotto. Inoltre, se avete domande su ciò che avete letto o su questa serie in generale, sentitevi liberi di lasciare anche quelle.

Non dimenticare di eseguire il checkout del repository GitHub per questo progetto: spero che ti serva bene quando lavori con Media Uploader in futuro!