Share
Vandaag zal je je eenvoudige portfolio veranderen in iets geweldigs met de magie van Quicksand van Razorjack.
Ooit de plug-in Quicksand van jQuery willen gebruiken? Ooit geprobeerd om het te implementeren met WordPress? Maar vond het een nachtmerrie om beide te doen? Welnu, ik zal een eenvoudige stap-voor-stap handleiding doornemen om u van een leeg WordPress-thema naar een prachtige aangepaste portfolio te brengen met behulp van Quicksand. Ik gebruik een aangepast thema dat is uitgekleed ten behoeve van deze zelfstudie, samen met WordPress 3.0+.
Dus open je favoriete teksteditor en laten we beginnen!
Met WordPress zijn we in staat om aangepaste berichttypen te maken waarin we al onze inhoud kunnen beheren. We zullen een aangepast berichttype maken om al onze portfolio-items in een speciale beheerderssectie op te slaan.
Voor eenvoudig codebeheer, laten we beginnen met het maken van een map met de naam portefeuille en een PHP-bestand genaamd portfolio-post-types.php (of alles wat u geschikt vindt).
Zodra je een bestand hebt gemaakt, voegen we wat code toe ...
Laten we beginnen met het maken van een functie:
Nu we onze lege functie hebben gemaakt, laten we wat code toevoegen om deze functie iets speciaals te laten doen. Maak eerst de labels voor ons aangepaste berichttype. Voeg het volgende stuk code toe in onze post_type functie:
$ labels = array ('name' => __ ('Portfolio'), 'singular_name' => __ ('Portfolio'), 'rewrite' => array ('slug' => __ ('portfolio')), ' add_new '=> _x (' Item toevoegen ',' portfolio '),' edit_item '=> __ (' Bewerk portfolio-item '),' new_item '=> __ (' Nieuw portfolio-item '),' view_item '=> __ ('View Portfolio'), 'search_items' => __ ('Search Portfolio'), 'not_found' => __ ('Geen gevonden portfolio-items'), 'not_found_in_trash' => __ ('Geen portfolio-items gevonden in de prullenbak' ), 'parent_item_colon' => ");Een uitsplitsing van de code die we zojuist hebben geschreven:
De 'labels' variabele is een array van strings die uw berichttype vertegenwoordigen, elk van de strings zijn tekst die wordt uitgevoerd voor de specifieke functie.
Accentsconagua
naam - De meervoudsvorm van de naam van uw berichttype.singular_name - De enkelvoudsvorm van de naam van uw berichttype.herschrijven - Herschrijf permalinks met dit formaat. add_new - Het menu-item voor het toevoegen van een nieuw bericht.Item bewerken - De koptekst die wordt weergegeven bij het bewerken van een bericht.nieuw item - Weergegeven in het favorietenmenu in de beheerderskop.view_item - Wordt weergegeven naast de permalink op het scherm voor het bewerken van berichten.search_items - Knoptekst voor het zoekvak op het scherm met bewerkingsposten.niet gevonden - Tekst die moet worden weergegeven als er geen berichten zijn gevonden via zoeken in de beheerder.not_found_in_trash - Tekst die moet worden weergegeven als er geen berichten in de prullenbak staan.parent_item_colon - Wordt gebruikt als een label voor een bovenliggende post op het scherm met bewerkingsposten. Alleen nuttig voor hiërarchische berichttypen.Maak vervolgens de argumenten voor ons aangepaste berichttype. Plaats het volgende stuk code in onze post_type functie:
$ args = array ('labels' => $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type '=>' post ',' hierarchical '=> false,' menu_position '=> null,' supports '=> array (' title ',' editor ',' thumbnail ')); labels - Een reeks labels voor dit berichttype.openbaar - Meta-argument gebruikt om standaardwaarden te definiëren voor publicly_queriable, show_ui, show_in_nav_menus en exclude_from_search.publicly_queryable - Of query's van het posttype vanaf de voorkant kunnen worden uitgevoerd.show_ui - Of een standaard gebruikersinterface moet worden gegenereerd voor het beheer van dit berichttype.query_var - Verkeerd om te voorkomen dat query's of tekenreekswaarde van de query var voor dit berichttype worden gebruikt.herschrijven - Herschrijf permalinks met dit formaat.capability_type - De tekenreeks die moet worden gebruikt om de lees-, bewerkings- en verwijderingsmogelijkheden te bouwen.hiërarchische - Of het berichttype hiërarchisch is. Sta ouder toe om gespecificeerd te worden.menu_position - De positie in het menu om het berichttype te rangschikken zou in de admin moeten verschijnen.ondersteuningen - Een alias voor het rechtstreeks aanroepen van add_post_type_support ().Lees meer over add_post_type_support in de WordPress Codex
Nu ons berichttype is ingesteld met de instellingen, moeten we het berichttype registreren. We registreren ons berichttype door de volgende code in te voegen in onze post_type functie:
register_post_type (__ ('portfolio'), $ args); We hebben nu ons aangepaste berichttype gemaakt. Laten we de output formatteren, zodat we gebruiksvriendelijke berichten kunnen ontvangen. Begin met het creëren van een andere functie binnen onze portfolio-post-type.php het dossier.
// function: portfolio_messages BEGIN-functie portfolio_messages ($ messages) $ messages [__ ('portfolio')] = array (0 => ", 1 => sprintf (('Portfolio bijgewerkt. Bekijk portfolio'), esc_url (get_permalink ( $ post_ID))), 2 => __ ('Aangepast veld bijgewerkt.'), 3 => __ ('Aangepast veld verwijderd.'), 4 => __ ('Portfolio bijgewerkt.'), 5 => isset ($ _GET ['revision'])? Sprintf (__ ('Portfolio hersteld naar revisie van% s'), wp_post_revision_title ((int) $ _ GET ['revisie'], false)): false, 6 => sprintf (__ (' Portfolio Gepubliceerd. Portfolio bekijken '), esc_url (get_permalink ($ post_ID))), 7 => __ (' Portfolio Saved. '), 8 => sprintf (__ (' Portfolio Ingediend. Preview Portfolio '), esc_url (add_query_arg ( 'preview', 'true', get_permalink ($ post_ID)))), 9 => sprintf (__ ('Portfolio gepland voor: % 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 Updated. Preview Portfolio '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID)))),); return $ berichten; // functie: portfolio_messages END Wat we zojuist hebben gedaan is het creëren van een functie genaamd portfolio_messages dat heeft een argument nodig genaamd $ messages. Hierna creëren we een variabele die een array opslaat voor al onze berichten. We laten "0" leeg in onze array omdat we onze indexering bij 1 beginnen met onze berichten. Breng dan eindelijk onze array terug naar onze functie.
Ten slotte moeten we onze taxonomie maken. Begin met het creëren van een andere functie genaamd portfolio_filter en voer de volgende code in:
// function: portfolio_filter BEGIN-functie portfolio_filter () register_taxonomy (__ ("filter"), array (__ ("portfolio")), array ("hierarchical" => true, "label" => __ ("Filter") , "singular_label" => __ ("Filter"), "rewrite" => array ('slug' => 'filter', 'hierarchical' => true))); // functie: portfolio_filter END We beginnen met het registreren van onze taxonomie en het vervolgens toepassen van de taxonomie op ons aangepaste berichttype portefeuille. Hierna passen we de laatste instellingen van de taxonomie toe en voeren we de gemaakte labels in. De reden waarom we een taxonomie maken, is omdat we deze gebruiken als een referentiesleutel bij het sorteren van onze portfolio met Quicksand.
Nu al ons aangepaste berichttype compleet is, samen met de juiste opmaak en onze eigen taxonomie, moeten we uiteindelijk al onze code initialiseren zodat deze in de admin wordt weergegeven. Laten we beginnen met het toevoegen van de volgende code onderaan ons bestand:
add_action ('init', 'post_type'); add_action ('init', 'portfolio_filter', 0); add_filter ('post_updated_messages', 'portfolio_messages'); Zodra we dit hebben ingevoerd, moeten we onze functions.php bestand en voeg de volgende regel code in:
include ( "portfolio / portfolio-post-types.php");
We moeten ons aangepaste portfoliotype opnemen in onze functions.php bestand voor het script dat moet worden uitgevoerd wanneer de functies van uw WordPress-thema worden aangeroepen. Nu ziet u in uw admin-paneel een sectie getiteld Portefeuille met 3 subnavigatie-items genaamd "Portfolio", "Item toevoegen" en "Filter".
Nu hebben we onze volledige portfolio-instellingen voltooid, we moeten onze portfolio-items uitvoeren. We beginnen dit door een nieuw PHP-bestand te maken met de naam portfolio.php. Laten we eerst een paar essentiële zaken toevoegen voor het maken van een paginasjabloon:
// We zullen onze inhoud later toevoegen
Nu hebben we onze fundamentele paginasjabloon gemaakt die we nodig hebben om onze portfolio te vullen. We moeten eerst een pagina maken die als onze Portfolio-pagina zal fungeren, dus ga naar de Pagina's -> Nieuw toevoegen in ons dashboard. Aan de rechterkant ziet u een vak met de titel Paginakenmerken met een drop-down van Standaard sjabloon, selecteer de gewenste sjabloon die u in ons geval wilt gebruiken portefeuille moet worden geselecteerd en selecteer vervolgens Publiceren.
Laten we nu teruggaan naar het bewerken van onze Portfolio-paginasjabloon en beginnen met het invoegen van het filter voor onze portfolio. Eerst beginnen we met het omwikkelen van het filter in een ongeordende lijst en elk van de categorieën zal een element in onze lijst zijn.
Laten we wat PHP toevoegen aan ons filter om automatisch de filtercategorieën te genereren die in onze portfolio worden gebruikt.
0) foreach ($ terms as $ term) $ i ++; $ term_list. = '
Wat we hier doen is eerst de taxonomie initialiseren die we willen krijgen, in ons geval filter. Ten tweede, stel een telling in met onze categorieën om te verhogen over elk element in ons filter en pas dan een voorwaardelijke verklaring toe om te controleren of de telling die we hebben ingesteld minder is dan 0; wat betekent dat als er geen categorieën in het filter zijn of er geen categorieën zijn toegewezen aan een portfolio-item, er niets wordt uitgevoerd. Als er categorieën in ons filter zitten, willen we de uitvoer voor elk element wijzigen.
We doen dit door de volgende regel in ons segment van code:
$ term_list. = '
We maken een lijstelement dat past in onze ongeordende lijst en vervolgens stelt de "href" een leeg doelwit in omdat Quicksand het organiseren van inhoud zal afhandelen, waarna we onze klassenaam instellen op de slug van het portfolio-item voor consistente verwijzingen, en als laatste de naam van de categorie binnen onze filters uitvoeren.
Briljant, we hebben nu een dynamisch filter geïmplementeerd. Nu gaan we onze portfolio-items uitvoeren. Laten we beginnen met het doorzoeken van onze database om alle berichten voor het portfoliostijltype te krijgen en onze WordPress Loop in te stellen. We beginnen met het opzetten van een nieuw WP_Query-object en geven de juiste parameters door.
'portfolio', 'posts_per_page' => '- 1')); ?>
We wijzen ons WP_Query-object toe aan een variabele, zodat we naar onze vraag kunnen verwijzen wanneer we onze Loop initialiseren. We hebben ons berichttype ingesteld op portefeuille dus we vragen alleen naar ons aangepaste berichttype dat we eerder hebben gemaakt en uiteindelijk het posts_per_page tot -1. We gebruiken -1 zodat er geen vaste limieten zijn voor het aantal berichten per pagina, dus alle portfolio-items worden weergegeven. Als we wilden, konden we ook een willekeurig aantal invoeren en alleen het aantal portfolio-items weergeven dat hier werd ingevoerd.
Nu we een queryobject hebben waarnaar we kunnen verwijzen, stellen we onze Loop in om onze portfolio-items uit te voeren. We beginnen met het invoegen van de volgende code:
have_posts ()): while ($ wpbp-> have_posts ()): $ wpbp-> the_post (); ?>
Voordat we beginnen met het invoeren van inhoud in onze lus, gaan we onze aanbevolen afbeeldingen instellen. Open je functions.php bestand en we zullen een aantal op maat gemaakte afbeeldingsformaten toevoegen om voor elk portfolio-item te worden uitgevoerd.
Laten we eerst controleren of de huidige versie van WordPress de aanbevolen afbeelding functionaliteit en stel vervolgens een aantal algemene instellingen in zodat deze correct werkt. We voegen ondersteuning toe voor de post-thumbnails en stel een standaardgrootte in van 56px bij 56px.
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (56, 56, true); Vervolgens willen we onze eigen aangepaste miniatuurafmetingen toevoegen. Voer de volgende code in op een regel hieronder: set_post_thumbnail_size
add_image_size ('portfolio', 295, 150, true); Met deze methode kunt u uw eigen miniatuurformaat maken door eerst de referentienaam in te stellen voor de miniatuur, vervolgens de breedte en hoogte en tot slot als de miniatuur de afbeelding hard moet bijsnijden zodat deze overeenkomt met de opgegeven grootte. U kunt de afmetingen van uw afgebeelde afbeelding aanpassen aan uw lay-out; met het doel van deze tutorial heb ik een rasterindeling met 3 kolommen.
Nu we onze Featured Image-opstelling hebben ingesteld, gaan we terug naar onze paginasjabloon voor portfolio's en voeren we de afbeelding van het portfolio-item uit.
Omdat de organisatie voor elk portfolio-item het beste kan worden afgehandeld door een ongeordende lijst, zullen we er eerst een maken en vervolgens onze afgebeelde afbeelding die we zojuist hebben ingesteld uitvoeren. Voeg de volgende code in uw WordPress Loop in:
">
We controleren in eerste instantie of het thema het ondersteunt thumbnail functie. Als het thema deze functie ondersteunt, wordt het functiebeeld weergegeven met de speciale miniatuur die we eerder hebben opgegeven. Nadat onze aanbevolen afbeelding is uitgevoerd, voeren we de titel van het portfolio-item direct onder de afbeelding uit.
We moeten de verschillende elementen van elk portfolio-lijstitem aanpassen om ervoor te zorgen dat de referentie voor elke portfolio correct is voor de categorieën waaraan het item is toegewezen. Hiervoor zullen we eerst de categorieën uit onze taxonomie moeten halen. Voeg de volgende code toe binnen je Loop:
Vervolgens gaan we enkele attributen toevoegen aan ons lijstelement (li). We beginnen met het toevoegen van een data-id aan ons lijstitem, om een unieke identiteit aan elk van de portfolio-items te geven. We gaan ook een toevoegen data type; dit zal fungeren als onze verwijzing naar onze filter. Laten we ons openingslijstelement vervangen (li) met de volgende code:
We passen een telling toe aan onze data-id, en bij het doorlopen van elk item, wordt de telling verhoogd (we zullen de telling binnenkort toevoegen). Vervolgens doorlopen we elke categorie in onze taxonomie en passen we een reguliere expressie toe om de spaties te vinden en te vervangen door een "-" om overeen te komen met de naaktslak van de categorie en uiteindelijk een lege ruimte aan het einde in te voegen, zodat we ons kunnen aanmelden meer dan één categorie voor een portfolio-item.
Ten slotte gaan we ervoor zorgen dat we onze telling verhogen en een unieke verwijzing naar elk van onze portfolio-items bieden. We moeten de volgende code toevoegen net voordat we de lus beëindigen:
">
We boeken nu vooruitgang, maar voordat we verder gaan, moeten we wat jQuery-scripts gaan downloaden. We moeten de volgende scripts downloaden:
We moeten ook een JavaScript-bestand maken om al ons aangepaste jQuery te verwerken dat we binnenkort gaan schrijven. Laten we dus een leeg JavaScript-bestand maken met de naam jquery.custom.js. Nu we al onze essentiële scripts hebben, laten we onze openen functions.php en maak een blanco functie genaamd register_js. Zodra we onze lege functie hebben, gaan we onze scripts invoegen met behulp van de methoden wp_register_script en wp_enqueue_script. Ten eerste moeten we controleren of we niet bij de beheerder zijn om ervoor te zorgen dat de scripts alleen aan de voorkant worden geladen. Voer de volgende code in onze functie in:
// Registreer onze scripts functie 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 ('aangepast', get_template_directory_uri (). '/js/jquery.custom.js', 'jquery', '1.0', true); wp_enqueue_script ('jQuery'); wp_enqueue_script ('drijfzand'); wp_enqueue_script ('easing'); wp_enqueue_script ('aangepast'); Eerst met wp_register_script we specificeren een handvat als ons eerste referentie-argument bij het in de hand houden van de scripts, en voegen dan de bronlink toe aan het script als ons tweede argument (dit is van toepassing op elke registratie van een script). We specificeren ook jQuery als een afhankelijkheid om de bijgeleverde versie van WordQress van jQuery te laden wanneer we het script in wachtrij plaatsen.
Zodra we al onze scripts hebben geregistreerd, zetten we ze in wachtrij met behulp van wp_enqueue_script. We geven alle handvatten door die we gebruikten bij het registreren als een referentie om onze scripts in te leveren. Ten slotte moeten we onze functie initialiseren door de volgende code toe te voegen aan ons functions.php het dossier:
add_action ('init', 'register_js'); Nu we al onze scripts op hun plaats hebben, kunnen we beginnen met het schrijven van ons jQuery-aangepaste script voor de afhandeling van Quicksand. Laten we ons openen jquery.custom.js script en laten we de omgeving instellen door de volgende code in te voegen:
jQuery (document) .ready (function () // We zullen ons quicksand-script hier invoegen); // EINDE VAN HET DOCUMENT
Nu hebben we onze scriptstructuur, we zullen een functie aanmaken genaamd portfolio_quicksand en voer het alleen uit als de Quicksand-plug-in bestaat.
function portfolio_quicksand () // Al onze afhandeling van dandzand vindt plaats in deze functie if (jQuery (). quicksand) portfolio_quicksand ();
Ik zal het volgende in kleinere stappen opsplitsen om te begrijpen wat er allemaal gebeurt bij het maken van een Quicksand-portfolio. Laten we beginnen met het instellen van onze variabelen. Voeg de volgende code in onze portfolio_quicksand functie:
var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems;
We zullen deze variabelen vaker gebruiken, dus het is altijd een goede manier om een solide basis te krijgen voor het instellen van variabelen. Vervolgens gaan we onze variabelen toewijzen:
$ filter = $ ('. filter li.active a'). attr ('class'); $ filterLink = $ ('. filter li a'); $ container = $ ('ul.filterable-grid'); $ containerClone = $ container.clone (); We stellen eerst ons filter in op de ongeordende lijstklasse uit ons portfolio-paginasjabloon. Ten tweede hebben we een filterlink; dit zal fungeren als ons aangeklikte item binnen onze filter. Vervolgens moeten we onze container van onze portfolio-items toewijzen en tot slot hebben we een gekloonde versie van onze container nodig om de gegevens te manipuleren met Quicksand.
Vervolgens gaan we onze klikfunctie schrijven, dus wanneer een gebruiker een categorie selecteert, moet de container worden gemanipuleerd en de uitvoer van de inhoud worden weergegeven. Laten we beginnen met het aanroepen van een klikfunctie op onze filterlink:
$ filterLink.click (functie (e) // We zullen nu de inhoud voor deze functie toevoegen ...);
Laten we nu de actieve status van het lijstelement afhandelen. We beginnen met het eerst verwijderen van elke klas met een huidige actieve status, dan het filter doorzoeken en het filter opsplitsen in afzonderlijke items, en ten slotte een actieve klasse toepassen op het aangeklikte item (categorie):
$ ('. filter li'). removeClass ('active'); $ filter = $ (this) .attr ('class'). split ("); $ (this) .parent (). addClass ('active'); Dit helpt bij het stylen van je filter, omdat je het kunt geven actief geeft aan wanneer een gebruiker een categorie heeft geselecteerd.
We gaan verder en behandelen een voorwaarde voor het filteren van onze gegevens. We beginnen met eerst te controleren of allemaal is geselecteerd. Als allemaal is geselecteerd en geeft vervolgens alle elementen in onze container weer, anders worden de items weergegeven in de container die door het filter is geselecteerd.
Eerder, toen we onze portfolios paginasjabloon aan het maken waren en we een data type voor elk van onze portfolio-items, dit is waar we het zullen gebruiken als een verwijzingssleutel om onze geselecteerde gegevens te vinden.
if ($ filter == 'alle') $ filteredItems = $ containerClone.find ('li'); else $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'); Ten slotte noemen we de methode van het drijfzand en geven we onze filteredItems en al onze animatie-opties:
$ container.quicksand ($ filteredItems, duration: 750, easing: 'easeInOutCirc', adjustHeight: 'dynamic');
function portfolio_quicksand () // Onze variabelen instellen var $ filter; var $ container; var $ containerClone; var $ filterLink; var $ filteredItems // Zet ons filter $ filter = $ ('. filter li.active a'). attr ('class'); // Zet onze filter link $ filterLink = $ ('. Filter li a'); // Zet onze container $ container = $ ('ul.filterable-grid'); // Klonen van onze container $ containerClone = $ container.clone (); // Pas ons drijfzand toe om te werken aan een klikfunctie // voor elk van de filter-li-linkelementen $ filterLink.click (functie (e) // Verwijder de actieve klasse $ ('. Filter li'). RemoveClass ('actief '); // Splits elk filterelement en overschrijf ons filter $ filter = $ (this) .attr (' class '). Splitsen ("); // Pas de klasse' active 'toe op de geklikte link $ (dit ) .parent (). addClass ('actief'); // Als 'alles' is geselecteerd, geeft u alle elementen weer // else geeft alle items weer waarnaar wordt verwezen door het gegevenstype if ($ filter == 'all') $ filteredItems = $ containerClone.find ('li'); else $ filteredItems = $ containerClone.find ('li [data-type ~ =' + $ filter + ']'); // Roep tot slot de container met de functie Quicksand $ aan .quicksand ($ filteredItems, // De duur van de animatieduur: 750, // Het easing-effect bij het verlichten van easing: 'easeInOutCirc', // Hoogteaanpassing ingesteld op dynamic adjustHeight: 'dynamic');); Geweldig goed, je zou nu een volledig functioneel Quicksand-portfolio moeten hebben, maar laten we daar niet gewoon stoppen. Ik ga een extra extra plaatsen, dit is volledig optioneel, maar het zou een favoriete functie kunnen worden, en dat is Lightbox. We zullen de jQuery-plugin PrettyPhoto gebruiken voor onze Lightbox-integratie.
Het eerste dat we gaan doen, is de PrettyPhoto-plug-in downloaden.
Zodra we onze PrettyPhoto-bestanden hebben gedownload, zullen we eerst de PrettyPhoto-afbeeldingen kopiëren, die in de afbeeldingen map en dan moet je de map met de titel kopiëren Mooie foto in ons thema. We moeten ook het JavaScript-bestand van CSS en PrettyPhoto kopiëren, dus laten we ze kopiëren naar de juiste mappen in ons thema.
Nu we al onze bestanden op hun plaats hebben, moeten we ze binnen ons thema initialiseren. Binnen onze functions.php bestand, zullen we een andere functie creëren om onze stijlen te verwerken en we zullen deze functie noemen register_css. Vervolgens zullen we onze stijlen registreren en onze stijlen vervolmaken, en dus de volgende code in uw invoegen functions.php het dossier:
// Registreer onze stijlen functie 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'); We hebben al onze bestanden op hun plek en ze worden geïnitialiseerd door ons thema. Nu moeten we hier gebruik van maken en Lightbox implementeren in ons thema. Laten we ons openen portfolio.php (portfolio paginasjabloon) en voeg wat code toe aan onze Featured Image.
Eerst moeten we een groot beeld krijgen van de afgebeelde afbeelding. Dit werkt dan als de volledige afbeelding wanneer de gebruiker op de afbeelding klikt en PrettyPhoto wordt geladen. In onze WordPress Loop moeten we de volgende code invoegen:
De code die we hebben ingevoegd, zal de huidige post binnen de lus vinden en de oorspronkelijke bron van de afbeelding vinden en vervolgens de fullsize versie van de afbeelding. Zodra we onze afbeelding op ware grootte hebben teruggestuurd, dwingen we de afbeelding op te slaan in de array-index van 0. Dit wordt gebruikt voor geen opheffingen of duplicaten met onze afbeeldingen op volledige grootte..
Zodra we onze volledige afbeelding beschikbaar hebben gemaakt, zullen we PrettyPhoto nu initialiseren op onze uitgelichte afbeelding. De volgende code koppelt de fullsize afbeelding naar de afgebeelde afbeelding van het portfolio-item en geef de verwijzing naar PrettyPhoto door, vervang de code waar u uw aanbevolen afbeelding hebt gemaakt met het volgende:
">
Geweldig, we hebben al onze bestanden en scripts op hun plaats, we hebben de afbeelding op ware grootte voor onze aanbevolen afbeelding en we hebben naar onze site verwezen aanbevolen afbeelding naar onze full-size afbeelding met PrettyPhoto. Vervolgens moeten we ons JavaScript schrijven om de Lightbox te laten verschijnen en werken.
Laten we teruggaan naar onze jquery.custom.js bestand en maak nog een lege functie om onze PrettyPhoto te verwerken:
function lightbox () // Onze Lightbox-functie wordt nu toegevoegd ... if (jQuery (). prettyPhoto) lightbox ();
Nu we onze functie hebben, zullen we PrettyPhoto initialiseren. We doen dit door de volgende code toe te voegen binnen onze Lichtbak functie:
jQuery ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (animationSpeed: 'fast', diavoorstelling: 5000, thema: 'pp_default', show_title: false, overlay_gallery: false, social_tools: false); Je kunt de volledige documentatie lezen van alle parameters die PrettyPhoto accepteert in het gebruik van de plugin op: PrettyPhoto jQuery Lightbox Clone
Dus het is allemaal klaar! Lightbox-implementatie in uw WordPress-thema, maar wacht, laat me raden wanneer u op het filter klikt en Quicksand gebruikt; de Lightbox werkt niet meer. Dat komt omdat we ons Quicksand-script moeten wijzigen en nog een klein stukje code moeten doorgeven om ervoor te zorgen dat Lightbox werkt, zelfs wanneer we filteren in onze portfolio.
Dus laten we dit kleine probleem oplossen door het volgende script aan ons toe te voegen portfolio_quicksand functie binnen onze jquery.custom.js het dossier:
$ container.quicksand ($ filteredItems, function () lightbox (););
Wat we hier doen, is de Quicksand-plug-in opnieuw bellen en een functie doorgeven binnen deze oproep aan onze Lightbox-functie. Dus telkens wanneer Quicksand de inhoud filtert, wordt de Lightbox-functie genoemd het toepassen van de PrettyPhoto op elke afbeelding.
Veel mensen vinden het leuk om Quicksand te gebruiken, maar sommige mensen vinden het leuk om zowel Quicksand als paginering in hun portfolio's te gebruiken. Dit is nog een extra extra om paginering binnen uw portfolio te creëren. Ik zal de WordPress plug-in gebruiken: WP_PageNavi.
Laten we eerst de plug-in installeren en activeren. Ga naar de Plug-ins -> Nieuw toevoegen pagina in onze admin sectie en zoek WP_PageNavi, eenmaal gevonden klik Installeer nu en
