Tutorial su WordPress: come creare un plugin per testimonianze

Articolo scritto da:
  • WordPress
  • Aggiornato: Aug 12, 2013

Quindi, eccoci qui per il nostro secondo tutorial settimanale su WordPress. Abbiamo imparato come creare un sito WP a scorrimento infinito e plug-in di pagina nel passato. Oggi impareremo un po 'di più sui tipi di post personalizzati e su come caricare i loro dati.

Questa funzione è davvero importante nel tuo sito, poiché ti consente di mostrare alle persone di consigliarti. Le testimonianze sono una grande prova sociale della tua allegria. E non è necessario disporre di plugin complessi o di molto codice per ottenere questo risultato, come vedrai con un paio di file che puoi creare una presentazione sexy per le tue testimonianze.

Iniziamo allora!

Zip e installazione

Se hai fretta di controllare questo, puoi farlo scaricare e installarlo.

Dovrai aggiungere alcuni dati quindi, aggiungendo alcune testimonianze utilizzando le nuovissime testimonianze che puoi vedere nella tua dashboard:

list-testimonianze

Quindi puoi utilizzare lo shortcode di base per caricare quello:

[testimonials rand = 0 max = 5]

Quando hai aggiunto quel codice vedrai qualcosa di simile nella tua pagina:

principali-testimonianze

