Crea un plugin WordPress per aggiungere biografie di autori ai tuoi messaggi

Molti blog popolari in questi giorni sono creati da più contributori. Oggi creeremo un semplice plugin per WordPress che ci consentirà di aggiungere la biografia dell'autore del post alla conclusione di ogni post, molto simile a quello che vedete su Nettuts.


1. Avere una biografia pronta

Se non visualizzi già le informazioni biografiche degli autori, puoi aggiungere e modificare le informazioni biografiche andando al pannello degli utenti all'interno del pannello di WordPress, selezionando un utente e compilando una bio veloce. Stiamo anche aggiungendo un gravatar per l'autore, quindi assicurati di impostare anche un indirizzo email.


2. Creare i file necessari

Dovremo creare un singolo file che contenga le funzionalità del nostro plugin. Accendi il tuo FTP di scelta e, all'interno di wp-content / plugins / cartella, creare un file chiamato ntauthorbio.php. Affinché WordPress riconosca il nostro plugin, dobbiamo creare un breve commento di intestazione nel nostro file, proprio come fai nella parte superiore di style.css. Incolla il seguente codice nel tuo file e, ovviamente, apporta le modifiche di conseguenza.

 / * Nome plugin: Nettuts Autore URI del plug-in Bio: http://www.nettuts.com/ Descrizione: Questo plug-in aggiunge all'autore un bio al suo autore Autore: nettuts Versione: 0.1 Autore URI: http: //www.nettuts .com / * /

3. Funzioni e azioni

Successivamente, creeremo la base per il nostro plug-in. Incolla quanto segue dopo l'intestazione del commento di apertura.

 function author_bio_display ($ content) // questo è dove mostreremo la funzione bio author_bio_style () // questo è dove modificheremo la nostra casella function author_bio_settings () // questo è dove mostreremo le nostre opzioni di amministrazione function author_bio_admin_menu () // questo è dove aggiungiamo il nostro plugin al menu admin add_action ('the_content', 'author_bio_display'); add_action ('admin_menu', 'author_bio_admin_menu'); add_action ('wp_head', 'author_bio_style');

"Gli hook sono forniti da WordPress per consentire al tuo plug-in di" agganciarsi "al resto di WordPress, vale a dire richiamare funzioni nel tuo plug-in in momenti specifici e quindi impostare il plug-in in movimento."

Sopra abbiamo creato quattro funzioni che il nostro plugin richiederà per funzionare correttamente. Ogni funzione ha uno scopo specifico (come commentato sopra), e inoltre, ognuna è legata a un'azione specifica (a parte author_bio_settings, che sarà chiamato da un'altra funzione.

Quando si sviluppano i plugin, è importante capire che cos'è un "gancio". Un hook è un posto nel ciclo in esecuzione in cui possiamo agganciare WordPress e chiamare le nostre funzioni. Ad esempio il gancio usato sopra, per author_bio_display, è il contenuto; questo significa che quando WordPress usa il contenuto (usato per visualizzare il contenuto principale di un post / pagina), chiamerà prima la funzione che abbiamo assegnato.

  • il contenuto - viene visualizzato il contenuto della pagina / post
  • admin_menu - chiamato quando viene creata la barra laterale nel dashboard dell'amministratore
  • wp_head - ci consente di aggiungere codice ai tag head della pagina. Questo è il motivo per cui includi wp_head () durante la progettazione dei tuoi temi.

4. La funzione di visualizzazione

La funzione più importante nel nostro plugin è la funzione di visualizzazione, che gestirà il processo di visualizzazione effettiva delle informazioni dopo il contenuto. Prima di iniziare, è importante notare che questa funzione accetta un parametro, chiamato $ content. Ciò significa che il contenuto della pagina / post è passato alla nostra funzione, quindi possiamo quindi aggiungere il nostro autore bio.

Iniziamo con una semplice istruzione if / else.

 function author_bio_display ($ content) // questo è dove verrà visualizzato il bio if (is_single () || is_page ()) $ bio_box = // placeholder; restituire $ contenuti. $ Bio_box;  else return $ content; 

Sopra, controlliamo se il contenuto viene visualizzato su un singolo post utilizzando è single(), o una pagina usando is_page (). Se uno dei due restituisce true, possiamo postare la nostra casella che verrà inserita nel file $ bio_box variabile. Altrimenti, se siamo su una pagina diversa, come gli archivi o la prima pagina, dovremmo semplicemente restituire il contenuto intatto.

Ora dobbiamo aggiungere il nostro codice affinché la scatola appaia, cambia la tua $ bio_box per abbinare il seguente codice.

 $ bio_box = '
'.get_avatar (get_the_author_meta (' user_email '),' 80 ').' '.Get_the_author_meta ( 'display_name').'

'.Get_the_author_meta ( 'Descrizione').'

';

Lo stile, ovviamente, può essere modificato in seguito per adattarlo ai tuoi gusti, ma per ora utilizzeremo una semplice scatola e aggiungeremo alcuni CSS per adattarlo a breve.

