Share
prettyPhoto er et lightbox-plugin laget av Stéphane Caron. I dag skal vi lære å sende pluginet med WordPress-temaene.
Å gi et innebygd lightbox-alternativ i stedet for å la brukerne laste ned et plugin, har mange fordeler for temaforfattere. For meg er det mulig å temat lysboksen for å passe til mine WordPress-temaer. Det er også en fin funksjon å ha tilgjengelig for temaets brukere, selvfølgelig bør du også gi dem mulighet til å deaktivere funksjonaliteten. Med det sagt, la oss komme til det.
Gå over til marginer for-rerors.com og last ned plugin. Når du har fått det, skal vi lage en ny katalogstruktur for plugin for å gjøre det enklere for oss selv.
La oss først slette noen ting vi ikke trenger. I bildemappen slettes alt bortsett fra prettyPhoto-mappen og innholdet. I rotmappen, slett filen xhr_response.html og index.html. Flytt nå jquery.prettyPhoto.js fra js-mappen til root plugin-mappen og slett js-mappen.
Endelig omdøpe mappen til prettyPhoto og last opp mappen til temaet ditt katalog, du har sannsynligvis allerede en js eller skript katalog så last opp til det, for denne opplæringen la oss anta at det er i ditt tema / js
Før vi laster opp pluginfilene i vårt tema, må vi laste inn jQuery. Vi skal bruke Google Hosted-versjonen av jQuery ved hjelp av metoden som deles på Graving i Wordpress, så la oss legge til utsnittet til våre funksjoner.php.
Accentsconagua
hvis (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); funksjon 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 vil kanskje vurdere fordelene og ulempene ved å bruke en CDN til å betjene jQuery. WordPress sender med en kopi av jQuery, men bruk av Googles vertsbaserte versjon kan ha fordelen på nettstedets ytelse. Hvis du er en temaforfatter, ville jeg holde fast ved å bruke den sendte versjonen. Sjekk ut diskusjonen om en annen veiledning for å hjelpe deg med å lage ditt eget sinn.
Du vil legge merke til at vi har lagt til en annen fil som heter customprettyPhoto.js. Dette er hvor vi skal gjøre plugin-spillet bra med våre innleggsbilder og initialisere det. Så la oss lage den filen og sette den i din prettyPhoto-katalog. OK, la oss initialisere prettyPhoto.
Vi må legge til en linje med jQuery for å legge til den nødvendige prettyPhoto-klassen prettyPhoto til ankeretikettene som omgir våre innleggsbilder. Siden vi snakker jQuery la oss bruke den til å oppnå dette. Legg til følgende rett etter $ (dokument) .ready (funksjon () der vi sørger for at siden er lastet inn.
$ ('. entry-content a'). har ('img'). addClass ('prettyPhoto'); Erstatt .entry-innhold med uansett klassenavn eller ID du har pakket inn innlegget ditt med, og du burde ha lagt til klassen til alle koblinger som legger inn dine innlegg. Hvis du hadde en titt på dokumentasjonen for prettyPhoto, vil du se det står å bruke et rel attribut, men i stedet har vi brukt en klasse. Å gjøre det forhindrer valideringsfeil i HTML-en vår fordi rel attributter kan bare ha visse tillatte verdier i henhold til HTML5-spesifikasjonen.
Neste vil vi aktivere prettyPhotos beskrivelse alternativ. Vi må overvinne en liten hindring, som er at prettyPhoto vil at vi skal legge til tittelattributter til våre ankeretiketter som vil bli brukt til beskrivelsene, men WordPress legger til titler til bildekoder. For å løse dette, skriver vi et par linjer med jQuery som tar bildetitteltaket og angir samme tittel på ankeretiketten som bryter bildet.
$ ('entry-content a img'). klikk (funksjon () var desc = $ (dette) .attr ('title'); $ ('entry-content a'). .attr ('title', desc);); Her brenner vi en funksjon når brukeren klikker på et innleggsbilde. Vi tar tak i bildens tittel og festes til ankeret. Dette trinnet gjør det mye lettere for temaets brukere å legge til beskrivelser. Hvis du vil deaktivere funksjonaliteten, må du bare sørge for å sette hver ankertittel for tom, hvis den mangler helt, siden det ikke engang er en tom tittel, vil prettyPhoto bare vise "undefined" i stedet.
Vi må legge til CSS for prettyPhoto til temaet. Tilbake til din functions.php-fil og legg til følgende linje til toppen:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Siden vi holdt bildene og CSS i sine opprinnelige mapper og i forhold til hverandre som de var opprinnelig, behøver vi ikke å bekymre deg for ødelagte bilder.
La oss se på hvordan du legger til bildetekster og titler som vår prettyPhoto vil bruke. Ser vi på bildet ovenfor, kan vi se forholdet mellom postbildet alt-taggen og koblingstiteltaggen vi kan angi når du legger til et bilde i et innlegg eller en side.
Og det er det, vi har lyst til å legge ganske bilde til vårt tema. Pass på å lese plugin-dokumentasjonen for flere bruksområder og alternativer. PrettyPhoto kan håndtere mer enn bare bilder, det fungerer med videoer, ajax og mer. Den leveres også med en håndfull temaer som passer til temaet ditt, eller gir deg et godt utgangspunkt.