Ora vedremo come creare ed esplorare questo (aggiungendo più funzioni e cambiando l'aspetto).

Le nozioni di base

Come abbiamo detto prima, dovrai aggiungere il i metadati dell'intestazione, crea il file del plugin e chiama i tuoi script. Per farla breve, creerai una nuova cartella sotto il tuo wp-content / plugins con il nome del tuo plug-in, quindi creerai un file con lo stesso nome della cartella in cui si trova il tuo file plugin principale.

Una volta che hai fatto il copia e incolla come segue:

<? php / * Nome plugin: Testimonianze Descrizione: Visualizza testimonianze dei clienti. Versione: 1.0 Autore: Web Revenue Blog Licenza: GPL2 * / // accodamento di script e stili function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', falso); wp_enqueue_script ('testimonials', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', falso); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'all'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Ecco cosa stiamo facendo:

  • Dicendo al WP qual è il nome del nostro plugin, autore, che cosa fa
  • Creazione di una funzione, in cui inseriamo script regolari (come jQuery) e script personalizzati (come flexslider) e fogli di stile
  • Dicendo al WP di caricare la funzione scripts nella sua chiamata di script predefinita, in modo che vengano effettivamente caricati nelle pagine

È tutto molto bello, ma non dimenticare di creare effettivamente i file sotto / js e / css. Puoi semplicemente scaricarli nel nostro contenuto demo in modo da non dover scavare molto per trovare i file flexslider.

Ora abbiamo tutte le cose di base sul posto che possiamo iniziare la parte divertente.

Il tipo di messaggio personalizzato

Per impostazione predefinita, WordPress ha tipi di post, pagine e post 2 comuni. Ma ha anche molti tipi di post interni (come allegati), quindi la definizione "post type" è: Ogni tipo di dati che devi memorizzare.

Dato che il nostro plugin creerà una nuova funzionalità, WP non dispone di un luogo integrato per l'archiviazione, quindi è necessario crearlo. Non avere paura piccola cavalletta, è abbastanza semplice, puoi usare questo codice:

// la magia nera per creare la funzione del tipo di post create_post_type () {register_post_type ('testimonials', // nuovo tipo di messaggio array ('labels' => array ('name' => __ ('Testimonials'), 'singular_name' => __ ('Testimonial')), 'public' => true, / * Il tipo di post è destinato a un uso pubblico, incluso nel front-end e in wp-admin. * / 'Supports' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Qui stiamo usando solo la funzione register_post_type () per dire a WP "Hey Buddy, abbiamo bisogno di memorizzare questo tipo di dati, per favore sii pronto a riceverlo".

Gli diciamo anche che questo tipo di dati è chiamato "testimonianze", dovrebbe essere disponibile per l'accesso pubblico (quindi in realtà crea una nuova voce di menu nella dashboard), i campi su cui abbiamo bisogno e se è gerarchico oppure no (come pagine che abbiamo pagine padre e figlio).

Quindi dobbiamo chiamarlo ogni volta che carichiamo WordPress. Questo gancio lo farà:

add_action ('init', 'create_post_type');

I campi personalizzati

Ora il nostro tipo di post personalizzato ha il titolo (nome della persona), il contenuto (testimonial della persona), un'immagine (immagine in vetrina) ma manca un link, poiché se la persona è abbastanza gentile da parlare di te, dovresti almeno collegarti a il loro sito, giusto?

Potremmo farlo con i soliti campi personalizzati, ma è molto meglio avere un campo "chiuso", in cui l'utente non ha bisogno di digitare il nome del campo e anche dove è possibile aggiungere alcune regole di convalida.

Prima di tutto abbiamo bisogno di creare un nuovo metabox, che è quei bei pannelli che hai nella tua area di post editing, ogni piccolo pannello è un metabox. Questa funzione creerà e chiamerà:

// aggiungendo la funzione campo meta box URL add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'testimonials', 'side', 'low'); } add_action ('admin_init', 'add_custom_metabox');

La funzione add_meta_box () richiede questi parametri:

  1. ID: l'identificatore univoco per questo. Potresti usare qualsiasi cosa unica qui come "unicorno-mangia-arcobaleno" o "testimonial-link". Tutto ciò che può essere usato internamente
  2. Titolo - Cosa verrà mostrato all'utente? Qui è importante usare la funzione __ (), è la funzione che consente agli utenti di lingue straniere di tradurre il proprio plugin con file .po (senza modificare i file del plugin)
  3. Callback - La funzione in cui si hanno i contenuti effettivi del metabox
  4. Post Type - Nel nostro caso vogliamo che sia visibile solo per testimonianze
  5. Contesto: dove vuoi mostrarlo nella pagina
  6. Priorità - Se dovrebbe essere prima di altri oggetti della stessa posizione o dopo di loro

Ora abbiamo bisogno di creare la funzione url_custom_metabox (), dal momento che l'abbiamo chiamata.

// HTML per la funzione dell'area di amministrazione url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', vero); // convalidare! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ errors = "Questo URL non è valido"; $ urllink = "http: //"; } // emette il messaggio url invlid e aggiungi http: // al campo di input if (isset ($ errors)) {echo $ errori; }?> <p> <label for = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </label> </p> <? php}

Ok, ora traduciamo questo in inglese semplice:

  • Viene chiamata la variabile globale $ post, quindi possiamo sapere qual è il POSTID dell'elemento corrente
  • Carichiamo il valore corrente per l'URL
  • Noi convalidiamo se il valore che l'utente inserito è valido. Se c'è almeno un'occorrenza "http" o "https" il valore è OK, altrimenti è valido e dobbiamo usare il valore predefinito
  • Quindi mostriamo gli errori, se ce n'è uno
  • Ora iniziamo il vero HTML, aggiungendo il valore predefinito nel campo di input come abbiamo ottenuto nel PHP

Dopo questo punto abbiamo bisogno di salvare effettivamente ciò che viene inviato dall'utente. Useremo l'hook "save_post", quindi ogni volta che WordPress salverà un post chiamerà questa funzione:

// salva la funzione di dati di campo personalizzati save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Qui verifichiamo se ci sono dati di post chiamati "sitelink", che è il nome del nostro campo. Se c'è un sitelink, salviamolo.

Dopo che tutto è a posto, ecco come apparirà la tua nuova pagina di testimonianze:

new-testimonial

Caricamento dei nostri dati personalizzati

Ora abbiamo bisogno di caricare i nostri articoli, e useremo la funzione get_posts (), principalmente perché abbiamo solo dati semplici, quindi non abbiamo bisogno di un ciclo WP appropriato (che aggiungerebbe molte chiamate DB e davvero non ne ho bisogno).

Quindi, prima creiamo una funzione per ottenere il link del nostro sito, se ce n'è.

// restituisce l'URL per una funzione di post get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); return $ urllink; }

Ora, possiamo avviare la funzione shortcode. Un modo semplice per impostare e convalidare i dati dello shortcode è creare gli attributi per il loop come array, quindi possiamo aggiungere nuovi elementi quando ne abbiamo bisogno, come questo:

// registrazione del codice funzione per mostrare la funzione di testimonianze load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // ottenere tutte le testimonianze $ posts = get_posts ($ args); // HTML OUTPUT} add_shortcode ("testimonianze", "load_testimonials");

Come puoi vedere, gli attributi shortcode caricati e passati all'array $ args quando vengono convalidati, nel formato richiesto da WordPress, così possiamo caricare i post che li utilizzano.

Ora dobbiamo aggiungere un po 'di codice HTML, seguendo la struttura predefinita di flexslider. Ecco come apparirà:

echo '<div>'; echo '<ul>'; foreach ($ post come $ post) {// get thumb image $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); echo '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</ h2>'; if (! empty ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> Visita il sito </a> </ p>'; } echo '</ li>'; } echo '</ ul>'; echo '</ div>';

Aspetta, ma perché dovremmo creare il codice HTML all'interno della funzione PHP? Questo perché possiamo caricare il contenuto in modo condizionale solo se l'utente ha aggiunto contenuti, quindi non avrai tag HTML vuoti, solo in attesa di rovinare il tuo layout.

Che mi dici della barra laterale?

La maggior parte delle persone vuole solo mostrare testimonianze nella barra laterale, e questo plugin non funzionerà molto bene poiché i widget di testo non elaborano codici brevi. C'è una soluzione semplice per questo, basta aggiungere questo nel tuo codice:

add_filter ('widget_text', 'do_shortcode');

Quali sono le prospettive?

Ti è piaciuto questo tutorial? Cosa vorresti aggiungere come opzione per il tuo shortcode testimonial? Hai qualche idea per i post futuri? Facci sapere usando la sezione commenti!

A proposito di Rochester Oliveira

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

Collegare: