Share
prettyPhoto è un plugin lightbox realizzato da Stéphane Caron. Oggi impareremo come spedire il plugin con i tuoi temi WordPress.
Offrire un'opzione lightbox integrata invece di far scaricare agli utenti un plug-in ha molti vantaggi per gli autori dei temi. Per me è in grado di progettare il lightbox in base ai miei temi WordPress. È anche una bella funzionalità da avere a disposizione degli utenti del tuo tema, ovviamente dovresti anche dare loro un'opzione per disabilitare la funzionalità. Con quello detto andiamo ad esso.
Vai ai margini per-errors.com e scarica il plug-in. Una volta ottenuto, creeremo una nuova struttura di directory per il plugin per semplificare le cose da soli.
Per prima cosa cancelliamo alcune cose di cui non abbiamo bisogno. Nella cartella images elimina tutto tranne la cartella prettyPhoto e il suo contenuto. Nella cartella principale, elimina il file xhr_response.html e index.html. Ora sposta jquery.prettyPhoto.js dalla cartella js nella cartella root root ed elimina la cartella js.
Infine, rinomina la cartella in prettyPhoto e carica la cartella nella directory del tema, probabilmente hai già una directory js o scripts, quindi caricala su questo, per questo tutorial supponiamo che sia nel tuo tema / js
Prima di caricare i file plugin nel nostro tema, dobbiamo caricare jQuery. Useremo la versione di jQuery ospitata da Google utilizzando il metodo condiviso su Digging in Wordpress, quindi aggiungiamo lo snippet alle nostre funzioni.php.
Accentsconagua
if (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); function register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', "http". ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ( 'jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ( 'prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ( 'customprettyPhoto_script'); Potresti considerare i vantaggi e gli svantaggi dell'utilizzo di una CDN per servire jQuery. WordPress viene fornito con una copia di jQuery, ma l'uso della versione ospitata da Google può migliorare le prestazioni del tuo sito. Se sei un autore di temi, mi permetto di usare la versione spedita. Guarda la discussione su un altro tutorial per aiutarti a decidere.
Noterai che abbiamo aggiunto un altro file chiamato customprettyPhoto.js. Questo è il punto in cui renderemo il plugin piacevole con le nostre immagini post e inizializzandolo. Quindi creiamo quel file e inseriscilo nella tua directory prettyPhoto. OK, inizializziamo prettyPhoto.
Dobbiamo aggiungere una riga di jQuery per aggiungere la prettyPhoto prettyPhoto di classe necessaria ai tag di ancoraggio che circondano le nostre immagini post. Dal momento che stiamo parlando di jQuery, usiamolo per realizzare questo. Aggiungi il seguente a destra dopo $ (document) .ready (function () dove ci assicuriamo che la pagina sia caricata.
$ ('. entry-content a'). ha ('img'). addClass ('prettyPhoto'); Sostituisci il contenuto di .entry con qualsiasi nome di classe o ID con cui hai avvolto il contenuto del tuo post e dovresti aver aggiunto correttamente la classe a tutti i link che avvolgono le immagini del tuo post. Se dai un'occhiata alla documentazione di prettyPhoto vedrai che dice di usare un attributo rel ma abbiamo usato una classe. In questo modo si evitano errori di convalida nel nostro codice HTML perché gli attributi rel possono avere solo determinati valori consentiti in base alle specifiche HTML5.
Quindi vogliamo abilitare l'opzione di descrizione di prettyPhoto. Dobbiamo superare un piccolo ostacolo, ovvero che prettyPhoto vuole che aggiungiamo gli attributi del titolo ai nostri tag di ancoraggio che verranno utilizzati per le descrizioni, ma WordPress aggiunge titoli ai tag immagine. Per risolvere questo, scriveremo un paio di righe di jQuery che prenderanno il tag del titolo dell'immagine e imposteranno lo stesso titolo sul tag di ancoraggio che avvolge l'immagine.
$ ('. entry-content a img'). click (function () var desc = $ (this) .attr ('title'); $ ('. entry-content a'). has ('img') .attr ('title', desc);); Qui attiviamo una funzione quando l'utente fa clic su un'immagine post. Prendiamo il tag title dell'immagine e lo colleghiamo all'ancora. Questo passaggio rende molto più semplice per gli utenti del tema aggiungere descrizioni. Se vuoi disabilitare del tutto la funzionalità, assicurati di impostare ogni titolo di ancoraggio come vuoto, se manca completamente, poiché non c'è nemmeno un titolo vuoto, prettyPhoto mostrerà invece "undefined".
Abbiamo bisogno di aggiungere il CSS per prettyPhoto al tema. Torna al tuo file functions.php e aggiungi la seguente riga in alto:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Dal momento che abbiamo mantenuto le immagini e i CSS nelle loro cartelle originali e relativamente l'una all'altra così come erano in origine, non dobbiamo preoccuparci di immagini rotte.
Diamo un'occhiata a come aggiungere didascalie e titoli che useremo prettyPhoto. Guardando l'immagine qui sopra possiamo vedere la relazione tra il tag alt immagine post e il tag titolo link che possiamo impostare quando si aggiunge un'immagine a un post o una pagina.
E questo è tutto, abbiamo aggiunto prettyPhoto al nostro tema. Assicurati di leggere la documentazione del plugin per ulteriori usi e opzioni. PrettyPhoto può gestire più di semplici immagini, funziona con video, ajax e altro. Inoltre viene fornito con una manciata di temi che possono adattarsi al tuo tema fuori dagli schemi o almeno darti un buon punto di partenza.
