Share
prettyPhoto is een lightbox-plugin gemaakt door Stéphane Caron. Vandaag gaan we leren hoe je de plug-in kunt verzenden met je WordPress-thema's.
Het geven van een ingebouwde lightbox-optie in plaats van dat gebruikers een plug-in moeten downloaden, heeft veel voordelen voor auteurs van thema's. Voor mij is het in staat om de lightbox te onderwerpen aan mijn WordPress-thema's. Het is ook een leuke functie die beschikbaar is voor de gebruikers van uw thema, natuurlijk moet u hen ook een optie geven om de functionaliteit uit te schakelen. Met dat gezegd, laten we er naar toe gaan.
Ga naar margins for-errors.com en download de plug-in. Zodra je het hebt, gaan we een nieuwe directorystructuur voor de plug-in maken om dingen voor onszelf gemakkelijker te maken.
Laten we eerst een paar dingen verwijderen die we niet nodig hebben. Verwijder in de map afbeeldingen alles behalve de map prettyPhoto en de inhoud. Verwijder in de hoofdmap het bestand xhr_response.html en index.html. Verplaats nu jquery.prettyPhoto.js vanuit de js-map naar de root-plugin-map en verwijder de js-map.
Tenslotte, hernoem de map naar prettyPhoto en upload de map naar de directory van je thema, je hebt waarschijnlijk al een js of scripts map dus upload die, voor deze tutorial laten we aannemen dat het in je-theme / js staat
Voordat we de plugin-bestanden in ons thema laden, moeten we jQuery laden. We gaan de door Google gehoste versie van jQuery gebruiken met de methode die we delen op Digging in Wordpress, dus laten we het fragment aan onze functies toevoegen.php.
Accentsconagua
if (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); function 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); Misschien wilt u de voor- en nadelen van het gebruik van een CDN voor jQuery overwegen. WordPress wordt geleverd met een kopie van jQuery, maar het gebruik van de gehoste versie van Google kan de prestaties van uw site ten goede komen. Als je een thema-auteur bent, zou ik me houden aan het gebruik van de verzonden versie. Bekijk de discussie over een andere tutorial om je te helpen een besluit te nemen.
U zult merken dat we een ander bestand hebben toegevoegd met de naam customprettyPhoto.js. Hier zullen we de plug-in leuk laten spelen met onze postafbeeldingen en deze initialiseren. Dus laten we dat bestand maken en het in je prettyPhoto-map plaatsen. OK, laten we prettyPhoto initialiseren.
We moeten een regel jQuery toevoegen om de vereiste prettyPhoto class prettyPhoto toe te voegen aan de ankertags die onze postafbeeldingen omringen. Omdat we jQuery aan het praten zijn, laten we het gebruiken om dit te bereiken. Voeg het volgende rechts toe na $ (document) .ready (function () waar we controleren of de pagina is geladen.
$ ('. entry-content a'). has ('img'). addClass ('prettyPhoto'); Vervang .entry-content door elke klassennaam of ID waarmee je je postcontent hebt ingepakt en je zou de class succesvol hebben toegevoegd aan alle links die je postafbeeldingen inpakken. Als je de documentatie voor prettyPhoto hebt bekeken, zul je zien dat het een rel-attribuut gebruikt, maar in plaats daarvan hebben we een klasse gebruikt. Als u dit wel doet, worden validatiefouten in onze HTML voorkomen, omdat rel-kenmerken alleen bepaalde toegestane waarden kunnen hebben volgens de HTML5-specificatie.
Vervolgens willen we de beschrijving van prettyPhoto inschakelen. We moeten een kleine hindernis overwinnen. PrettyPhoto wil dat we titelkenmerken toevoegen aan onze ankertags die zullen worden gebruikt voor de beschrijvingen, maar WordPress voegt titels toe aan afbeeldingslabels. Om dit op te lossen, zullen we een paar regels jQuery schrijven die de tag van de afbeeldingstitel zullen nemen en dezelfde titel zullen instellen op de ankertag die de afbeelding omwikkelt..
$ ('. entry-content a img'). klik (functie () var desc = $ (this) .attr ('title'); $ ('. entry-content a'). has ('img') .attr ('title', desc);); Hier vuren we een functie af wanneer de gebruiker op een postafbeelding klikt. We pakken de title-tag van de afbeelding en koppelen deze aan het anker. Deze stap maakt het een stuk gemakkelijker voor de gebruikers van uw thema om beschrijvingen toe te voegen. Als je de functionaliteit helemaal wilt uitschakelen, zorg er dan voor dat elke ankerstitel leeg is, als deze helemaal ontbreekt, want daar is niet eens een lege titel, in prettyPhoto wordt alleen "undefined" weergegeven.
We moeten de CSS voor prettyPhoto toevoegen aan het thema. Terug naar je function.php-bestand en voeg de volgende regel toe aan de top:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Omdat we de afbeeldingen en CSS in hun originele mappen en ten opzichte van elkaar hielden zoals ze oorspronkelijk waren, hoeven we ons geen zorgen te maken over kapotte afbeeldingen.
Laten we eens kijken hoe ondertitels en titels kunnen worden toegevoegd die onze prettyPhoto zal gebruiken. Als we naar de bovenstaande afbeelding kijken, zien we de relatie tussen de tag voor het plaatsen van een afbeelding achter en de titel van de koppeling die we kunnen instellen bij het toevoegen van een afbeelding aan een bericht of pagina.
En dat is alles. We hebben photos succesvol toegevoegd aan ons thema. Lees de plugin-documentatie voor meer gebruik en opties. PrettyPhoto kan meer dan alleen afbeeldingen aan, het werkt met video's, ajax en meer. Het wordt ook geleverd met een handvol thema's die bij uw thema passen of u op zijn minst een goed startpunt geven.