Stiamo utilizzando alcune funzioni sopra per recuperare i nostri dati richiesti. get_avatar () è una funzione integrata in WordPress che restituirà il gravatar dell'utente, se ne ha uno, in base alla sua email. Noi passiamo il get_avatar () funzione due parametri; l'e-mail dell'autore e una dimensione per l'immagine (80px * 80px nel nostro caso).

La funzione get_the_author_metapuò recuperare qualsiasi informazione su un utente WordPress registrato. Un elenco completo degli articoli che è possibile restituire può essere trovato su WordPress Codex.

Se ora eseguiamo il nostro plugin, dovremmo vedere qualcosa che assomiglia a questo:

Non è la biografia più carina, ma ora abbiamo le funzionalità di base che stiamo cercando. Se hai ancora problemi, assicurati che l'autore del post / pagina abbia una biografia e / o un gravatar e anche assicurati che il plugin sia stato attivato nella sezione plugins del dashboard. Passiamo al prossimo stile un po '.

5. Renderlo carino

Se sei un designer, ecco la tua occasione per fare come ti pare! Il mio codice qui sotto è appena sufficiente per rendere la nostra scatola semplice e pulita. Per fornire un esempio di come wp_head () può essere usato, inseriremo il CSS per questa casella nel tag head del nostro documento. Tuttavia, puoi semplicemente inserirlo nel tuo foglio di stile.

Questa funzione author_bio_style () deve restituire un semplice blocco di CSS.

 function author_bio_style () // questo è il punto in cui modificheremo la nostra casella echo ''; 

Il codice sopra non richiede molte spiegazioni; I CSS vanno oltre lo scopo di questo tutorial. Generalmente, stiamo solo creando una scatola con un bordo e facendo fluttuare l'immagine a sinistra. Infine, aggiungiamo un distanziatore per assicurarci che la scatola sia abbastanza grande da contenere l'immagine e il testo. Potresti anche usare l'hack della correzione, o anche l'overflow: nascosto per ottenere questo effetto. In definitiva, ciò dipenderà dal tuo layout specifico.

La tua nuova scatola con le zanne dovrebbe sembrare simile alla mia ora; vedi sotto.

6. Creare una pagina delle impostazioni

Prima di concludere, diamo un'occhiata all'aggiunta di una pagina delle impostazioni nella dashboard per il nostro plug-in. La maggior parte dei plugin si basa su una sorta di sezione delle impostazioni per fornire un po 'più di flessibilità senza che l'utente debba modificare alcun codice.

Ci sono numerose opzioni che potremmo aggiungere; ad esempio, dove viene visualizzata la casella (superiore o inferiore), i colori utilizzati, escludono determinati utenti e così via. Per questo tutorial, ho scelto di specificare se il plug-in può apparire solo su pagine, solo post o entrambi. Spero che questo sia sufficiente per mostrarti le corde. A quel punto, puoi estendere la funzionalità come meglio credi.

Fare la pagina

Dobbiamo configurare una pagina nella dashboard di amministrazione. Per fare ciò, dobbiamo dire a WordPress cosa fare quando il admin_menu innesca l'azione Per compensare, modificheremo il nostro author_bio_admin_menu () funzione per assomigliare al codice qui sotto:

 function author_bio_admin_menu () // questo è dove aggiungiamo il nostro plugin al menu admin add_options_page ('Author Bio', 'Author Bio', 9, basename (__ FILE__), 'author_bio_settings'); 

Il codice precedente crea una pagina di opzioni nel dashboard e passa i seguenti parametri:

  • Nome del menu - Autore Bio
  • Titolo della pagina - Autore Bio
  • Accesso Privilegio - 9 - o, solo l'accesso come amministratore
  • Maniglia
  • La funzione richiesta - author_bio_settings ()

Successivamente, dobbiamo fornire alla pagina dei contenuti. Dal momento che abbiamo chiamato author_bio_settings () quando crei la pagina, questa è la funzione che useremo per visualizzare il modulo delle opzioni e aggiornare il database.

La funzione Impostazioni

In poche parole, questa funzione deve visualizzare un modulo con le opzioni. È inoltre necessario verificare se il modulo è stato inviato e, in caso affermativo, memorizzare i nuovi valori nel database. Per prima cosa, concentriamoci sulla creazione del modulo.

 function author_bio_settings () // questo è dove mostreremo le nostre opzioni di amministrazione $ options ['page'] = get_option ('bio_on_page'); $ options ['post'] = get_option ('bio_on_post'); eco ' 
'$ Messaggio.'

Impostazioni bio dell'autore

Quando visualizzare l'autore Bio

pagine
Messaggi

';

Iniziamo afferrando alcune opzioni dal database. Ovviamente, al momento non disponiamo ancora di un metodo per impostarli, quindi per il momento saranno vuoti. Successivamente, viene visualizzato il modulo, che è già in stile CSS dashboard di WordPress. Noterai che stiamo visualizzando una variabile (attualmente non impostata) chiamata $ messaggio; questo è così che possiamo avvisare l'utente quando aggiorniamo le impostazioni se ha avuto successo.

Stampiamo le nostre opzioni alla fine del codice della casella di controllo. Se l'utente attiva un'opzione, è necessario archiviarla nel database come 'spuntata' per verificare la casella di controllo. Le funzioni che usiamo per ottenere e impostare le opzioni sono get_option () e update_option () rispettivamente. La funzione get richiede il nome dell'opzione (quindi è importante essere univoci) e l'opzione di aggiornamento richiede il nome dell'opzione e il nuovo valore. Se la funzione di aggiornamento non trova l'opzione, ne crea semplicemente una nuova.

Finora la tua pagina dovrebbe apparire come fare:

Ora, aggiungiamo il nostro codice per prendere i valori inviati dal modulo e aggiorniamo le opzioni nel database. Il modulo contiene un valore nascosto, chiamato azione, che è impostato su "aggiornamento". Verificheremo se tale valore è impostato e, in tal caso, aggiorneremo le nostre opzioni. Questo codice dovrebbe essere collocato in cima al nostro autor_bio_settings () funzione.

 if ($ _POST ['action'] == 'update') $ _POST ['show_pages'] == 'on'? update_option ('bio_on_page', 'checked'): update_option ('bio_on_page', "); $ _POST ['show_posts'] == 'on'? update_option ('bio_on_post', 'checked'): update_option ('bio_on_post', "); $ message = '

Opzioni salvate

';

Se il modulo è stato inviato, usiamo l'operatore ternario (se non sei sicuro di come funzionano, cercali - sono una semplice forma di if / else) per verificare se le checkbox sono selezionate o meno. Se lo sono, allora impostiamo l'opzione come 'checked'; altrimenti lo impostiamo come vuoto. Infine, abbiamo impostato il messaggio visualizzato in una finestra di dialogo corretta, già disegnata da WordPress.

Modifica dell'output

Ora dovremmo essere in grado di impostare le opzioni e vederle cambiare nella nostra pagina delle opzioni; tuttavia, la funzionalità del nostro plug-in non cambierà ancora come non gli è stato detto di farlo. Quindi il passo finale del nostro progetto è di far reagire la funzione di visualizzazione a queste opzioni. Nel nostro author_bio_display () funzione, anteporre il seguente codice all'inizio, in modo da ottenere le opzioni precedentemente impostate.

 $ options ['page'] = get_option ('bio_on_page'); $ options ['post'] = get_option ('bio_on_post');

Ora che abbiamo questi valori, abbiamo solo bisogno di eseguire il codice di visualizzazione se l'opzione è impostata. Per fare ciò, cambiamo di conseguenza la nostra dichiarazione if.

 if ((is_single () && $ options ['post']) || (is_page () && $ options ['page']))

Qui abbiamo implementato due condizioni che, se soddisfatte, causeranno la visualizzazione della nostra scatola. Non troppo difficile, giusto? Ecco il nostro plug-in completo:

  ".get_avatar (get_the_author_meta (" user_email ")," 80 ")." ".Get_the_author_meta ( "DISPLAY_NAME")." 

".Get_the_author_meta ( "descrizione")."

"; restituire $ content. $ bio_box; else return $ content; function author_bio_style () // questo è il luogo in cui modificheremo la nostra casella echo ''; function author_bio_settings () // questo è dove mostreremo le nostre opzioni di amministrazione if ($ _POST ["action"] == "update") $ _POST ["show_pages"] == "on"? update_option ("bio_on_page", "checked"): update_option ("bio_on_page", ""); $ _POST ["show_posts"] == "on"? update_option ("bio_on_post", "checked"): update_option ("bio_on_post", ""); $ message = "

Opzioni salvate

"; $ options [" page "] = get_option (" bio_on_page "); $ options [" post "] = get_option (" bio_on_post "); echo"
"$ Messaggio".

Impostazioni bio dell'autore

Quando visualizzare l'autore Bio

pagine
Messaggi

"; funzione author_bio_admin_menu () // questo è dove aggiungiamo il nostro plugin al menu admin add_options_page (" Autore Bio "," Autore Bio ", 9, basename (__ FILE__)," author_bio_settings "); add_action (" the_content "," author_bio_display "); add_action (" admin_menu "," author_bio_admin_menu "); add_action (" wp_head "," author_bio_style ");?>

Ecco

Speriamo che se tutto andasse secondo i piani, ora dovresti avere una cassetta della biografia degli autori funzionanti dopo i tuoi post / pagine. Inoltre, ora hai una pagina delle impostazioni personalizzate nella dashboard di WordPress, che sei libero di estendere come meglio credi.

Grazie per aver letto il mio primo post qui su Nettuts. Se hai qualche domanda sentiti libero di lasciare un commento qui sotto!