Come creare un semplice plugin FAQ per WordPress

Articolo scritto da:
  • WordPress
  • Aggiornato: Feb 09, 2017

Ne abbiamo già visti molti suggerimenti e strumenti per il blog. Bene, oggi impareremo come creare un buon strumento per il tuo blog: un plug-in della pagina FAQ. Ma la cosa più importante non è solo il plugin stesso, ma cosa puoi fare con questo principio. Imparerai come archiviare qualsiasi tipo di dati nel tuo sito WP e come integrarlo con librerie esterne (come l'interfaccia utente di jQuery) creando componenti personalizzati per il tuo sito. Iniziamo!

L'idea, demo e download

dimostrazione

Il nostro obiettivo qui è creare un plug-in che può essere utilizzato per molte cose, ma si adatta abbastanza bene alle pagine delle FAQ.

Ma a parte questo il nostro principale risultato sarà il comprensione di WordPress tipi di messaggi personalizzati, codici brevi, interazioni con il plugin JS / jQuery esterno. Con questa idea potresti creare molte cose basate su altri pazzi plugin che potresti trovare là fuori, questo è solo il punto di partenza per te, caro Padawan.

So qui puoi trovare la demo dell'API jQuery per il componente che useremo - ma la cosa davvero interessante è il codice che usa per generare quel componente (PHP).

Oh, e naturalmente puoi trovare il file plugin per il download qui così puoi semplicemente installare nel tuo sito WP.

Riscaldamento - File plugin e tipo di messaggio personalizzato

Prima di tutto abbiamo bisogno di creare un tipo di messaggio personalizzato per archiviare i nostri dati.

I tipi di post personalizzati sono una parte importante della magia di WP, ti consentono di creare un nuovo tipo di dati (tipo di post, pagine, allegati simili) in modo che possa essere chiamato e manipolato utilizzando le funzioni di WP. Questo può sembrare semplice per i principianti, ma solo i vecchi programmatori PHP (è ancora una cosa?) Sanno quanto sia stato difficile solo connettersi e archiviare i dati nel proprio DB. Per non parlare della creazione dinamica di nuovi tipi di dati, questo è sottile ma consente una grande flessibilità nel nostro codice.

Per noi avere questo abbiamo bisogno di un plugin, ma probabilmente hai già familiarità con questo concetto. I plugin sono come i blocchi Lego per WordPress, aggiungono o trasformano la funzionalità corrente usando un codice che può essere facilmente inserito (duh!) O anche scollegato se lo si desidera.

Per creare un plugin in modo che WP lo riconosca hai bisogno di cose 2:

  1. Crea un file all'interno del tuo wp-content / plug-in /
  2. Aggiungi i metadati all'inizio di quel file in modo che WP possa capire di cosa si tratta

Tieni presente che il nome del file deve essere univoco, quindi quando qualcuno installa il tuo plug-in (anche tu stesso) non ci saranno conflitti con i plugin attuali. Nel nostro caso per una migliore organizzazione aggiungeremo una nuova cartella con il nome faq-whsr e al suo interno un file chiamato faq-whsr.php.

Ora per il metada, aggiungi qualcosa di simile all'inizio del tuo plugin (subito dopo <? Php):

meta_01

Che significa:

  • Nome plugin: il bel nome che verrà mostrato nell'interfaccia plugin di wp-admin>
  • URI del plug-in: se si desidera aggiungere un collegamento alla pagina del plug-in (documenti, esempi, pagina di vendita)
  • Descrizione: Questo è il piccolo paragrafo mostrato nell'interfaccia plugin di wp-admin>. Mantengalo semplice in modo che gli utenti ricordino a cosa serve
  • URI autore / autore: la persona / azienda che ha creato il plugin e un link per i crediti
  • Licenza: così gli utenti sapranno cosa possono / non possono fare con il tuo plugin

01-plugin-creato

Ok, ora abbiamo creato il nostro plugin, aggiunto alcuni metadati pertinenti. Non appena si salva il file del plug-in, si dovrebbe essere in grado di vederlo nell'interfaccia di wp-admin

Attiviamolo e vediamo cosa succede.

Aspetta, niente? Bene, questa è una buona cosa, se qualcosa fosse sbagliato adesso vedresti un errore. Passiamo ora alla creazione del tipo di post personalizzato.

Nel nostro caso il CPT è l'elemento FAQ, ma è possibile creare libri, video, testimonianze e così via. La cosa importante da tenere a mente qui è la seguente: i nomi delle funzioni dovrebbero essere unici. Ripeti con me ora: i nomi delle funzioni dovrebbero essere unici, i nomi delle funzioni dovrebbero essere unici. Fatto? Bene, questo ti farà risparmiare un sacco di problemi fino a quando non possiamo usare OOP (forse nel prossimo tutorial).

La magia è fatta con questo codice:

cpt

E questo è ciò che le parti rilevanti significano:

  • $ etichette - è una matrice con le etichette e il testo per diverse sezioni della tua area wp-admin. Quindi WP conoscerà il modo corretto per chiamare i nostri articoli
  • supporta: questo dice cosa puoi vedere in wp-admin> FAQ> nuova schermata. Nel nostro caso avremo il titolo, l'editor (la casella di contenuto principale), l'autore, le revisioni e i campi personalizzati (nel caso li desideri).
  • tassonomie - qui dici a WP quali sono le tassonomie consentite (categorie, tag o tassonomie personalizzate)
  • register_post_type ('faq_whsr', $ args) - questo dice a WP "Ehi, crea un nuovo tipo di post personalizzato con l'ID come faq_whsr usando gli argomenti di $ args".

admin-faq

Salvalo e trattieni il respiro. Dovresti vedere ora una nuova sezione nel tuo menu principale di wp-admin

Aspetta, è tutto? Si. Questo snippet crea l'intera funzionalità CPT. Se non lo trovi fresco, aspetta che si raffreddi nella prossima sezione.

Prima di lasciare l'amministratore di wp, aggiungere alcuni dati fittizi (alcune domande frequenti con almeno le categorie 2).

Front-End: interazione WP x jQuery

Ora è finalmente il momento di vedere qualche azione e useremo elemento jQuery UI Fisarmonica per questo.

L'interfaccia utente di jQuery ha praticamente gli stessi vantaggi di jQuery:

  • Un sacco di sviluppatori ci stanno lavorando
  • Cross-browser e codice predisposto per dispositivi mobili
  • Ben documentato
  • Gioca bene con WP (lo stesso WP li usa)

La domanda ora è: come la chiamiamo?

Ci sono approcci 2 a questo:

  1. I cattivi puri tag <script> / <style> nella tua wp_head
  2. Il bel wp_enqueue

Oggi non perderemo troppo tempo con l'approccio sbagliato, ma quello buono sta sostanzialmente dicendo a WP "Hey amico, avremo bisogno di jQuery UI ad un certo punto nel nostro codice, per favore includilo nella pagina". In questo modo, WP può verificare se qualcuno lo ha già incluso o incluso una versione diversa di esso ed evitare un sacco di problemi con le librerie duplicate. Ok, come tradurre quella bella chat in codice?

Utilizzando la funzione di accodamento:

enqueue_02

Lo shortcode

E ora torniamo all'amministratore di wp. Abbiamo gli articoli delle FAQ e abbiamo la libreria per modellare gli articoli come vogliamo, cos'altro manca? Bene, dobbiamo chiamare gli oggetti!

Abbiamo un sacco di opzioni per questo, ma il più semplice in questo caso è creare uno shortcode. Shortcode è qualcosa che aggiungi nel campo del tuo contenuto (per pagine, post, CPT ...) e WP cercherà effettivamente una funzione da eseguire su di esso. Esistono tipi 2 di codici brevi:

  1. [auto-racchiuso] - Come i tag <hr /> o <br /> questo tipo di shortcode chiama solo una funzione ad un certo punto - questo è il nostro ragazzo
  2. [wrapped] Content [/ wrapped] - Questo è come tag <p> </ p> o <div> </ div> e in realtà può trasformare i suoi contenuti, o usare il contenuto come argomenti.

Vediamo come funziona allora. Crea una nuova pagina nel tuo wp-admin e aggiungi questo codice lì:

[Faq-whsr]

Salva e visita quella pagina e guarda cosa succede ...

Sto scherzando, non farà una cosa giusta? Bene, questo perché non abbiamo ancora creato una funzione per questo.

Aggiungi questo nel tuo file plugin:

shortcode_02

Ora aggiorna la tua pagina e ti prometto che accadrà qualcosa di veramente bello.

Splendido, no? Ora puoi vedere che è in esecuzione e il cielo è il limite per te ora. Quello che fa quel codice è solo dire a WP che c'è uno shortcode che si chiama [faq-whsr] e se WP lo trova, WP dovrebbe eseguire una funzione in quel punto della pagina.

Nel nostro caso, avremo bisogno di ottenere questa struttura per il pannello dell'interfaccia utente jQuery da creare:

api_02

E per quello creeremo un Query WP, carica le nostre FAQ e il loro contenuto. Sostituisci la funzione shortcode con questa:

shortcode-basic_02

Ok, ora verranno chiamati i tuoi articoli FAQ. Quello che abbiamo fatto è chiamare wp_query per chiamare il nostro tipo di post personalizzato e quindi passarlo al ritorno shortcode in modo che WP li visualizzi tutti seguendo la struttura desiderata.

Va bene ma manca qualcosa, giusto? Che dire di alcune opzioni lì? Bene, possiamo aggiungere opzioni per uno shortcode, vediamo come creare alcuni argomenti WP_Query nel nostro shortcode:

shortcode-final_02

In questo modo puoi chiamare gli elementi usando i seguenti argomenti (puoi combinarne quanti ne vuoi):

  • cat - ID categoria (più aggiunto come array) [faq-whsr cat = 1]
  • category_name - nome della categoria [faq-whsr category_name = "food"]
  • order - ASC o DESC (DESC è default) [faq-whsr order = "ASC"]
  • orderby - modifica i criteri per ordinare articoli [faq-whsr orderby = "title"]
  • posts_per_page - cambia il numero di elementi caricati [faq-whsr posts_per_page = 5]

Ma come ho detto, il cielo è il limite per te amico mio. Ecco alcune opzioni per WP_Query che potresti implementare e utilizzare:

  • Autore
  • Categoria (aggiungendo opzioni di esclusione con not_in)
  • Cerca (cool se vuoi dare agli utenti la possibilità di cercare attraverso di loro)
  • Campo personalizzato (dal momento che gli elementi delle Domande frequenti li hanno, puoi usarli per caricare oggetti con specifici campi e valori personalizzati)

Ora è il tuo turno

Questo è solo un punto di partenza per te, come puoi vedere. Tutti noi possiamo imparare molte altre cose interessanti per migliorare questo semplice plugin, ecco alcuni suggerimenti per approfondire:

  • Responsive design
  • Creazione di widget
  • Plugin Attiva / Disattiva ganci
  • Internazionalizzazione
  • OOP
  • Accodamento solo se necessario (per alcune pagine)

Non dimenticare di lasciare i tuoi pensieri nei commenti! Ed ecco la nostra sfida per te: è possibile applicare un'opzione "articolo predefinito" per lo shortcode (quindi quando la pagina viene caricata verrà aperto un altro oggetto, che non è il primo)? Come lo faresti?

A proposito di Rochester Oliveira

Sono un web designer e imprenditore di Itajubá (MG), Brasile. Adoro scrivere argomenti oscuri e fare cose interessanti.

Collegare: