Share
I dag vil du forandre din enkle portefølje til noe fantastisk med den magiske Quicksand av Razorjack.
Har du noen gang ønsket å bruke jQuery-plugin Quicksand? Har du noen gang prøvd å implementere det med WordPress? Men fant det et mareritt å gjøre begge deler? Vel, jeg skal gå gjennom en enkel steg-for-steg guide for å få deg fra et tomt WordPress-tema til en vakker egendefinert portefølje med bruk av Quicksand. Jeg bruker et tilpasset tema som har blitt fjernet for formålet med denne opplæringen sammen med WordPress 3.0+.
Så åpne din favoritt tekstredigerer og la oss begynne!
Med WordPress kan vi skape egendefinerte innleggstyper der vi kan administrere alt vårt innhold. Vi lager en tilpasset posttype for å lagre alle våre porteføljeposter i en dedikert admin-seksjon.
For enkel kodebehandling, la oss begynne med å lage en mappe som heter portefølje og en PHP-fil kalt portefølje-post-types.php (eller alt du finner egnet).
Når du har opprettet en fil, la oss legge til noen kode ...
La oss begynne med å skape en funksjon:
Nå som vi har opprettet vår blanke funksjon, la oss legge til noe kode for å gjøre denne funksjonen noe spesielt. Først må du lage etikettene for vår egendefinerte innleggstype. Sett inn følgende koden i vår post_type funksjon:
$ label = array ('name' => __ ('Portfolio'), 'singular_name' => __ ('Portefølje'), 'rewrite' => array ('slug' => __ ('portefølje')) add_new '=> _x (' Legg til vare ',' portefølje '),' edit_item '=> __ (' Rediger porteføljepost '),' new_item '=> __ (' Ny porteføljepost '),' view_item '=> __ ('Se portefølje'), 'search_items' => __ ('Søk portefølje'), 'not_found' => __ ('Ingen porteføljeelementer funnet'), 'not_found_in_trash' => __ ('Ingen porteføljeelementer funnet i søppel' ), 'parent_item_colon' => ");En sammenbrudd av koden vi nettopp har skrevet:
Variabelen 'etiketter' er en rekke strenger som representerer innleggstypen din, hver av strengene er tekst som er utdata for den aktuelle funksjonen.
Accentsconagua
Navn - Flertallet av navnet på din posttype.singular_name - Den enestående form for navnet på din posttype.omskrive - Omskriv permalink med dette formatet. Legg til ny - Menyelementet for å legge til et nytt innlegg.edit_item - Overskriften vises når du redigerer et innlegg.ny gjenstand - Vistes i favorittmenyen i administrasjonshodet.view_item - Vist sammen med permalinken på redigeringsskjermbildet.search_items - Knapptekst for søkeboksen på skjermbildet for redigering av innlegg.ikke funnet - Tekst som skal vises når ingen innlegg er funnet gjennom søk i administrasjonen.not_found_in_trash - Tekst som skal vises når ingen innlegg er i søpla.parent_item_colon - Brukes som en etikett for et overordnet innlegg på skjermbildet for redigering av innlegg. Kun nyttig for hierarkiske posttyper.Deretter lager du argumenter for vår egendefinerte innleggstype. Sett inn følgende stykke kode i vår post_type funksjon:
$ args = array ('labels' => $ etiketter, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type '=>' post ',' hierarkisk '=> false,' menu_position '=> null,' støtter '=> array (' title ',' editor ',' miniatyrbilde ')); etiketter - En rekke etiketter for denne innleggstypen.offentlig - Meta-argument brukes til å definere standardverdier for public_queriable, show_ui, show_in_nav_menus og exclude_from_search.publicly_queryable - Hvorvidt posttype-spørringer kan utføres fra frontenden.show_ui - Enten å generere et standard brukergrensesnitt for å administrere denne innleggstypen.query_var - Falsk for å forhindre spørringer, eller strengverdien av spørringen var å bruke for denne innleggstypen.omskrive - Omskriv permalink med dette formatet.capability_type - Strengen som skal brukes til å bygge lese, redigere og slette evner.hierarkisk - Om posttypen er hierarkisk. Lar foreldre angis.menu_position - Plasseringen i menyrekkefølgen posttypen skal vises i administrasjonen.støtter - Et alias for å ringe add_post_type_support () direkte.Les mer om add_post_type_support i WordPress Codex
Nå er vår posttype satt opp med innstillingene, vi må registrere posttypen. Vi registrerer vår posttype ved å sette inn følgende kode i vår post_type funksjon:
register_post_type (__ ('portefølje'), $ args); Vi har nå opprettet vår tilpassede posttype. La oss formatere utdataene, slik at vi kan få brukervennlige meldinger. Begynn med å skape en annen funksjon i vår portefølje-post-type.php fil.
// funksjon: portfolio_messages BEGIN funksjon portfolio_messages ($ messages) $ messages [__ ('portfolio')] = array (0 => ", 1 => sprintf (('Portefølje Oppdatert. Se portefølje'), esc_url (get_permalink $ == __ ('Custom Field Deleted.'), 4 => __ ('Portefølje oppdatert.'), 5 => isset _GET ['revision'])? Sprintf (__ ('Portefølje gjenopprettet til revisjon fra% s'), wp_post_revision_title ((int) $ _ GET ['revision'], falsk)): false, 6 => sprintf (__ Portefølje publisert. Se portefølje '), esc_url (get_permalink ($ post_ID))), 7 => __ (' Portefølje lagret. '), 8 => sprintf (__ (' Portefølje innlevert. Forhåndsvis portefølje '), esc_url (add_query_arg 'forhåndsvisning', 'sant', get_permalink ($ post_ID))), 9 => sprintf (__ ('Portefølje planlagt for: % 1 $ s. Preview Portfolio '), date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID)), 10 => sprintf (__ Utkast til oppdatert. Preview Portfolio '), esc_url (add_query_arg (' forhåndsvisning ',' sann ', get_permalink ($ post_ID)))))); returner $ meldinger; // funksjon: portfolio_messages END Det vi nettopp har gjort er å opprette en funksjon som heter portfolio_messages som kaller et argument $ messages. Etter dette lager vi en variabel som lagrer en matrise for alle våre meldinger. Vi lar "0" være tomt i vårt utvalg fordi vi starter indekseringen vår på 1 med våre meldinger. Deretter returnerer vi endelig vårt utvalg til vår funksjon.
Til slutt må vi lage vår taksonomi. Begynn med å opprette en annen funksjon som heter portfolio_filter og skriv inn følgende kode:
// funksjon: portfolio_filter BEGIN funksjon portfolio_filter () register_taxonomy (__ ("filter"), array (__ ("portefølje")), array ("hierarchical" => true, "label" => __ , "singular_label" => __ ("Filter"), "rewrite" => array ('slug' => 'filter', 'hierarkisk' => sant))); // funksjon: portfolio_filter END Vi begynner med å registrere vår taksonomi og deretter bruke taksonomien til vår tilpassede posttype portefølje. Etter dette bruker vi de siste innstillingene av taksonomien og skriver inn de opprettede etikettene. Årsaken til at vi oppretter en taksonomi er at vi skal bruke den som en nøkkel når vi sorterer vår portefølje med Quicksand.
Nå som alle våre tilpassede posttyper er ferdige sammen med riktig formatering og vår egen taksonomi, må vi endelig initialisere all vår kode slik at den vil bli vist i administrasjonen. La oss begynne med å legge til følgende kode nederst i filen:
add_action ('init', 'post_type'); add_action ('init', 'portfolio_filter', 0); add_filter ('post_updated_messages', 'portfolio_messages'); Når vi har input dette, må vi åpne vår functions.php fil og sett inn følgende linje kode:
omfatte ( "portefølje / portefølje-post-types.php");
Vi må inkludere vår tilpassede porteføljetype inn i vår functions.php fil for at skriptet skal løpe når funksjonene til WordPress-temaet blir kalt. Nå vil du se i ditt administrasjonspanel en tittel med tittelen Portfolio med 3 undernavigasjonselementer kalt "Portefølje", "Legg til element" og "Filter".
Nå har vi hele vår porteføljeinnstilling fullført, vi må sende ut våre porteføljeobjekter. Vi starter dette ved å opprette en ny PHP-fil kalt portfolio.php. La oss først legge til noen av grunnene til opprettelsen av en sidemal:
// Vi legger til innholdet vårt senere
Nå har vi vår grunnleggende sidemal opprettet, vi må fylle ut vår portefølje. Vi må lage en side først som vil fungere som vår porteføljeside, så hodet til Sider -> Legg til nytt i vårt Dashboard. På høyre side ser du en boks med tittelen Sideattributter med en nedgang av Standard mal, velg ønsket mal du vil bruke i vårt tilfelle portefølje bør velges og velg deretter publiser.
Nå, la oss gå tilbake til å redigere vår porteføljeside-mal og begynne å sette inn filteret for vår portefølje. Først begynner vi å pakke inn filteret i en uordnet liste, og hver av kategoriene vil være et element i vår liste.
La oss legge til noen PHP i vårt filter for å automatisk generere filterkategorier som blir brukt i vår portefølje.
0) foreach ($ termer som $ term) $ i ++; $ term_list. = '
Det vi gjør her er først å initialisere taksonomien vi ønsker å få, i vårt tilfelle filter. For det andre, sett opp en telling med kategoriene våre for å øke over hvert element i filteret vårt, og bruk deretter et betinget utsagn for å sjekke om tellingen vi har satt er mindre enn 0; noe som betyr at hvis det ikke er noen kategorier i filteret eller ingen kategorier som er tildelt et porteføljeelement, vil ingenting bli utført. Hvis det er kategorier i filteret, vil vi endre utgangen for hvert element.
Vi gjør dette med følgende linje i vårt segment av kode:
$ term_list. = '
Vi lager et listeelement for å passe inn i vår uordnede liste, og deretter sette «href» til et tomt mål fordi Quicksand håndterer organisering av innhold, så setter vi klassenavnet til sluggen i porteføljeposten for konsistent referanse, og til slutt skriver navnet på kategorien i våre filtre.
Brilliant, vi har nå et dynamisk filter implementert. Nå skal vi sende ut våre porteføljeposter. La oss begynne å spørre vår database for å få alle innleggene for porteføljeposttypen og sette opp vår WordPress Loop. Vi begynner med å sette opp et nytt WP_Query-objekt og sende de riktige parametrene til den.
'portefølje', 'posts_per_page' => '- 1')); ?>
Vi tilordner vårt WP_Query-objekt til en variabel, slik at vi kan referere til spørringen når vi initialiserer Loop. Vi setter vår posttype til portefølje så vi bare spørre vår egendefinerte innleggstype som vi opprettet tidligere og endelig satte inn posts_per_page til -1. Vi bruker -1 slik at det ikke er faste begrensninger for antall innlegg per side, og viser derfor alle porteføljeposter, hvis vi ønsket at vi også kunne skrive inn et nummer, og det ville bare vise hvor mange porteføljeposter som ble skrevet inn her.
Nå som vi har et spørringsobjekt som vi kan referere til, la oss sette opp vår Loop for å sende ut våre porteføljeposter. Vi begynner med å sette inn følgende kode:
have_posts ()): mens ($ wpbp-> have_posts ()): $ wpbp-> the_post (); ?>
Før vi begynner å skrive inn innhold i vår loop, skal vi sette opp våre kjente bilder. Åpne opp din functions.php fil, og vi vil legge til noen egendefinerte funksjoner for bildestørrelser som skal sendes ut for hver porteføljepost.
La oss først sjekke om den nåværende versjonen av WordPress håndterer kjennetegnet bilde funksjonalitet, og sett deretter noen generelle innstillinger for at den skal fungere riktig. Vi legger til støtte for post-thumbnails og sett en standardstørrelse på 56px med 56px.
hvis (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer'); set_post_thumbnail_size (56, 56, true); Deretter vil vi legge til vår egen tilpassede miniatyrstørrelse. Sett inn følgende kode på en linje under: set_post_thumbnail_size
add_image_size ('portefølje', 295, 150, sant); Denne metoden lar deg lage din egen miniatyrstørrelse ved først å sette referansenavnet for miniatyrbildet, deretter bredden og høyden, og til slutt hvis miniatyrbildet burde beskjære bildet for å passe den angitte størrelsen. Du kan endre størrelsene på det uthevede bildet ditt slik at det passer med layoutet ditt. Med denne veiledningens formål har jeg en 3-kolonne grid layout.
Nå som vi har vårt Utvalgte bilde satt opp, skal vi gå tilbake til vår porteføljesidemal og utdatere porteføljepostens kjente bilde.
Siden organisasjonen for hvert porteføljeelement håndteres best av en uordnet liste, vil vi først opprette en og deretter sende ut vårt uthevede bilde som vi nettopp har installert. Sett inn følgende kode inne i WordPress Loop:
">
Vi kontrollerer først om temaet støtter thumbnail funksjon. Hvis temaet støtter denne funksjonen, vil den sende ut bildebildet på den dedikerte miniatyrbilden vi har angitt tidligere. Etter å ha skrevet ut vårt kjennetegnet bilde, utfører vi tittelen på porteføljeposten direkte under bildet.
Vi må tilpasse de ulike elementene i hver porteføljeliste for å sikre at referansen for hver portefølje er riktig i forhold til kategoriene som er tildelt. For dette må vi først få kategoriene fra vår taksonomi. Sett inn følgende kode i Loop:
Deretter skal vi legge til noen attributter til vårt listelement (li). Vi begynner med å legge til en data-ID til vårt listepost, for å gi en unik identitet til hver av porteføljepostene. Vi skal også legge til en data-type; Dette vil fungere som vår referanse til filteret vårt. La oss erstatte vårt åpningslisteelement (li) med følgende kode:
Vi søker en telle til vår data-ID, og når looping gjennom hvert element, blir tellingen økt (vi legger til tellingen kort tid). Vi slår deretter over hver kategori i vår taksonomi og bruker et vanlig uttrykk for å finne mellomrom og erstatte det med "-" for å matche sluggen i kategorien og så endelig legge et tomt rom på slutten, så vi kan søke mer enn én kategori til en porteføljevare.
Til slutt skal vi sørge for at vi øker antallet våre og gir en unik referanse til hver av våre porteføljeposter. Vi må legge til følgende kode like før vi avslutter sløyfen:
">
Vi gjør fremgang nå, men før vi fortsetter må vi laste ned noen jQuery-skript. Vi må laste ned følgende skript:
Vi må også lage en JavaScript-fil for å håndtere alle våre tilpassede jQuery som vi skal skrive snart. Så la oss lage en tom JavaScript-fil kalt jquery.custom.js. Nå som vi har alle våre viktige skript, la oss åpne vår functions.php og opprett en tom funksjon kalt register_js. Når vi har vår blanke funksjon, skal vi sette inn våre skript ved hjelp av wp_register_script og wp_enqueue_script metoder. Først må vi sjekke at vi ikke er i administrasjonen for å sikre at skriptene bare lastes på forsiden. Sett inn følgende kode i vår funksjon:
// Registrer våre skriptfunksjon 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 ('tilpasset', get_template_directory_uri (). '/js/jquery.custom.js', 'jquery', '1.0', true); wp_enqueue_script ('jquery'); wp_enqueue_script ('quicksand'); wp_enqueue_script ('easing'); wp_enqueue_script ('custom'); Først med wp_register_script Vi spesifiserer et håndtak som vårt første referansegrunnlag når du anvender skriptene, og legger deretter kildekilden til skriptet som vårt andre argument (dette gjelder for hver registrering av et skript). Vi spesifiserer også jquery som en avhengighet av å laste WordPress 'inkludert versjon av jQuery når vi enqueue skriptet.
Når vi har registrert alle våre skript, merker vi dem ved å bruke wp_enqueue_script. Vi sender alle håndtakene vi brukte når vi registrerte som en referanse til å skanne våre skript. Til slutt må vi initialisere vår funksjon ved å legge til følgende kode i vår functions.php fil:
add_action ('init', 'register_js'); Nå som vi har alle våre skript på plass, kan vi begynne å skrive vårt jQuery tilpassede skript for håndtering av Quicksand. La oss åpne opp vår jquery.custom.js skript og la oss sette opp miljøet ved å sette inn følgende kode:
jQuery (dokument) .ready (function () // Vi vil sette inn vårt quicksand script her; // SLUT DOKUMENT
Nå har vi vår skriptstruktur, vi vil opprette en funksjon som heter portfolio_quicksand og kjør bare hvis Quicksand-pluginet finnes.
funksjon portfolio_quicksand () // Alle våre quicksand handling vil skje i denne funksjonen hvis (jQuery (). quicksand) portfolio_quicksand ();
Jeg vil bryte ned følgende i mindre trinn for å forstå alt som skjer når du lager en Quicksand-portefølje. La oss begynne med å sette opp våre variabler. Sett inn følgende kode i vår portfolio_quicksand funksjon:
var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems;
Vi bruker disse variablene oftere, så det er alltid en god måte å få et solid fundament av variabler satt opp. Deretter skal vi tildele våre variabler:
$ filter = $ ('.filter li.active a'). attr ('class'); $ filterLink = $ ('.filter li a'); $ container = $ ('ul.filterable-grid'); $ containerClone = $ container.clone (); Vi har først satt opp filteret til den uordnede listen klassen fra vår porteføljeside mal. For det andre oppretter vi en filterLink; Dette vil fungere som vårt klikkte element i vårt filter. Da må vi tildele vår beholder av våre porteføljeposter, og til slutt krever vi en klonet versjon av vår container, for å manipulere dataene med Quicksand.
Deretter skal vi skrive vår klikkfunksjon, så når en bruker velger en kategori, skal beholderen manipuleres og innholdet av innholdet skal vises. La oss starte med å ringe en klikk-funksjon på vår filterLink:
$ filterLink.click (funksjon (e) // Vi legger til innholdet for denne funksjonen nå ...);
La oss nå håndtere aktiviteten til listelementet. Vi begynner med å først fjerne enhver klasse med en nåværende aktiv tilstand, deretter søke gjennom filteret og splitte filteret i separate elementer, og til slutt bruke en aktiv klasse til det klikkte elementet (kategori):
$ ('.filter li'). removeClass ('aktiv'); $ filter = $ (dette) .attr ('class'). split ("); $ (dette) .parent (). addClass ('aktivt'); Dette vil hjelpe når du styler filteret ditt, fordi du vil kunne tilby aktiv angir når en bruker har valgt en kategori.
Vi fortsetter å håndtere en betingelse for filtrering av våre data. Vi begynner med å først sjekke om alle har blitt valgt. Hvis alle har blitt valgt så viser alle elementene i vår beholder, ellers vise elementene i beholderen som er valgt av filteret.
Tidligere, da vi opprettet vår porteføljesidemal og vi tildelte en data-type til hver av våre porteføljeposter, er det her vi skal bruke det som en nøkkel for å finne våre valgte data.
hvis ($ filter == 'alle') $ filteredItems = $ containerClone.find ('li'); ellers $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'); Til slutt kaller vi Quicksand-metoden, og passerer vår filteredItems og alle våre animasjonsalternativer:
$ container.quicksand ($ filteredItems, duration: 750, easing: 'easeInOutCirc', adjustHeight: 'dynamic');
funksjon portfolio_quicksand () // Sette opp våre variabler var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems // Sett vårt filter $ filter = $ ('.filter li.active a'). attr ('class'); // Sett filterlinjen $ filterLink = $ ('.filen li a'); // Sett vår container $ container = $ ('ul.filterable-grid'); // Klone vår container $ containerClone = $ container.clone (); // Bruk vår Quicksand for å jobbe med en klikkfunksjon // for hver av filter li-linkelementene $ filterLink.click (funksjon (e) // Fjern aktiv klasse $ ('.filter li'). RemoveClass ('aktiv '); // Split hver av filterelementene og overstyr filteret $ filter = $ (dette) .attr (' class '). Split ("); // Bruk" aktiv "klassen til den klikkte linken $ (dette ) .parent (). addClass ('active'); // Hvis 'alle' er valgt, viser alle elementene // annet utdata alle elementer referert av datatypen hvis ($ filter == 'alle') $ filteredItems = $ containerClone.find ('li'); else $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'; // Endelig ring Quicksand-funksjonen $ container .quicksand ($ filteredItems, // Varigheten for animasjonens varighet: 750, // Den lette effekten når animasjonslettelse: 'easeInOutCirc', // Høydejustering satt til dynamisk justeringHjelp: 'dynamisk');); Utrolig, du burde nå ha en fullt funksjonell Quicksand-portefølje, men la oss ikke stoppe der. Jeg skal legge til en ekstra ekstra, dette er helt valgfritt, men det kan bli en favorittfunksjon, og det er Lightbox. Vi bruker jQuery-plugin-programmet, kalt PrettyPhoto, for vår lysbokseintegrasjon.
Første ting vi skal gjøre er å laste ned PrettyPhoto plugin.
Når vi har lastet ned våre PrettyPhoto-filer, vil vi først kopiere over PrettyPhoto-bildene, som kommer til å være i Bilder mappe og da må du kopiere mappen med tittelen PrettyPhoto inn i vårt tema. Vi må også kopiere over CSS og PrettyPhoto's JavaScript-fil, så la oss kopiere dem til de aktuelle mappene i vårt tema.
Nå som vi har alle våre filer på plass, må vi initialisere dem innenfor vårt tema. Innenfor vår functions.php fil, vil vi opprette en annen funksjon for å håndtere våre stiler, og vi vil ringe denne funksjonen register_css. Deretter registrerer vi våre stiler og enqueue våre stiler, og dermed sette inn følgende kode i din functions.php fil:
// Registrer vår stilfunksjon 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'); Vi har alle våre filer på plass, og de blir initialisert av vårt tema. Nå må vi gjøre bruk av dette og implementere lysboksen i vårt tema. La oss åpne opp vår portfolio.php (porteføljesidenmal) og legg til noen kode i vårt Utvalgte bilde.
Først må vi få et stort bilde av det uthevede bildet som er satt. Dette vil da fungere som fullbildet når brukeren klikker på bildet og PrettyPhoto laster. I vår WordPress Loop må vi sette inn følgende kode:
Koden vi har satt inn, finner gjeldende innlegg i løkken, og finn den opprinnelige kilden til bildet og finn deretter full størrelse versjon av bildet. Når vi har returnert bildet vårt i full størrelse, vil vi tvinge bildet som skal lagres i arrayindeksen på 0. Dette brukes til ingen overstyringer eller duplikater med våre fullstendige bilder.
Når vi har vår fullstendige bilde tilgjengelig, vil vi nå initialisere PrettyPhoto på vårt fremhevede bilde. Følgende kode vil koble til full størrelse bilde til det fremhevede bildet av porteføljeposten og send referansen til PrettyPhoto, erstatt koden der du opprettet bildet ditt med følgende:
">
Flott, vi har alle våre filer og skript på plass, vi har bildet i full størrelse for vårt kjennetegn og vi har henvist vår kjennetegnet bilde til vårt fullstendige bilde med PrettyPhoto. Deretter må vi skrive JavaScript for å få lyset til å virke og fungere.
La oss gå tilbake til vår jquery.custom.js fil og opprett en annen tom funksjon for å håndtere vår PrettyPhoto:
funksjonslampe () // Vårt lysfunksjonsfunksjon vil bli lagt til nå ... hvis (jQuery (). prettyPhoto) lightbox ();
Nå som vi har vår funksjon, vil vi initialisere PrettyPhoto. Vi gjør dette ved å legge til følgende kode i vår Lysboks funksjon:
jQuery ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (animationSpeed: 'fast', lysbildefremvisning: 5000, tema: 'pp_default', show_title: false, overlay_gallery: false, social_tools: false); Du kan lese full dokumentasjon av alle parametrene som PrettyPhoto vil akseptere ved bruk av plugin på: PrettyPhoto jQuery Lightbox Clone
Så, det er alt gjort! Lysbildefremføring i WordPress-temaet, men vent, la meg gjette når du klikker på filteret og bruker Quicksand; Lysboksen virker ikke lenger. Det er fordi vi må endre Quicksand-skriptet og sende et nytt lite stykke kode for å sikre at lyslys fungerer, selv når vi filtrerer gjennom porteføljen vår.
Så la oss fikse dette lille problemet ved å legge til følgende skript til vår portfolio_quicksand fungere innenfor vårt jquery.custom.js fil:
$ container.quicksand ($ filteredItems, function () lightbox (););
Hva vi gjør her, er å ringe Quicksand-plugin en gang til, og passere en funksjon i denne samtalen til lysfunksjonen vår. Så hver gang Quicksand filtrerer innholdet, kalles lysbokfunksjonen med PrettyPhoto på hvert bilde.
Mange mennesker elsker å ha bruk av Quicksand, men noen liker bruken av både Quicksand og paginering i sine porteføljer. Dette er en ekstra ekstra for å lage paginering i porteføljen din. Jeg skal bruke WordPress-plugin: WP_PageNavi.
La oss først installere og aktivere plugin. Hodet til Plugins -> Add New side i admin-delen vår og søk WP_PageNavi, en gang funnet klikk Installere nå og Aktiver plugin en gang installert.
Nå som vi har vårt plugin-oppsett, la oss åpne vår porteføljesidermal og gjøre noen endringer i filen vår.
Først må vi sette opp siden vår for å tillate paginering. Vi gjør dette ved å sette inn følgende kodesegment før vi spør om vår database:
$ paged = get_query_var ('paged')? get_query_var ('paged'): 1; Når vi har initialisert vår paginering, må vi endre databasespørsmålet. Vi endrer post_per_page til et nummer som viser maksimalt antall innlegg som vil bli vist på hver side. Så sender vi en ny parameter til spørringen paged og referer dette til vårt kodesegment som tillot oss å paginere siden, som følgende kode viser:
$ wpbp = ny WP_Query (array ('post_type' => 'portefølje', 'posts_per_page' => '2', 'paged' => $ paged)); Flott, vi har en portefølje med paginering. Vi trenger bare noen kontroller for å hjelpe oss med navigasjonen på hver side. Følgende kode kontrollerer om WP_PageNavi plugin er installert og initialiserer deretter wp_pagenavi med spørringen av databasen som er bestått som en parameter. Vi tilbakestiller deretter postdataene våre, og alt innhold er riktig pagert.
$ wpbp)); wp_reset_postdata (); ?>
Det er det! Du vil ha en fullt funksjonell portefølje med Quicksand, Lightbox og Pagination.
Gi deg selv et klapp på ryggen! Du har opprettet en Quicksand-portefølje med WordPress. Alt det harde arbeidet er gjort, og du kan implementere det med ethvert arbeid du utvikler.
Jeg vil gjerne si en stor takk for at du har brukt tid til å lese opplæringen min, håper jeg det hjalp. Vær så snill å legge igjen kommentarer, og jeg vil prøve mitt beste for å hjelpe og svare på dem.
