Tutorial su WordPress: Come creare un fantastico Flip Plugin per la pagina

Articolo scritto da:
  • Inbound Marketing
  • Aggiornato: Sep 15, 2014

Nota: non supportiamo più questo plugin WP poiché l'autore non sta scrivendo per noi per ora.

A partire da oggi, ogni settimana presenteremo un fantastico tutorial di programmazione, che ti insegna come fare cose personalizzate usando WordPress, dalla base all'avanzato. Oggi creeremo un plug-in (quindi imparerai i passaggi di base su questo) per generare una galleria "page flip", usando JS.

Scommetto che hai visto uno di quelli nei tuoi primi giorni web, ma quelli sono stati per lo più realizzati con il flash, che ora è piuttosto deprecato (ha ancora il suo valore, ma non è più l'opzione migliore per questo genere di cose).

La funzionalità di base verrà creata una nuova tipo di galleria basato su poche immagini e le loro dimensioni, tramite shortcode.

Iniziamo allora!

Zip e installazione

Il modo migliore per vederlo in azione è installarlo da solo. Puoi scaricarlo qui. Installa e attiva il plugin, quindi tutto quello che devi fare è aggiungere lo shortcode in una pagina, come questo:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width = "300" height = "225" display = "double"]

Quick Preview

E questo è il tipo di risultato che otterrai:

Effetto Flipbook

Ma che tipo di magia nera va lì? Beh, in realtà è piuttosto semplice. Impariamo come creare qualcosa come questo.

L'intestazione

Prima di tutto dovrai creare una nuova cartella e un nuovo file .php. A questo punto sarebbe fantastico se si dispone di un ambiente di test, in modo da poter rompere e testare cose.

Il file e la cartella devono avere un nome semplice e univoco, in modo da evitare conflitti con i plugin esistenti. Quindi il contenuto di base del nostro file è qualcosa del genere:

/ * Nome plugin: FlipBook Gallery Descrizione: crea uno shortcode per le gallerie di flipbook. Versione: 1.0 Autore: Web Revenue Blog Licenza: GPL2 * /

Abbastanza semplice, eh? Una volta creato questo file, vedrai il tuo plugin nell'elenco sotto WP admin> Plugin, e potrai attivarlo (ma se hai solo questo contenuto nel tuo file non cambierà molto il tuo sito).

Chiamare script

Ora abbiamo bisogno di includere alcune risorse esterne importanti qui. I file esterni richiesti per le funzionalità di base sono:

  • jQuery (1.9 +)
  • Script Turn.js
  • Attiva lo stile di base

Se si aggiungono semplicemente script e tag di stile, si avranno alcuni problemi. Ad esempio, la doppia chiamata jQuery probabilmente interromperà il tuo sito. Anche WordPress stesso non "saprà" di aver creato tali elementi, quindi se un altro plugin chiama di nuovo turn.js o uno stile diverso interromperà il tuo sito.

Ecco perché dovremmo sempre usare le funzioni wp_enqueue_script e wp_enqueue_style. Ecco l'utilizzo di base:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', falso); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Chiamiamo gli articoli esterni in 3 in modi diversi, eccoli qui:

  • Chiamare un elemento esistente: jQuery - Non abbiamo bisogno di passare molti parametri se sappiamo per certo che WordPress già carica questo script, gli stiamo solo dicendo "Amico, questo script DEVE essere qui altrimenti il ​​nostro codice non lo farà lavoro"
  • Creare un nuovo script - dovrai passare alcuni attributi come nome, posizione del file, elementi richiesti (in questo caso richiede jQuery), versione e se è caricato nel footer o nell'intestazione (false = header, true = footer)
  • Creare un nuovo stile - Quasi uguale al precedente, con una piccola differenza nell'ultimo attributo, che dice quale tipo di supporto digita questo stile se per

Una delle cose importanti che dovresti considerare quando chiami script esterni è se c'è più codice che dipenderà da questo plugin. Questo è fondamentalmente ciò che definisce se il tuo file verrà chiamato nell'intestazione o nel piè di pagina.

Nel nostro caso, abbiamo alcuni script aggiuntivi per configurare la galleria solo quando viene creato il suo codice HTML e questo verrà aggiunto nel corpo. Questo è il motivo per cui dobbiamo DEVE aggiungere questo script in testa, altrimenti quando il nostro codice è chiamato la funzione "svolta" non c'è ancora.

Dopo questo bel codice, dobbiamo dire a WordPress di caricarli come script, l'azione "wp_enqueue_scripts" farà questo:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Lo shortcode

Iniziamo con l'azione per creare lo shortcode. È abbastanza semplice, è sufficiente aggiungere il trigger di shortcode e la funzione che verrà eseguita:

add_shortcode ( "flip_book", "create_flip_book");

Ora dobbiamo creare la nostra funzione e ottenere i nostri attributi. Ma alcuni degli attributi possono essere opzionali, il che significa che avremo bisogno di creare valori predefiniti per loro. Potremmo creare un sacco di test se l'attributo è vuoto, ma questo è uno dei casi in cui l'operazione ternaria è migliore della normale chiamata if.

Le operazioni ternarie sono un po 'di istruzioni if ​​direttamente nel valore della variabile. Se segue questa struttura:

$ variabile = (CONDIZIONE)? "VALORE SE LA CONDIZIONE È VERA": "VALORE SE LA CONDIZIONE È FALSA";

Puoi vederli in azione nella prima parte della nostra funzione:

function create_flip_book ($ attr) {// Preparazione degli ID da elaborare $ array ['ids'] = explode ("", $ attr ['ids']); // display mode $ array ['display'] = vuoto ($ attr ['display'])? "single": $ attr ['display']; // valore standard // width $ array ['width'] = vuoto ($ attr ['width'])? 400: $ attr ['width']; // height $ array ['height'] = vuoto ($ attr ['height'])? 300: $ attr ['height'];
    // HTML e il resto del codice va qui}

Quindi dovremo creare l'HTML e la chiamata base per le nostre immagini. Un altro punto importante qui è regolare le dimensioni se stiamo usando lo stile di una rivista (dovrebbe essere 2x la larghezza poiché avremo immagini 2 anziché una):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS e Black Magic?> <Div id = "flipbook"> <? Php for ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'pieno'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, height: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?>, // singola pagina o doppia accelerazione: true, gradienti:! jQuery.isTouch,}); </ Script>

Cosa ne pensi?

Ora puoi modificarlo e modificarlo come vuoi, aggiungendo altre opzioni (dai un'occhiata ai loro fantastici esempi per avere più ispirazione), aggiustando ciò che non funziona per te o combinandolo con altri plugin.

Hai qualche concetto WordPress che vuoi imparare un po 'di più? Forse qualcosa che vuoi imparare a fare? Fateci sapere tramite i commenti e saremo lieti di includerlo in un prossimo post!

A proposito di Rochester Oliveira

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

Collegare: