Accentsconagua

Opprette ditt eget bildegalleri sidemaler i WordPress

Kode
Share

I dag skal jeg gå deg gjennom å lage en tilpasset mal for "Galleri" -sidene i WordPress. Jeg husker tidligere at jeg ville implementere et galleri i temaet mitt og bli frustrert over alternativene. WordPress 'innebygde galleri fungerer bra, men passer ikke helt til regningen mesteparten av tiden. I tillegg er plugins som NexGen-galleriet ofte mer enn du trenger eller vil ha. Jeg vil vise deg hvor enkelt det er å lage en galleri-malingsside som du enkelt kan tilpasse og modifisere for fremtidige temaer eller versjoner.

Oversikt

Gjennom opplæringen skal jeg vise deg hvordan du lager en gallerimall på temaet som følger med WordPress, TwentyEleven. Du kan bruke hvilket som helst tema du vil, men for dette eksempelets skyld bruker jeg TwentyEleven.

Trinn 1 Kopier den eksisterende sidemalen

Gå inn i temakatalogen, wp-innhold / tema / motiv at du vil legge til galleriemalen til. Finne page.php og kopier og lim inn og endre navn til mal-gallery.php. For egendefinerte maler liker jeg å legge til prefiks'mall- 'som det gjør det enklere å finne.

Trinn 2 Definer Galleri Mal

WordPress gjenkjenner maldefinisjoner i overskriften til temaene malfiler. For å definere malen legger du til en PHP-kommentar som eksempelet nedenfor. Å gjøre det åpner mal-gallery.php at du nettopp har opprettet og legg til kommentaarblokken som angir malnavnet.

http://codex.wordpress.org/Theme_Development#Custom_Page_Templates

Trinn 3 Rediger mal for å legge inn sidebilder

WordPress behandler vedlegg til sider som innlegg post_type - vedlegg med siden som foreldre. WordPress har en innebygd funksjon for å spørre innlegg som er barn på en bestemt side post / post_type. get_children (); aksepterer alle slags parametere for å trekke barns innhold tilknyttet en forelder. Sjekk ut dokumentasjonen på http://codex.wordpress.org/Function_Reference/get_children. Denne WordPress-funksjonen lar oss enkelt trekke vedlegg for en bestemt side.

For vårt galleri vil vi at bildene skal vises før innholdet. Så vi skal laste sidebildene i sidens løkke, men før innholdet. For TwentyEleven kan du plassere koden rett under . I andre temaer kan du sette inn koden i løkken ovenfor . Sjekk koden nedenfor for å se hvordan get_children ($ args); er implementert og les forklaringen etter det.

  -1, // Bruke -1 laster alle innlegg 'orderby' => 'menu_order', // Dette sikrer at bildene er i rekkefølgen som er angitt i siden mediebehandler 'rekkefølge' => 'ASC', 'post_mime_type' => 'bilde ', // Pass på at det ikke trekker andre ressurser, som videoer' post_parent '=> $ post-> ID, // Viktig del - sikrer at de tilknyttede bildene er lastet' post_status '=> null,' post_type '=> 'vedlegg'); $ images = get_children ($ args); // Fortsatt under ...?>

Forklaring av $ args

  1. 'numberposts' Vi kan definere mengden bilder som funksjonen trekker. For å spørre alle bilder, bruk -1
  2. 'rekkefølge etter' Vi kunne bestille etter tittel eller dato eller et annet alternativ, men fordelene med 'menu_order' er at bestillingen i mediehåndteringen for siden blir den rekkefølgen bildene lastes inn.
  3. 'Post_mime_type' Vi vil bare ha innleggene som er 'bilder'
  4. 'Post_parent' Vi ønsker å trekke barna til den nåværende siden. Vi kan få tilgang til det globale $ innlegget, og det er eiendoms-ID for å passere inn som parent_id
  5. 'Post_type' 'post_mime_type' sørger for at det sikres at bare bilder trekkes, men å definere 'post_type' som 'vedlegg' bidrar til å redusere spørringen.

Bekreft innlegget har bilder og sløyfe

Etter get_children ($ args); spørrer vedlegg og returnerer verdier vi vil bekrefte at spørringen returnerte resultater. Enkelte sider kan ikke ha bilder vedlagt, og vi trenger ikke å løpe gjennom tomme resultater. Vi vil bruke en betingelse for å se om $ bilder returnerer en verdi, og hvis den gjør det, vet vi at siden har vedlegg og så kan vi løse gjennom dem.

 // Fortsatt ovenfra ... hvis ($ bilder) ?> 
  <?php echo $image->POST_TITLE; ?>

For hvert bildevedlegg ønsker vi å utføre bildet. Hver $ bilde objektet har flere egenskaper du kan få tilgang til og utdata. Det viktigste for dette eksemplet er kilden til hvert bilde, som er guid eiendom. For tilgangs- og SEO-formål kan vi utvide bildetittel og plassere bildene i bildet alt og tittelattributter.

Trinn 4 Legg til Javascript Gallery Plugin

For neste trinn skal vi legge til et jQuery-plugin for å bringe vårt galleri til livs. Plugin vi skal bruke er Flux Slider, en glidebryter Javascript / jQuery plugin. Last ned kilden og plasser flux.min.js inne i wp-innhold / temaer / motiv / js mappe. Siden jeg bruker TwentyEleven-temaet, er jQuery ikke inkludert på den offentlige siden, så jeg må sørge for å inkludere den. Hvis du bruker et annet tema, må du kontrollere at jQuery er lastet inn.

Redigere footer.php

Inkluder jQuery (hvis ikke inkludert aleady) og flux.min.js Skript i bunnteksten - sørg for flux.min.js er under jQuery-inkluderingen, men før wp_footer (); funksjon.

Slutten

Som du kan se, er det ganske enkelt å trekke bilder knyttet til en side og tilpasse utdataene sine. Du kan enkelt inkludere samme sløyfe i innlegg eller en egendefinert innleggstype.

Du kan enkelt bytte jQuery-plugin-modulen for et annet valg du ønsker. Alt du trenger å gjøre er å redigere loop-HTML med riktig merking og inkludere plugin.

WordPress er veldig fleksibel, og dette er et annet eksempel på hvor enkelt det er å bygge med det!

Kode
×