Share
prettyPhoto är ett lightbox-plugin gjord av Stéphane Caron. Idag ska vi lära oss hur du skickar pluginprogrammet med dina WordPress-teman.
Att ge ett inbyggt ljusbox alternativ istället för att göra det möjligt för användare att ladda ner ett plugin har många fördelar för temaförfattare. För mig är det möjligt att temat ljuslådan för att passa till mina WordPress-teman. Det är också en bra funktion att ha tillgång till ditt temas användare, självklart bör du också ge dem ett alternativ att inaktivera funktionaliteten. Med det sagt, låt oss ta itu med det.
Gå över till marginaler for-rerors.com och ladda ner plugin. När du har fått det ska vi skapa en ny katalogstruktur för plugin för att göra det enklare för oss själva.
Låt oss först ta bort några saker vi inte behöver. I bilderna mapp raderas allt bortsett från prettyPhoto-mappen och dess innehåll. Ta bort filen xhr_response.html och index.html i rotmappen. Flytta nu jquery.prettyPhoto.js från mappen js till mappen root plugin och ta bort js-mappen.
Slutligen byta namn på mappen till prettyPhoto och ladda upp mappen till ditt temas katalog, du har förmodligen redan en js- eller skriptkatalog så ladda upp till den, för det här tutorialet antar att det är i ditt tema / js
Innan vi laddar upp pluginfilerna i vårt tema måste vi ladda jQuery. Vi ska använda Google-värdversionen av jQuery med hjälp av den metod som delas på Grävning till Wordpress, så låt oss lägga till snippet till våra funktioner.php.
Accentsconagua
om (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); funktion register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http'. ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ( 'jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ( 'prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ( 'customprettyPhoto_script'); Du kanske vill överväga fördelar och nackdelar med att använda en CDN för att tjäna jQuery. WordPress skickar med en kopia av jQuery, men med Googles värdversion kan det vara till nytta för din webbplats. Om du är en temaförfattare skulle jag hålla fast vid att använda den levererade versionen. Kolla in diskussionen om en annan handledning för att hjälpa dig att skapa ditt eget sinne.
Du märker att vi har lagt till en annan fil som heter customprettyPhoto.js. Det här är där vi ska göra plugin-spelningen snyggt med våra postbilder och initialisera det. Så låt oss skapa den filen och lägga den i din prettyPhoto-katalog. OK, låt oss initiera prettyPhoto.
Vi måste lägga till en rad jQuery för att lägga till den nödvändiga prettyPhoto-klassen prettyPhoto till ankarkoderna som omger våra postbilder. Eftersom vi pratar jQuery låt oss använda det för att uppnå detta. Lägg till följande direkt efter $ (dokument) .ready (funktion () där vi ser till att sidan är laddad.
$ ('inmatningsinnehåll a'). har ('img'). addClass ('prettyPhoto'); Byt ut .entry-innehåll med vilket klassnamn eller ID du har förpackat ditt inlägg med och du borde ha lagt till klassen till alla länkar som sätter in dina inlägg. Om du tittar på dokumentationen för prettyPhoto ser du att det står att använda ett rel attribut men istället har vi använt en klass. Detta förhindrar valideringsfel i vår HTML, eftersom rel attribut kan endast ha vissa tillåtna värden enligt HTML5-specifikationen.
Nästa vill vi aktivera prettyPhotos beskrivning alternativ. Vi måste övervinna ett litet hinder, vilket är det prettyPhoto vill att vi lägger till titelfunktioner på våra ankare-taggar som kommer att användas för beskrivningarna men WordPress lägger till titlar till bildtaggar. För att lösa detta ska vi skriva ett par rader jQuery som tar bildtiteltaggen och ställer in samma titel på ankaretiketten som sveper bilden.
$ ('entry-content a img'). Klicka på (funktion () var desc = $ (detta) .attr ('title'); $ ('entry-content a'). .attr ('title', desc);); Här brandar vi en funktion när användaren klickar på en postbild. Vi tar tag i bildens titelmärke och bifogar den till ankaren. Det här steget gör det mycket enklare för ditt tema användare att lägga till beskrivningar. Om du vill inaktivera funktionaliteten måste du bara ställa in att varje ankars titel är tom, om den saknas helt, eftersom det inte ens finns en tom titel, kommer prettyPhoto bara att visa "odefinierad" istället.
Vi måste lägga till CSS för prettyPhoto på temat. Tillbaka till din functions.php-fil och lägg till följande rad till toppen:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Eftersom vi behöll bilderna och CSS i sina ursprungliga mappar och i förhållande till varandra som de var ursprungligen behöver vi inte oroa oss för brutna bilder.
Låt oss titta på hur man lägger till bildtexter och titlar som vår prettyPhoto kommer att använda. Titta på bilden ovan kan vi se förhållandet mellan postbildet Alt-taggen och länknamnstaggen vi kan ställa in när du lägger till en bild på ett inlägg eller en sida.
Och det är det, vi har framgångsrikt lagt till prettyPhoto till vårt tema. Se till att du läser plugin dokumentationen för fler användningar och alternativ. PrettyPhoto kan hantera mer än bara bilder, det fungerar med videor, ajax och mer. Det skickas också med en handfull teman som passar ditt tema ur lådan eller ger dig en bra utgångspunkt.
