Share
Astăzi, vă veți schimba portofoliul dvs. simplu în ceva uimitor cu magia Quicksand de Razorjack.
V-ați dorit vreodată să utilizați pluginul jQuery Quicksand? Ați încercat vreodată să o implementați cu WordPress? Dar a găsit un coșmar pentru a face pe amândouă? Ei bine, voi trece printr-un simplu pas-cu-pas ghid pentru a obține de la o temă WordPress goală într-un portofoliu personalizat frumos cu utilizarea Quicksand. Voi folosi o temă particularizată care a fost dezbrăcată în scopul acestui tutorial, împreună cu WordPress 3.0+.
Deci, deschideți editorul dvs. preferat de text și să începem!
Cu WordPress, suntem capabili să creăm tipuri personalizate de posturi în care să putem gestiona tot conținutul nostru. Vom crea un tip de post personalizat pentru a stoca toate articolele din portofoliu într-o secțiune dedicată administratorului.
Pentru gestionarea ușoară a codului, să începem prin crearea unui dosar numit portofoliul și un fișier PHP numit Portofoliul post-types.php (sau orice găsiți potrivit).
După ce ați creat un fișier, să adăugăm un cod ...
Să începem prin crearea unei funcții:
Acum că am creat funcția noastră necompletată, să adăugăm un cod pentru a face această funcție să facă ceva special. Mai întâi, creați etichetele pentru tipul de post personalizat. Introduceți următoarea bucată de cod în secțiunea noastră post_type funcţie:
$ etichete = array ('nume' => __ ('portofoliu'), 'singular_name' => __ ('portofoliu'), 'rewrite' add_new '=> _x (' Adăugați element ',' portofoliu '),' edit_item '=> __ (' Edit Item Portfolio '),' new_item '=> __ ("Nu se găsesc elemente de portofoliu"), "not_found_in_trash" => __ ("Nu s-au găsit obiecte de portofoliu în coșul de gunoi" ), 'parent_item_colon' => ");O defalcare a codului pe care tocmai l-am scris:
Variabila "etichete" este o serie de șiruri de caractere care reprezintă tipul postului dvs., fiecare dintre șiruri de caractere sunt text care este afișat pentru funcția respectivă.
Accentsconagua
Nume - Forma plurală a numelui tipului dvs. de postare.singular_name - Forma singulară a numelui tipului dvs. de postare.rescrie - Rescrieți permalinks cu acest format. adăuga nou - Elementul de meniu pentru adăugarea unei postări noi.edit_item - Antetul afișat când se editează un mesaj.NEW_ITEM - Afișat în meniul de preferințe din antetul adminului.Vezi obiectul - Se afișează alături de permalink în ecranul de editare postare.search_items - Textul butonului pentru caseta de căutare din ecranul de editare a postărilor.nu a fost gasit - Textul afișat când nu se găsesc postări prin căutarea în admin.not_found_in_trash - Textul care se afișează atunci când nu există postări în coșul de gunoi.parent_item_colon - Folosit ca etichetă pentru o postare părinte în ecranul de editare a postărilor. Este utilă numai pentru tipurile de posturi ierarhice.Apoi, creați argumentele pentru tipul de post personalizat. Introduceți următoarea bucată de cod în lista noastră post_type funcţie:
$ args = array ('etichete' => etichete $, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, '=>' post ',' hierarchical '=> false,' menu_position '=> null,' suport '=> array (' title ',' editor ',' thumbnail ')); etichete - O serie de etichete pentru acest tip de postare.public - Argumentul Meta utilizat pentru a defini valorile implicite pentru publicly_queriable, show_ui, show_in_nav_menus și exclude_from_search.publicly_queryable - Dacă interogările tip post pot fi efectuate de la capătul din față.show_ui - Fie pentru a genera o interfață de utilizator implicită pentru gestionarea acestui tip de postare.query_var - False pentru a împiedica interogările sau valoarea șirului interogării var să utilizeze pentru acest tip de postare.rescrie - Rescrieți permalinks cu acest format.capability_type - Șirul de folosit pentru a construi capabilitățile de citire, editare și ștergere.ierarhic - Indiferent dacă tipul postului este ierarhic. Permite specificarea părintelui.menu_position - Poziția din ordinea meniurilor ar trebui să apară în postul de administrator.suporturi - Un alias pentru a apela direct add_post_type_support ().Citiți mai multe despre add_post_type_support în Codul WordPress
Acum, tipul postului nostru este configurat cu setările, trebuie să înregistrăm tipul postării. Înregistrăm tipul postării introducând următorul cod în lista noastră post_type funcţie:
register_post_type (__ ("portofoliu"), $ args); Acum avem tipul de articol personalizat creat. Să formatem ieșirea, astfel încât să putem obține mesaje ușor de utilizat. Începeți prin a crea o altă funcție în cadrul nostru Portofoliul post-type.php fişier.
// function: portfolio_messages functie BEGIN portofoliu_mesaje ($ mesaje) $ messages [__ ('portofoliu')] = array (0 => ", 1 => sprintf $ post_ID)), 2 => __ ('Câmp personalizat actualizat.'), 3 => __ ('Câmp obligatoriu șters'), 4 => __ (' _GET ['revizia'])? Sprintf (__ ('Portofoliul restaurat pentru a revizui din% s'), wp_post_revision_title ((int) Portofoliu publicat "), esc_url (get_permalink ($ post_ID))), 7 => __ (Portofoliu salvat), 8 => sprintf (__ (Portfolio Submitted Portfolio Preview) 'preview', 'true', get_permalink ($ post_ID)))), 9 => sprintf (__ ('Portofoliu programat pentru: % 1 $ s. ($ Post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ ('Portofoliu'), date_i18n (__ Proiect actualizat Portofoliu de previzualizare "), esc_url (add_query_arg ('preview', 'true', get_permalink ($ post_ID)))))); returneaza $ mesaje; // funcția: portofoliu_mesaje END Ceea ce am făcut este să creezi o funcție numită portfolio_messages care ia un argument numit mesaje $. După aceasta, creăm o variabilă care stochează o matrice pentru toate mesajele noastre. Am lăsat "0" necompletat în matricea noastră deoarece începem indexarea la 1 cu mesajele noastre. Apoi, întoarceți-ne în final funcția noastră.
În cele din urmă, trebuie să ne creăm taxonomia. Începeți prin a crea o altă funcție numită portfolio_filter și introduceți următorul cod:
// functie: portofoliu_filter Functie BEGIN portofoliu_filter () register_taxonomy (__ ("filter"), array (__ ("portofoliu")), array ("hierarchical" => true, "label" => , "singular_label" => __ ("Filtru"), "rescrie" => array ('slug' => 'filtru', 'hierarchical' => true))); // funcția: portfolio_filter END Începem prin înregistrarea taxonomiei noastre și apoi prin aplicarea taxonomiei la tipul nostru de post particularizat portofoliul. Apoi, aplicăm setările finale ale taxonomiei și introducem etichetele create. Motivul pentru care creăm o taxonomie este că îl vom folosi ca o cheie de referință atunci când sorteazăm portofoliul nostru cu Quicksand.
Acum, că întregul tip de post personalizat este complet, împreună cu formatul corect și taxonomia proprie, trebuie să inițializăm în întregime codul nostru, astfel încât acesta să fie afișat în admin. Să începem prin adăugarea următorului cod în partea de jos a fișierului nostru:
add_action ('init', 'post_type'); add_action ('init', 'portofoliu_filter', 0); add_filter ('post_updated_messages', 'portfolio_messages'); Odată ce am introdus acest lucru, atunci trebuie să ne deschidem functions.php fișier și introduceți următoarea linie de cod:
includ ( "portofoliu / portofoliu post-types.php");
Trebuie să includem tipul de portofoliu personalizat în nostru functions.php fișier pentru ca scriptul să se execute atunci când sunt apelate funcțiile temei WordPress. Acum veți vedea în panoul de administrare o secțiune intitulată Portofoliu cu 3 elemente de sub-navigare numite "Portfolio", "Add Item" și "Filter".
Acum, avem setările întregului portofoliu completate, trebuie să scoatem produsele noastre din portofoliu. Începem acest lucru prin crearea unui nou fișier PHP numit portfolio.php. Mai întâi, să adăugăm câteva elemente esențiale pentru crearea unui șablon de pagină:
// Vom adăuga conținutul nostru mai târziu
Acum, am creat șablonul nostru fundamental de pagini pe care trebuie să-l ocupăm. Trebuie să creați mai întâi o pagină care să acționeze ca pagina noastră de portofoliu, deci mergeți la Pagini -> Adăugați noi în Tabloul de bord. În partea dreaptă, veți vedea o cutie intitulată Atribute de pagină cu o picătură de Șablonul implicit, selectați șablonul dorit pe care doriți să îl utilizați în cazul nostru portofoliul ar trebui selectată și apoi selectați publicarea.
Acum, să ne întoarcem la editarea șablonului de pagină de portofoliu și să începem să inserăm filtrul pentru portofoliul nostru. În primul rând, începem prin împachetarea filtrului într-o listă neordonată și fiecare categorie va fi un element în lista noastră.
Să adăugăm câteva filtre PHP în filtrul nostru pentru a genera automat categoriile de filtre utilizate în portofoliul nostru.
0) foreach (termenii $ ca termenul $) $ i ++; $ term_list. = '
Ceea ce facem aici este prima inițiere a taxonomiei pe care dorim să o obținem, în cazul nostru filtru. În al doilea rând, configurați un număr cu categoriile noastre pentru a ne crește cu fiecare element din filtrul nostru și apoi aplicați o declarație condiționată pentru a verifica dacă numărul pe care l-am stabilit este mai mic de 0; ceea ce înseamnă că în cazul în care nu există categorii în filtru sau nici o categorie atribuită unui element de portofoliu, nu se va emite nimic. Dacă există categorii în filtrul nostru, atunci vrem să modificăm rezultatul pentru fiecare element.
Facem acest lucru prin următorul rând în cadrul segmentului nostru de cod:
$ term_list. = '
Creăm un element de listă pentru a se încadra în lista noastră neordonată și apoi setăm href-ul la o destinație goală, deoarece Quicksand se va ocupa de organizarea conținutului, apoi vom seta numele clasei la slug al elementului de portofoliu pentru referință consecventă, și, în final, trimiterea numelui categoriei în filtrele noastre.
Brilliant, acum avem un filtru dinamic implementat. Acum ne vom expune produsele din portofoliu. Să începem interogarea bazei noastre de date pentru a obține toate posturile pentru tipul postului de portofoliu și pentru a configura buclele WordPress. Începem prin crearea unui nou obiect WP_Query și transmiterea parametrilor corecți la acesta.
'portofoliu', 'posts_per_page' => '- 1')); ?>
Atribuiți un obiect WP_Query unei variabile, astfel încât să putem face referire la interogarea noastră atunci când iniționăm bucla noastră. Am stabilit tipul postului nostru portofoliul așa că am interogat numai tipul nostru de post personalizat pe care l-am creat mai devreme și în cele din urmă setat posts_per_page la -1. Utilizăm -1 pentru a nu exista limite fixe la numărul de postări pe pagină, prin urmare afișând toate articolele de portofoliu, dacă vrem să putem introduce și un număr și ar afișa doar suma elementelor de portofoliu introduse aici.
Acum, că avem un obiect de interogare pe care îl putem referi, să ne configurați buclă pentru a extrage articolele din portofoliu. Începem prin introducerea următorului cod:
have_posts ()): în timp ce ($ wpbp-> have_posts ()): $ wpbp-> the_post (); ?>
Înainte de a începe să introducem conținut în bucla noastră, vom configura imaginile noastre prezentate. Deschide-ți functions.php fișier și vom adăuga câteva dimensiuni personalizate ale imaginilor prezentate pentru fiecare element de portofoliu.
Să verificăm mai întâi dacă versiunea curentă a WordPress se ocupă de imaginea specială și apoi configurați câteva setări generale pentru a funcționa corect. Noi adăugăm suport pentru post-miniaturi și setați o dimensiune implicită de 56px la 56px.
dacă (funcția_există ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (56, 56, adevărat); Apoi, dorim să adăugăm dimensiunea personalizată a miniaturilor personalizate. Introduceți următorul cod pe o linie de mai jos: set_post_thumbnail_size
add_image_size ("portofoliu", 295, 150, true); Această metodă vă permite să creați o dimensiune miniatură proprie setând mai întâi numele de referință pentru miniatură, apoi lățimea și înălțimea și, în final, dacă miniatura ar trebui să decupeze din greu imaginea pentru a se potrivi dimensiunii specificate. Puteți modifica dimensiunile imaginii recomandate pentru a se potrivi cu aspectul dvs. cu scopul acestui tutorial am o structură de coloană de 3 coloane.
Acum, când avem imaginea noastră specială, ne vom îndrepta spre șablonul de pagină de portofoliu și vom scoate imaginea de portofoliu.
Întrucât organizația pentru fiecare element de portofoliu este tratată cel mai bine de o listă neordonată, vom crea mai întâi una și apoi vom scoate imaginea noastră cu care ne-am configurat. Introduceți următorul cod în buclă dvs. WordPress:
„>
Verificăm inițial dacă tema acceptă miniatură funcţie. Dacă tema acceptă această caracteristică, atunci va scoate imaginea de trăsătură la miniatură dedicată pe care am specificat-o mai devreme. După ieșirea imaginii noastre prezentate, vom scoate apoi titlul articolului din portofoliu direct sub imagine.
Trebuie să optimizăm diferitele elemente ale fiecărui articol din lista de portofolii pentru a ne asigura că referința pentru fiecare portofoliu este corectă pentru categoriile la care este alocat elementul. Pentru aceasta, vom trebui mai întâi să obținem categoriile din taxonomia noastră. Introduceți în buclă următorul cod:
Apoi, vom adăuga câteva atribute elementului nostru de listă (Li). Incepem prin a adauga a date id- la elementul de listă, pentru a furniza o identitate unică fiecărui element din portofoliu. De asemenea, vom adăuga a Tip de date; aceasta va acționa ca referință la filtrul nostru. Să înlocuim elementul listei de deschidere (Li) cu următorul cod:
Aplicăm un număr pentru noi date id-, și atunci când buclele prin fiecare element, numărul va fi crescut (vom adăuga contorul în scurt timp). Apoi, bifăm peste fiecare categorie în taxonomia noastră și aplicăm o expresie regulată pentru a găsi spațiile și a le înlocui cu un "-" pentru a se potrivi cu blancul categoriei și apoi a pune în cele din urmă un spațiu gol la final, astfel încât să putem aplica mai mult de o categorie la un element de portofoliu.
În cele din urmă, vom asigura că vom crește numărul nostru și vom oferi o referință unică la fiecare dintre articolele noastre de portofoliu. Trebuie să adăugăm următorul cod chiar înainte de a termina bucla:
„>
Facem progrese acum, dar înainte de a continua, trebuie să mergem și să descărcăm câteva scripturi jQuery. Trebuie să descărcați următoarele scripturi:
De asemenea, trebuie să creați un fișier JavaScript care să se ocupe de toate jQuery personalizate pe care le vom scrie în scurt timp. Deci, să creăm un fișier JavaScript gol jquery.custom.js. Acum, că avem toate scripturile noastre esențiale, să ne deschidem functions.php și să creați o funcție necompletată numită register_js. Odată ce avem funcția necompletată, vom introduce script-urile noastre folosind metodele wp_register_script și wp_enqueue_script. În primul rând, trebuie să verificăm că nu suntem în administrație pentru a ne asigura că scripturile sunt încărcate numai în partea frontală. Introduceți următorul cod în funcția noastră:
// Înregistrați funcția de script-uri 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 ('personalizat', get_template_directory_uri () ./js/jquery.custom.js ',' jquery ',' 1.0 ', true); wp_enqueue_script ("jquery"); wp_enqueue_script ("rapid"); wp_enqueue_script ("relaxare"); wp_enqueue_script ('personalizat'); În primul rând cu wp_register_script vom specifica un mâner ca fiind primul nostru argument pentru referință atunci când enqueuing script-urile, apoi adăugați link-ul sursă la script ca al doilea argument (acest lucru se aplică la fiecare înregistrare a unui script). De asemenea, specificăm jquery ca o dependență de a încărca versiunea inclusă de WordPress a lui jQuery când încrucișăm scriptul.
Odată ce ne-am înregistrat toate scenariile, le încalcăm apoi folosind wp_enqueue_script. Transmitem toate mânerele pe care le-am folosit când ne-am înregistrat ca o referință pentru a ne enumera scripturile. În cele din urmă, trebuie să ne inițializăm funcția adăugând codul următor functions.php fişier:
add_action ('init', 'register_js'); Acum, când avem toate scenariile noastre, putem începe să scriem scriptul personalizat jQuery pentru manipularea Quicksand. Să ne deschidem jquery.custom.js script și să stabilim mediul prin introducerea următorului cod:
jQuery (document) .ready (functie () // Vom insera scriptul nostru rapid in aici); // ÎNCHEIEREA DOCUMENTULUI
Acum avem structura de script, vom crea o funcție numită portfolio_quicksand și executați numai dacă există pluginul Quicksand.
funcția portofoliu_quicksand () // Toate manipularea rapidă a pieselor noastre se va întâmpla în această funcție dacă (jQuery () .speaker) portofoliul_quicks și ();
Voi împărți următoarele în pași mai mici pentru a înțelege tot ce are loc atunci când creați un portofoliu Quicksand. Să începem prin stabilirea variabilelor noastre. Introduceți în codul nostru următorul cod portfolio_quicksand funcţie:
var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems;
Vom folosi aceste variabile mai frecvent, deci este întotdeauna o modalitate bună de a obține o bază solidă de variabile înființate. Apoi vom aloca variabilele noastre:
$ filtrul = $ ('. filter li.active a') .atr ('class'); $ filterLink = $ ('. filtru a a'); $ container = $ ("ul.filterable-grid"); $ containerClone = $ container.clone (); Mai întâi am setat filtrul nostru pe clasa de listă neordonată din șablonul de pagină de portofoliu. În al doilea rând, am înființat o filterLink; aceasta va acționa ca elementul pe care l-am făcut clic în filtrul nostru. Apoi trebuie să alocăm containerul nostru de articole de portofoliu și, în final, avem nevoie de o versiune clonată a containerului nostru, pentru a manipula datele cu Quicksand.
Apoi, vom scrie funcția de clic, astfel încât atunci când un utilizator selectează o categorie, containerul ar trebui să fie manipulat și ieșirea conținutului ar trebui să fie afișată. Să începem prin apelarea unei funcții de clic pe site-ul nostru filterLink:
$ filterLink.click (funcția (e) // Vom adăuga conținutul pentru această funcție acum ...);
Acum, să analizăm starea activă a elementului de listă. Începem mai întâi scoaterea oricărei clase cu o stare activă curentă, apoi căutarea prin filtru și împărțirea filtrului în elemente separate și aplicarea în cele din urmă a unei clase active la elementul (categoria) clicat:
$ ('. filtru'). removeClass ('activ'); $ filtrul = $ (acest) .attr ('class') split (); $ (this) .parent () addClass ('activ'); Acest lucru vă va ajuta atunci când styling filtru, pentru că veți fi în măsură să furnizeze activ indică dacă un utilizator a selectat o categorie.
Mergând mai departe, vom rezolva o condiție pentru filtrarea datelor noastre. Incepem mai intai sa verificam daca toate a fost selectat. Dacă toate a fost selectat apoi afișați toate elementele din containerul nostru, altfel afișați elementele din container care au fost selectate de filtru.
Anterior, atunci când am creat șablonul de pagină de portofoliu și i-am atribuit un Tip de date la fiecare dintre articolele noastre de portofoliu, acesta este locul unde îl vom folosi ca o cheie de referință pentru a găsi datele selectate.
dacă ($ filter == 'toate') $ filteredItems = $ containerClone.find ('li'); altfel $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'); În cele din urmă, numim metoda Quicksand și trecem pe noi filteredItems și toate opțiunile de animație:
$ container.quicksand ($ filteredItems, durată: 750, relaxare: 'easeInOutCirc', adjustHeight: 'dynamic');
funcția portofoliu_quicksand () // Configurarea variabilelor noastre var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filterItems // Setați filtrul nostru $ filter = $ ('. filter li.active a') attr ('class'); // Setați linkul nostru filtru $ filterLink = $ ('. Filter li a'); // Setați recipientul nostru container $ = $ ('ul.filterable-grid'); // Clonați containerul nostru container containerClone = $ container.clone (); / / Aplicați Quicksand-ul nostru pentru a lucra la o funcție de clic // pentru fiecare element de filtrare filtru li $ filterLink.click (funcția (e) // Eliminați clasa activă $ ('.filler li') removeClass ('active '); // Împărțiți fiecare element de filtrare și înlocuiți filtrul $ filter = $ (this) .attr (' class ') split ("); // Aplicați clasa" activă " ) .parent () addClass ('activ'); // Dacă este selectat 'all', afișați toate elementele // altceva ieșind toate elementele la care se face referire prin tipul de date dacă ($ filter == 'all') $ filteredItems = $ containerClone.find ('li'); altceva $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'); .quicksand ($ filteredItems, // Durata pentru durata animatiei: 750, // Efectul de relaxare atunci cand animatia se relaxeaza: 'easeInOutCirc', // Reglarea inaltimei setata la dynamicHeight dinamic: 'dynamic');); Uimitor, trebuie să aveți acum un portofoliu pe deplin funcțional Quicksand, dar să nu ne oprim acolo. Am de gând să pun un plus suplimentar, acesta este complet opțional, dar ar putea deveni o caracteristică preferată, și că este Lightbox. Vom folosi pluginul jQuery numit PrettyPhoto pentru integrarea Lightbox.
Primul lucru pe care îl vom face este să descărcați pluginul PrettyPhoto.
Odată ce am descărcat fișierele PrettyPhoto, vom copia mai întâi imaginile PrettyPhoto, care vor apărea în imagini și apoi trebuie să copiați dosarul intitulat Fotografie draguta în tema noastră. De asemenea, trebuie să copiem peste fișierul JavaScript CSS și PrettyPhoto, deci să le copiem pe dosarele corespunzătoare din tema noastră.
Acum, că avem toate fișierele noastre în loc, trebuie să le inițializăm în tema noastră. În cadrul nostru functions.php fișier, vom crea o altă funcție care să se ocupe de stilurile noastre și vom numi această funcție register_css. Apoi, vom înregistra stilurile noastre și vom încorpora stilurile noastre, introducând astfel următorul cod în dumneavoastră functions.php fişier:
// Înregistrați funcția de stiluri 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"); Avem toate fișierele noastre în loc și ele sunt inițializate de tema noastră. Acum trebuie să folosim acest lucru și să implementăm Lightbox în tema noastră. Să ne deschidem portfolio.php (șablon de pagină de portofoliu) și adăugați un cod la Imaginea noastră recomandată.
În primul rând, trebuie să obținem o imagine mare a imaginii recomandate care a fost stabilită. Aceasta va acționa apoi ca imaginea completă atunci când utilizatorul dă click pe imagine și încarcă PrettyPhoto. În interiorul Loop-ului WordPress, trebuie să introduceți următorul cod:
Codul pe care l-am inserat va găsi postul curent în buclă și va găsi sursa originală a imaginii și apoi va găsi marime maxima versiune a imaginii. Odată ce am returnat imaginea noastră de dimensiune completă, vom forța imaginea să fie stocată în indexul matricei de 0. Aceasta este utilizată pentru a nu suprascrie sau duplica cu imaginile noastre de dimensiune completă.
După ce vom avea acces la imaginea noastră completă, vom inițializa PrettyPhoto pe imaginea noastră recomandată. Următorul cod va lega marime maxima imaginea la imaginea recomandată a articolului din portofoliu și trimiteți referința la PrettyPhoto, înlocuiți codul în care ați creat imaginea recomandată cu următoarele:
„>
Excelent, avem toate fișierele și scenariile noastre în loc, avem imaginea de dimensiune completă pentru imaginea noastră recomandată și ne-am referit imaginea specială la imaginea noastră completă cu PrettyPhoto. Apoi, trebuie să scriem JavaScript pentru a face Lightboxul să apară și să funcționeze.
Să ne întoarcem la noi jquery.custom.js fișier și să creați o altă funcție necompletată pentru a gestiona PrettyPhoto:
lightbox () // Functionarea Lightbox-ului nostru va fi adaugata acum ... if (jQuery () prettyPhoto) lightbox ();
Acum că avem funcția noastră, vom iniția PrettyPhoto. Facem acest lucru prin adăugarea următorului cod în cadrul nostru Cutie de lumină funcţie:
jQuery ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (animationSpeed: 'rapid', slideshow: 5000, temă: 'pp_default', show_title: false, overlay_gallery: false, social_tools: false); Puteți citi documentația completă a tuturor parametrilor pe care PrettyPhoto le va accepta în utilizarea pluginului: PrettyPhoto jQuery Lightbox Clone
Deci, totul este făcut! Implementarea de Lightbox în tema WordPress, dar așteptați-mă să ghicesc când faceți clic pe filtru și folosiți Quicksand; Lightbox-ul nu mai funcționează. Acest lucru se datorează faptului că trebuie să modificăm scriptul nostru Quicksand și să trecem încă o mică bucată de cod pentru a ne asigura că Lightbox funcționează chiar și atunci când filtrăm prin portofoliul nostru.
Deci, să rezolvăm această mică problemă prin adăugarea următorului scenariu la adresa noastră portfolio_quicksand în cadrul nostru jquery.custom.js fişier:
$ container.quicksand ($ filteredItems, functie () lightbox (););
Ceea ce facem aici este să sunăm pluginul Quicksand încă o dată și să transmitem o funcție în cadrul acestui apel funcției Lightbox. Deci, de fiecare dată când Quicksand filtrează conținutul, funcția Lightbox se numește aplicând PrettyPhoto pentru fiecare imagine.
Mulți oameni iubesc folosirea Quicksand, dar unii oameni preferă atât utilizarea Quicksand cât și paginarea în portofoliile lor. Acesta este un supliment suplimentar pentru a crea paginare în portofoliul dvs. Voi folosi pluginul WordPress: WP_PageNavi.
Să instalați și să activați în prealabil pluginul. Deplasați-vă la Plugin-uri -> Adăugați noi în secțiunea noastră de administrare și căutare WP_PageNavi, odată ce ați găsit clicul Instaleaza acum și Activați pluginul odată instalat.
Acum, când avem pluginul nostru, să deschidem șablonul de pagină de portofoliu și să facem modificări în fișierul nostru.
În primul rând, trebuie să configurați pagina noastră pentru a permite paginarea. Facem acest lucru prin introducerea următorului segment de cod înainte de a interoga baza noastră de date:
$ paged = get_query_var ("paginat")? get_query_var ("paginat"): 1; După ce inițializăm paginarea, trebuie să modificăm interogarea bazei de date. Schimbăm post_per_page la un număr pentru a afișa un număr maxim de postări care vor fi afișate pe fiecare pagină. Apoi vom transmite un nou parametru in
