Share
Oggi cambierai il tuo portafoglio semplice in qualcosa di incredibile con la magia di Quicksand di Razorjack.
Hai mai desiderato usare il plugin jQuery Quicksand? Hai mai provato a implementarlo con WordPress? Ma, trovato un incubo per fare entrambe le cose? Bene, passerò attraverso una semplice guida passo-passo per farti passare da un tema WordPress vuoto ad un bellissimo portfolio personalizzato con l'uso di Quicksand. Userò un tema personalizzato che è stato rimosso per gli scopi di questo tutorial insieme a WordPress 3.0+.
Quindi apri il tuo editor di testo preferito e cominciamo!
Con WordPress, siamo in grado di creare tipi di post personalizzati in cui possiamo gestire tutti i nostri contenuti. Creeremo un tipo di messaggio personalizzato per archiviare tutti gli elementi del nostro portfolio in una sezione amministrativa dedicata.
Per una facile gestione del codice, iniziamo creando una cartella chiamata portafoglio e un file PHP chiamato portafoglio-post-types.php (o qualsiasi cosa tu trovi adatta).
Una volta creato un file, aggiungiamo del codice ...
Iniziamo creando una funzione:
Ora che abbiamo creato la nostra funzione vuota, aggiungiamo del codice per fare in modo che questa funzione faccia qualcosa di speciale. Innanzitutto, crea le etichette per il nostro tipo di post personalizzato. Inserisci il seguente pezzo di codice nel nostro post_type funzione:
$ labels = array ('name' => __ ('Portfolio'), 'singular_name' => __ ('Portfolio'), 'rewrite' => array ('slug' => __ ('portfolio')), ' add_new '=> _x (' Aggiungi elemento ',' portfolio '),' edit_item '=> __ (' Modifica elemento del portafoglio '),' new_item '=> __ (' Nuovo elemento del portafoglio '),' view_item '=> __ ('Visualizza portfolio'), 'search_items' => __ ('Portafoglio di ricerca'), 'not_found' => __ ('Nessun elemento del portfolio trovato'), 'not_found_in_trash' => __ ('Nessun elemento del portfolio trovato nel cestino') ), 'parent_item_colon' => ");Una ripartizione del codice che abbiamo appena scritto:
La variabile 'labels' è una serie di stringhe che rappresentano il tuo tipo di post, ognuna delle stringhe è un testo che viene emesso per la funzione specifica.
Accentsconagua
nome - La forma plurale del nome del tuo tipo di post.singular_name - La forma singolare del nome del tuo tipo di post.riscrivere - Riscrivi i permalink con questo formato. aggiungere nuova - La voce di menu per aggiungere un nuovo post.edit_item - L'intestazione mostrata quando si modifica un post.nuovo oggetto - Mostrato nel menu dei preferiti nell'intestazione dell'amministratore.view_item - Mostrato accanto al permalink sulla schermata di modifica del post.search_items - Pulsante di testo per la casella di ricerca nella schermata di modifica dei post.non trovato - Testo da visualizzare quando nessun messaggio viene trovato tramite la ricerca nell'admin.not_found_in_trash - Testo da visualizzare quando nessun messaggio è nel cestino.parent_item_colon - Usato come etichetta per un post genitore nella schermata di modifica dei post. Utile solo per i tipi di messaggi gerarchici.Quindi, crea gli argomenti per il nostro tipo di post personalizzato. Inserisci il seguente pezzo di codice nel nostro post_type funzione:
$ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type '=>' post ',' hierarchical '=> false,' menu_position '=> null,' supports '=> array (' title ',' editor ',' thumbnail ')); etichette - Una serie di etichette per questo tipo di post.pubblico - Meta argomento utilizzato per definire i valori predefiniti per public_queriable, show_ui, show_in_nav_menus ed exclude_from_search.publicly_queryable - Se è possibile eseguire query di tipo post dal front-end.show_ui - Se generare un'interfaccia utente predefinita per la gestione di questo tipo di post.query_var - False per impedire query o valore stringa della query var da utilizzare per questo tipo di post.riscrivere - Riscrivi i permalink con questo formato.capability_type - La stringa da utilizzare per creare funzionalità di lettura, modifica ed eliminazione.gerarchica - Se il tipo di post è gerarchico. Consente di specificare il genitore.menu_position - La posizione nel menu ordina che il tipo di messaggio debba apparire nell'amministratore.supporti - Un alias per chiamare direttamente add_post_type_support ().Ulteriori informazioni su add_post_type_support nel codice WordPress
Ora il nostro tipo di post è configurato con le impostazioni, abbiamo bisogno di registrare il tipo di post. Registriamo il nostro tipo di post inserendo il seguente codice nel nostro post_type funzione:
register_post_type (__ ('portfolio'), $ args); Ora abbiamo creato il nostro tipo di post personalizzato. Formattiamo l'output, in modo che possiamo ottenere messaggi user-friendly. Inizia creando un'altra funzione all'interno della nostra portafoglio-post-type.php file.
// function: portfolio_messages BEGIN function portfolio_messages ($ messages) $ messages [__ ('portfolio')] = array (0 => ", 1 => sprintf (('Portfolio Updated. Visualizza portfolio'), esc_url (get_permalink ( $ post_ID))), 2 => __ ('Campo personalizzato aggiornato.'), 3 => __ ('Campo personalizzato eliminato.'), 4 => __ ('Portfolio aggiornato.'), 5 => isset ($ _GET ['revision'])? Sprintf (__ ('Portfolio ripristinato a revisione da% s'), wp_post_revision_title ((int) $ _ GET ['revision'], false)): false, 6 => sprintf (__ (' Portfolio Published. View Portfolio '), esc_url (get_permalink ($ post_ID))), 7 => __ (' Portfolio Saved. '), 8 => sprintf (__ (' Portfolio Submitted. Preview Portfolio '), esc_url (add_query_arg ( 'preview', 'true', get_permalink ($ post_ID)))), 9 => sprintf (__ ('Portfolio Scheduled For: % 1 $ s. Preview Portfolio '), date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ (' Portfolio Draft Aggiornato. Preview Portfolio '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID))))); restituire $ messaggi; // function: portfolio_messages END Quello che abbiamo appena fatto è creare una funzione chiamata portfolio_messages che prende una discussione chiamata $ messages. Seguendo questo, stiamo creando una variabile che memorizza una matrice per tutti i nostri messaggi. Lasciamo "0" vuoto nel nostro array perché iniziamo la nostra indicizzazione a 1 con i nostri messaggi. Quindi, alla fine, restituisci il nostro array alla nostra funzione.
Infine, dobbiamo creare la nostra tassonomia. Inizia creando un'altra funzione chiamata portfolio_filter e inserisci il seguente codice:
// function: portfolio_filter Funzione BEGIN portfolio_filter () registro_taxonomy (__ ("filtro"), array (__ ("portfolio")), array ("hierarchical" => true, "label" => __ ("Filtro") , "singular_label" => __ ("Filtro"), "rewrite" => array ('slug' => 'filter', 'hierarchical' => true))); // function: portfolio_filter END Iniziamo registrando la nostra tassonomia e quindi applicando la tassonomia al nostro tipo di post personalizzato portafoglio. Successivamente, applichiamo le impostazioni finali della tassonomia e inseriamo le etichette create. Il motivo per cui stiamo creando una tassonomia è perché lo useremo come chiave di riferimento quando smistiamo il nostro portafoglio con Quicksand.
Ora che tutto il nostro tipo di post personalizzato è completo insieme alla formattazione corretta e alla nostra tassonomia, dobbiamo finalmente inizializzare tutto il nostro codice in modo che venga visualizzato nell'amministratore. Iniziamo aggiungendo il seguente codice in fondo al nostro file:
add_action ('init', 'post_type'); add_action ('init', 'portfolio_filter', 0); add_filter ('post_updated_messages', 'portfolio_messages'); Una volta che abbiamo inserito questo, abbiamo quindi bisogno di aprire il nostro functions.php file e inserisci la seguente riga di codice:
includere ( "portafoglio / portafoglio-post-types.php");
Dobbiamo includere il nostro tipo di portafoglio personalizzato nel nostro functions.php file per lo script da eseguire quando vengono chiamate le funzioni del tema WordPress. Ora vedrai nel tuo pannello di amministrazione una sezione intitolata Portafoglio con 3 voci di navigazione secondaria denominate "Portafoglio", "Aggiungi elemento" e "Filtro".
Ora abbiamo le nostre intere impostazioni del portafoglio complete, abbiamo bisogno di produrre gli articoli del nostro portafoglio. Iniziamo questo creando un nuovo file PHP chiamato portfolio.php. Innanzitutto aggiungiamo alcuni elementi essenziali per la creazione di un modello di pagina:
// Aggiungeremo il nostro contenuto più tardi
Ora, abbiamo creato il nostro modello di pagina fondamentale, abbiamo bisogno di compilare il nostro portfolio. Dobbiamo prima creare una pagina che funga da nostra pagina Portfolio, quindi vai al Pagine -> Aggiungi nuovo nella nostra Dashboard. Sul lato destro, vedrai una scatola intitolata Attributi della pagina con una discesa di Modello predefinito, selezionare il modello desiderato che si desidera utilizzare nel nostro caso portafoglio dovrebbe essere selezionato e quindi selezionare pubblicare.
Ora, torniamo alla modifica del nostro modello di pagina del Portfolio e iniziamo a inserire il filtro per il nostro portafoglio. Innanzitutto, iniziamo avvolgendo il filtro in un elenco non ordinato e ciascuna delle categorie sarà un elemento nella nostra lista.
Aggiungiamo un po 'di PHP al nostro filtro per generare automaticamente le categorie di filtri che vengono utilizzate all'interno del nostro portafoglio.
0) foreach ($ termini come $ term) $ i ++; $ term_list. = '
Quello che stiamo facendo qui è inizializzare la tassonomia che desideriamo ottenere, nel nostro caso filtro. In secondo luogo, impostare un conteggio con le nostre categorie per incrementare su ogni elemento all'interno del nostro filtro, quindi applicare un'istruzione condizionale per verificare se il conteggio che abbiamo impostato è inferiore a 0; ciò significa che se non ci sono categorie nel filtro o nessuna categoria assegnata a un elemento del portfolio, non verrà prodotto nulla. Se ci sono categorie nel nostro filtro, allora vogliamo modificare l'output per ciascun elemento.
Facciamo questo dalla seguente riga all'interno del nostro segmento di codice:
$ term_list. = '
Stiamo creando un elemento di elenco per adattarlo alla nostra lista non ordinata, quindi impostando "href" su un obiettivo vuoto perché Quicksand gestirà l'organizzazione del contenuto, quindi impostiamo il nostro nome di classe sullo slug dell'elemento del portfolio per un riferimento coerente, e infine emettendo il nome della categoria all'interno dei nostri filtri.
Brillante, ora abbiamo implementato un filtro dinamico. Ora pubblicheremo gli articoli del nostro portafoglio. Iniziamo a interrogare il nostro database per ottenere tutti i post per il tipo di post del portfolio e impostare il nostro ciclo WordPress. Iniziamo impostando un nuovo oggetto WP_Query e assegnandogli i parametri corretti.
'portfolio', 'posts_per_page' => '- 1')); ?>
Assegniamo il nostro oggetto WP_Query a una variabile in modo che possiamo fare riferimento alla nostra query quando inizializziamo il nostro Loop. Impostiamo il nostro tipo di post su portafoglio quindi interrogiamo solo il nostro tipo di post personalizzato che abbiamo creato in precedenza e infine impostato il posts_per_page a -1. Usiamo -1 in modo che non ci siano limiti fissi alla quantità di messaggi per pagina, pertanto visualizziamo tutti gli articoli del portfolio, se volessimo potremmo inserire anche qualsiasi numero e mostrerebbe solo la quantità di articoli del portfolio che è stata inserita qui.
Ora che abbiamo un oggetto query a cui possiamo fare riferimento, impostiamo il nostro Loop per generare gli elementi del nostro portfolio. Iniziamo inserendo il seguente codice:
have_posts ()): while ($ wpbp-> have_posts ()): $ wpbp-> the_post (); ?>
Prima di iniziare a inserire contenuti nel nostro ciclo, creeremo le nostre immagini in primo piano. Apri il tuo functions.php file e aggiungeremo alcune dimensioni di immagine personalizzate da produrre per ciascun articolo del portfolio.
Controlliamo prima se la versione corrente di WordPress gestisce il immagine in primo piano funzionalità e quindi configurare alcune impostazioni generali affinché funzioni correttamente. Aggiungiamo il supporto per il post-miniature e imposta una dimensione predefinita di 56 px per 56 px.
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (56, 56, true); Quindi vogliamo aggiungere il nostro ridimensionamento personalizzato delle miniature. Inserisci il seguente codice su una riga di seguito: set_post_thumbnail_size
add_image_size ('portfolio', 295, 150, true); Questo metodo consente di creare le proprie dimensioni di anteprima prima impostando il nome di riferimento per la miniatura, quindi la larghezza e l'altezza e, infine, se la miniatura deve ritagliare l'immagine per adattarla alle dimensioni specificate. È possibile modificare le dimensioni dell'immagine in primo piano per adattarla al layout; con lo scopo di questo tutorial ho un layout di griglia a 3 colonne.
Ora che abbiamo impostato la nostra immagine in primo piano, torneremo al nostro modello di pagina del portfolio e forniremo l'immagine in primo piano.
Poiché l'organizzazione per ciascun articolo del portfolio viene gestita al meglio da una lista non ordinata, prima ne creeremo una e quindi pubblicheremo la nostra immagine in primo piano che abbiamo appena impostato. Inserisci il seguente codice all'interno del tuo loop WordPress:
">
Inizialmente verifichiamo se il tema supporta il miniature funzione. Se il tema supporta questa funzione, verrà visualizzata l'immagine della funzione nell'anteprima dedicata che abbiamo specificato in precedenza. Dopo aver emesso l'immagine in primo piano, emettiamo il titolo dell'elemento del portfolio direttamente sotto l'immagine.
Dobbiamo modificare i diversi elementi di ciascuna voce dell'elenco di portfolio per garantire che il riferimento per ciascun portafoglio sia corretto rispetto alle categorie a cui è assegnato l'articolo. Per questo, dovremo prima ottenere le categorie dalla nostra tassonomia. Inserisci il seguente codice all'interno del tuo loop:
Successivamente, aggiungeremo alcuni attributi al nostro elemento list (Li). Iniziamo aggiungendo a Dati-id alla nostra voce di elenco, per fornire un'identità unica a ciascuno degli articoli del portfolio. Stiamo anche andando ad aggiungere un tipo di dati; questo fungerà da nostro riferimento al nostro filtro. Sostituiamo il nostro elemento dell'elenco di apertura (Li) con il seguente codice:
Applichiamo un conteggio al nostro Dati-id, e durante il looping di ogni elemento, il conteggio verrà aumentato (aggiungeremo il conteggio a breve). Quindi eseguiamo un ciclo su ogni categoria nella nostra tassonomia e applichiamo un'espressione regolare per trovare gli spazi e sostituirla con un "-" per abbinare lo slug della categoria e infine inserire uno spazio vuoto alla fine, quindi siamo in grado di applicare più di una categoria per un elemento del portfolio.
Infine, ci assicureremo di incrementare il conteggio e di fornire un riferimento univoco a ciascuno degli elementi del nostro portafoglio. Dobbiamo aggiungere il seguente codice appena prima di chiudere il ciclo:
">
Stiamo facendo progressi ora, ma prima di continuare dobbiamo andare a scaricare alcuni script jQuery. Abbiamo bisogno di scaricare i seguenti script:
Abbiamo anche bisogno di creare un file JavaScript per gestire tutte le nostre jQuery personalizzate che scriveremo a breve. Quindi creiamo un file JavaScript vuoto chiamato jquery.custom.js. Ora che abbiamo tutti i nostri script essenziali, apriamo il nostro functions.php e creare una funzione vuota chiamata register_js. Una volta che avremo la nostra funzione vuota, inseriremo i nostri script usando i metodi wp_register_script e wp_enqueue_script. Innanzitutto, dobbiamo verificare che non siamo nell'amministratore per garantire che gli script vengano caricati solo sul front-end. Inserisci il seguente codice nella nostra funzione:
// Registra la nostra funzione scripts register_js () if (! Is_admin ()) wp_register_script ('quicksand', get_template_directory_uri (). '/Js/jquery.quicksand.js', 'jquery'); wp_register_script ('easing', get_template_directory_uri (). '/js/jquery.easing.1.3.js', 'jquery'); wp_register_script ('custom', get_template_directory_uri (). '/js/jquery.custom.js', 'jquery', '1.0', vero); wp_enqueue_script ('jquery'); wp_enqueue_script ('quicksand'); wp_enqueue_script ('easing'); wp_enqueue_script ('custom'); Prima con wp_register_script specifichiamo un handle come nostro primo argomento di riferimento quando accodiamo gli script, quindi aggiungiamo il link sorgente allo script come secondo argomento (ciò vale per ogni registrazione di uno script). Specifichiamo anche jquery come dipendenza per caricare la versione inclusa di jQuery di WordPress quando accodiamo lo script.
Una volta registrati tutti i nostri script, li accodiamo usando wp_enqueue_script. Passiamo tutte le maniglie che abbiamo usato quando ci siamo registrati come riferimento per accodare i nostri script. Infine, dobbiamo inizializzare la nostra funzione aggiungendo il seguente codice nel nostro functions.php file:
add_action ('init', 'register_js'); Ora che abbiamo tutti i nostri script in atto, possiamo iniziare a scrivere il nostro script personalizzato jQuery per la gestione di Quicksand. Apriamo il nostro jquery.custom.js script e impostiamo l'ambiente inserendo il seguente codice:
jQuery (document) .ready (function () // Inseriremo lo script di Quicksand qui dentro; // FINE DEL DOCUMENTO
Ora abbiamo la nostra struttura di script, creeremo una funzione chiamata portfolio_quicksand e si esegue solo se esiste il plugin Quicksand.
function portfolio_quicksand () // Tutte le nostre movimentazioni di sabbie mobili avverranno in questa funzione if (jQuery (). quicksand) portfolio_quicksand ();
Analizzerò quanto segue in piccoli passi per farti capire tutto ciò che sta accadendo quando crei un portafoglio Quicksand. Iniziamo impostando le nostre variabili. Inserisci il seguente codice nel nostro portfolio_quicksand funzione:
var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems;
Useremo queste variabili più frequentemente, quindi è sempre un buon modo per ottenere un solido fondamento delle variabili impostate. In seguito assegneremo le nostre variabili:
$ filter = $ ('. filter li.active a'). attr ('classe'); $ filterLink = $ ('. filter li a'); $ container = $ ('ul.filterable-grid'); $ containerClone = $ container.clone (); Per prima cosa impostiamo il nostro filtro sulla classe elenco non ordinato dal nostro modello di pagina del portfolio. In secondo luogo, istituiamo a filterLink; questo fungerà da elemento cliccato all'interno del nostro filtro. Quindi dobbiamo assegnare il nostro contenitore degli articoli del nostro portfolio e, infine, richiedere una versione clonata del nostro contenitore, per manipolare i dati con Quicksand.
Successivamente, scriveremo la nostra funzione click, quindi quando un utente seleziona una categoria il contenitore dovrebbe essere manipolato e l'output del contenuto dovrebbe essere visualizzato. Iniziamo chiamando una funzione clic sul nostro filterLink:
$ filterLink.click (function (e) // Ora aggiungeremo il contenuto per questa funzione ...);
Ora gestiamo lo stato attivo dell'elemento della lista. Iniziamo rimuovendo prima qualsiasi classe con uno stato attivo corrente, quindi cercando attraverso il filtro e dividendo il filtro in elementi separati e infine applicando una classe attiva all'elemento cliccato (categoria):
$ ('. filtro li'). removeClass ('attivo'); $ filter = $ (this) .attr ('class'). split ("); $ (this) .parent (). addClass ('active'); Questo ti aiuterà quando lo styling del filtro, perché sarete in grado di fornire attivo indica per quando un utente ha selezionato una categoria.
Andando avanti, gestiremo una condizione per il filtraggio dei nostri dati. Iniziamo prima controllando se tutti è stato selezionato Se tutti è stato selezionato quindi mostra tutti gli elementi all'interno del nostro contenitore, altrimenti visualizza gli articoli all'interno del contenitore che è stato selezionato dal filtro.
In precedenza, quando stavamo creando il nostro modello di pagina del portfolio e abbiamo assegnato un tipo di dati a ciascuno degli articoli del nostro portfolio, è qui che lo utilizzeremo come chiave di riferimento per trovare i nostri dati selezionati.
if ($ filter == 'all') $ filteredItems = $ containerClone.find ('li'); else $ filteredItems = $ containerClone.find ('li [tipo-dati ~ =' + $ filtro + ']'); Infine, chiamiamo il metodo Quicksand e passiamo al nostro filteredItems e tutte le nostre opzioni di animazione:
$ container.quicksand ($ filteredItems, duration: 750, easing: 'easeInOutCirc', adjustHeight: 'dynamic');
function portfolio_quicksand () // Impostazione delle nostre variabili var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems // Imposta il nostro filtro $ filter = $ ('. filter li.active a'). attr ('classe'); // Imposta il nostro link di filtro $ filterLink = $ ('. Filter li a'); // Imposta il nostro contenitore $ container = $ ('ul.filterable-grid'); // Clona il nostro contenitore $ containerClone = $ container.clone (); // Applicare le nostre sabbie mobili per lavorare su una funzione click // per ciascuno degli elementi di filtro li link $ filterLink.click (function (e) // Rimuovi la classe attiva $ ('. Filter li'). RemoveClass ('attivo '); // Divide ciascuno degli elementi del filtro e sostituisce il nostro filtro $ filter = $ (this) .attr (' class '). Split ("); // Applica la classe' active 'al link cliccato $ (questo ) .parent (). addClass ('active'); // Se 'all' è selezionato, visualizza tutti gli elementi // else restituisce tutti gli elementi a cui fa riferimento il tipo di dati if ($ filter == 'all') $ filteredItems = $ containerClone.find ('li'); else $ filteredItems = $ containerClone.find ('li [tipo-dati ~ =' + $ filtro + ']'); // Infine chiama la funzione Quicksand $ container .quicksand ($ filteredItems, // La durata della durata dell'animazione: 750, // L'effetto di andamento durante l'animazione di easing: 'easeInOutCirc', // Regolazione dell'altezza impostata su dynamic adjustHeight: 'dynamic';); Incredibile, ora dovresti avere un portafoglio completamente funzionante di Quicksand, ma non fermiamoci qui. Inserirò un ulteriore extra, questo è totalmente opzionale ma potrebbe diventare una funzionalità preferita, e questo è lightbox. Utilizzeremo il plugin jQuery chiamato PrettyPhoto per la nostra integrazione di Lightbox.
La prima cosa che faremo è scaricare il plugin PrettyPhoto.
Una volta scaricati i nostri file PrettyPhoto, copiamo prima le immagini di PrettyPhoto, che saranno nel immagini cartella e quindi è necessario copiare la cartella intitolata Bella foto nel nostro tema. Abbiamo anche bisogno di copiare il CSS e il file JavaScript di PrettyPhoto, quindi copiamolo nelle cartelle appropriate nel nostro tema.
Ora che abbiamo tutti i nostri file in atto, dobbiamo inizializzarli all'interno del nostro tema. All'interno del nostro functions.php file, creeremo un'altra funzione per gestire i nostri stili e chiameremo questa funzione register_css. Quindi registreremo i nostri stili e accoderemo i nostri stili, quindi inserisci il seguente codice nel tuo functions.php file:
// Registra la nostra funzione di stili register_css () if (! Is_admin ()) wp_register_style ('prettyPhoto', get_template_directory_uri (). '/Css/prettyPhoto.css'); wp_enqueue_style ('prettyPhoto'); add_action ('init', 'register_css'); Abbiamo tutti i nostri file sul posto e sono stati inizializzati dal nostro tema. Ora dobbiamo fare uso di questo e implementare Lightbox nel nostro tema. Apriamo il nostro portfolio.php (modello di pagina del portfolio) e aggiungere un codice alla nostra Immagine in primo piano.
Per prima cosa, dobbiamo ottenere un'immagine grande dell'immagine in primo piano che è stata impostata. Questo fungerà quindi da immagine a grandezza intera quando l'utente fa clic sull'immagine e carica PrettyPhoto. All'interno del nostro ciclo WordPress, dobbiamo inserire il seguente codice:
Il codice che abbiamo inserito troverà il post corrente all'interno del loop e trova la fonte originale dell'immagine e poi trova il file dimensione piena versione dell'immagine. Una volta che abbiamo restituito la nostra immagine a dimensione intera, forzeremo l'immagine ad essere memorizzata nell'indice dell'array di 0. Questo è usato per non eseguire sostituzioni o duplicati con le nostre immagini a dimensione intera.
Una volta che avremo la nostra immagine a grandezza naturale accessibile, inizializzeremo PrettyPhoto sulla nostra immagine in primo piano. Il seguente codice collegherà il dimensione piena immagine dell'immagine in primo piano dell'articolo del portfolio e passa il riferimento a PrettyPhoto, sostituisci il codice in cui hai creato l'immagine in primo piano con il seguente:
">
Bene, abbiamo tutti i nostri file e script in atto, abbiamo l'immagine a dimensione intera per la nostra immagine in primo piano e abbiamo fatto riferimento al nostro immagine in primo piano alla nostra immagine a grandezza naturale con PrettyPhoto. Successivamente, dobbiamo scrivere il nostro JavaScript per far apparire la Lightbox e lavorare.
Torniamo al nostro jquery.custom.js file e crea un'altra funzione vuota per gestire il nostro PrettyPhoto:
function lightbox () // Il funzionamento della nostra lightbox verrà aggiunto ora ... if (jQuery (). prettyPhoto) lightbox ();
Ora che abbiamo la nostra funzione, inizializzeremo PrettyPhoto. Lo facciamo aggiungendo il seguente codice all'interno del nostro ID funzione:
jQuery ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (animationSpeed: 'fast', slideshow: 5000, theme: 'pp_default', show_title: false, overlay_gallery: false, social_tools: false); Puoi leggere la documentazione completa di tutti i parametri che PrettyPhoto accetterà nell'uso del plugin su: PrettyPhoto jQuery Lightbox Clone
Quindi, è tutto fatto! Implementazione lightbox nel tuo tema WordPress, ma aspetta fammi indovinare quando fai clic sul filtro e usa Quicksand; la Lightbox non funziona più. Questo perché abbiamo bisogno di alterare il nostro script Quicksand e di passare un altro piccolo pezzo di codice per assicurarci che Lightbox funzioni anche quando filtriamo attraverso il nostro portfolio.
Quindi sistemiamo questo piccolo problema aggiungendo il seguente script al nostro portfolio_quicksand funzione all'interno del nostro jquery.custom.js file:
$ container.quicksand ($ filteredItems, function () lightbox (););
Quello che facciamo qui è richiamare il plugin Quicksand ancora una volta e passare una funzione all'interno di questa chiamata alla nostra funzione Lightbox. Quindi ogni volta che Quicksand filtra il contenuto, la funzione Lightbox vie
