Utilizzo di Shortcode di WordPress e campi personalizzati per le note a piè di pagina

In termini di web design e sviluppo, le cose che puoi fare con WordPress sono quasi illimitate. Puoi gestire un aggregatore di notizie, creare una piattaforma di crowdfunding, vendere biglietti per il primo concerto della tua band, mostrare la tua arte in una galleria virtuale, e così via.

Puoi anche creare un clone di Wikipedia e imitare le sue funzionalità come una sezione "sommario" o riferimenti incrociati collegati. In questo tutorial, utilizzeremo shortcode e campi personalizzati per creare una sezione "Footnotes" funzionante.

Presentazione delle note a piè di pagina

Sono stato contattato da un professore universitario che voleva pubblicare alcuni dei suoi articoli online. Aveva questo piccolo ... edu.tr/~hisname/ homepage e ha deciso che era giunto il momento di spostare il contenuto in un "vero" sito web e ha sentito che WordPress sarebbe stata la scelta giusta da utilizzare come sistema di gestione dei contenuti.

Come sapete, i lavori scientifici possono includere molti commenti, citazioni e riferimenti esterni a cui generalmente ci riferiamo come note a piè di pagina. Quando ha detto che voleva che i suoi articoli fossero più interattivi, ho immediatamente pensato a funzionalità simili in Wikipedia e ho iniziato a cercare plugin che offrissero questo tipo di servizio. 

Anche se ne ho trovato uno, tra tanti, ho pensato che sarebbe stato un buon esercizio se avessi tentato di creare il mio plugin per aggiungere note a piè di pagina. A tal fine, l'ho fatto e passerò attraverso il processo per tutto il resto di questo articolo.

Costruire il nostro Plugin di note

Il processo di creazione del nostro plugin sarà relativamente semplice, anche per gli sviluppatori principianti. Noi:

  • crea il nostro file plugin
  • costruisci il nostro shortcode,
  • codifica la nostra funzione footer
  • scrivi un'altra funzione che aggiunge le note a piè di pagina al contenuto del post il contenuto.

Pezzo di torta, giusto? 

Se sei un principiante desideroso di apprendere le basi dello sviluppo di plugin per WordPress, questo tutorial ha la giusta quantità di informazioni per iniziare. E se sei un po 'più avanzato, questo tutorial potrebbe darti delle buone idee.

1. Creare il file plugin

Se hai familiarità con i plugin (come nel costruirne uno o anche visualizzarne il codice sorgente), saprai che dobbiamo avviare i file principali del nostro plugin con le seguenti informazioni di intestazione:

Le linee sono tutte auto-esplicative, quindi non entrerò nei dettagli dicendoti che la versione rappresenta il numero di versione del tuo plugin. 

Sebbene, ci sono alcuni suggerimenti che posso dare:

  • L'unica linea richiesta è la riga "Nome plugin"; il resto è facoltativo (ma molto utile).
  • Puoi utilizzare un semplice codice HTML nella riga "Descrizione".
  • Ci sono altri "nomi di intestazione" che puoi trovare nella pagina "File Header" nel Codex.

Ora abbiamo finito con le intestazioni, passiamo al punto in cui costruiamo il nostro shortcode!

2. Creare lo Shortcode

Se leggi i miei tutorial più vecchi, ti ricorderai che io amore l'API Shortcode. In quanto tale, questa è la mia parte preferita.

Come affermato in precedenza, lo scopo del nostro shortcode sarà di visualizzare il numero della nostra nota a piè di pagina, che puoi specificare come parametro. Poiché si tratta di poche semplici righe di codice, scriviamo il codice ora e rivediamo subito dopo:

 '1',), $ atts)); ritorno '['. $ id. ']';  add_shortcode ('ref', 'footnotes_sc'); ?>

Come puoi vedere, il codice è davvero molto semplice. Ecco cosa fa:

  • Abbiamo creato una funzione chiamata footnotes_sc,
  • Abbiamo creato solo un parametro chiamato id (con un valore predefinito di "1") e lo ha trasformato in una variabile con il estratto() funzione,
  • Noi ritorno una semplice stringa con un link alla nota in calce corrispondente,
  • E infine, impostiamo un shortcode chiamato [Ref] e ha agganciato il nostro footnotes_sc () funzione ad esso.

Da ora in poi; ogni volta che usiamo il [Ref] shortcode (dove X è l'identificativo della nota), WordPress stamperà il numero di riferimento come [1].

3. Creazione della funzione nota a piè di pagina

Per rendere effettivamente note a piè di pagina, dobbiamo utilizzare i "campi personalizzati" di WordPress. La funzione seguente non è "codice avanzato", ma poiché è un po 'lunga, potremmo anche documentarla passo dopo passo. Eccoci qui:

 $ get_post_meta);  // se $ footnotes_array NON è vuoto ... if (count ($ footnotes_array)> 0) // ... avvia la variabile $ output con un DIV ... $ output = '
'; // ... usa i valori predefiniti degli argomenti della nostra funzione $ output. = '<' . $titletag . '>'. $ titolo. ''; $ output. = '<' . $listtag . '>'; // elenca le note a piè di pagina con ID di riferimento corrispondenti foreach ($ footnotes_array come $ footnote) foreach ($ footnote as $ ref_id => $ footnote_content) $ output. = '
  • '. $ footnote_content. '
  • '; // chiudi i tag HTML $ output. = ''; $ output. = '
    '; // e restituisce la variabile $ output se è un singolo post o pagina if (is_singular ()) return $ output;

    In breve; abbiamo salvato il nostro post meta in un array, riempito il $ uscita variabile girando le note a piè di pagina in un elenco HTML e restituito $ uscita. Facile come una torta.

    Usando il nostro Plugin di note

    L'utilizzo del plugin è abbastanza semplice: se aggiungi campi personalizzati denominati ref-1, ref-2, ref-3 e così via, una sezione "Note a piè di pagina" apparirà subito dopo il tuo articolo. E abbiamo già spiegato come utilizzare lo shortcode, quindi è tutto quello che devi fare.

    Avvolgendo

    Ora che abbiamo una funzione che restituisce un elenco HTML delle note a piè di pagina, è ora che aggiungiamo quella lista sotto i nostri articoli!

     

    Questa è probabilmente la parte più semplice del nostro codice poiché chiamiamo la nostra funzione precedente solo per aggiungere il suo output dopo il contenuto del post, quindi agganciamo questa nuova funzione al il contenuto filtro.

    Se non vuoi aggiungere automaticamente la sezione "Note a piè di pagina" sotto il contenuto, procedi e rimuovi queste righe. Invece, dovrai usare un pezzettino di codice nel tuo tema nel posto in cui si desidera mostrare le note a piè di pagina dell'articolo. È inoltre possibile modificare gli argomenti predefiniti della funzione.

    Conclusione

    Alla fine, al professore è piaciuto molto quello che ho fatto con la funzionalità "a piè di pagina" e penso che usi ancora il sito web che ho costruito - ha usato la sua homepage per oltre 10 anni e probabilmente userà WordPress più a lungo. Spero che ti sia piaciuto anche a te. Se vuoi accedere al codice completo, puoi trovarlo qui.

    Hai qualcosa da aggiungere? Si prega di condividere i vostri pensieri con noi commentando di seguito. E se ti è piaciuto questo tutorial, non dimenticare di condividerlo con i tuoi amici!