Bruk av bilder når du viser en arkivliste i WordPress kan være veldig kraftig. Det kan øke den visuelle appellen til arkivsidene og nettstedet ditt samlet, og det kan bidra til å illustrere hva nettstedet ditt handler om.

WordPress gjør det enkelt med kjente bilder, slik at du kan vise det uthevede bildet for hvert innlegg når du sender ut innlegget via løkken.

Denne opplæringen er den første av en todelerserie hvor du lærer hvordan du oppretter en malfil for å vise bilder for et egendefinert innleggstypearkiv og stil arkivsiden for å lage et rutenett med bilder med posttitlene overlaid når brukeren svinger over et bilde.

I denne første delen lærer du følgende:

• Slik registrerer du en egendefinert innleggstype for å jobbe med når du oppretter arkivsiden
• Hvordan kode loopen for å vise bildene og titlene riktig
• Parametrene og klassene du må legge til i bildet og tittelen for å maksimere tilgjengeligheten og gjøre det mulig å legge til CSS for å utforme bildestøtten

I neste del lærer du hvordan du koder CSS for å vise bildestøtten din med svingeffekten.

Ressurser Du trenger for denne opplæringen

Denne opplæringen bruker et barn tema med Twenty Twelve tema som sin forelder. Du trenger en WordPress installasjon satt opp med dette temaet installert (det skal installeres som standard). Hvis du er usikker på hvordan du oppretter et barntema, kan du se instruksjonene på WordPress Codex.

Du trenger også en kodeditor med FTP-tilgang til nettstedet ditt, med mindre du utvikler deg lokalt, i så fall trenger du ikke FTP.

Du kan laste ned kodesamlingen, inkludert barnets temafiler, ved hjelp av nedlastingslinken ovenfor.

Registrering av egendefinert innleggstype

Det første trinnet er å registrere din egendefinerte innleggstype 'dyr'.

I ditt barn tema, opprett en ny functions.php fil og legg til følgende for det:

  __ ('Dyr'), 'singular_name' => __ ('dyr'), 'add_new' => __ ('Nytt dyr'), 'add_new_item' => __ ('Legg til nytt dyr'), 'edit_item' = ' > __ ('Rediger dyr'), 'new_item' => __ ('Nytt dyr'), 'view_item' => __ ('Se dyr'), 'search_items' => __ ('Søk dyr'), 'ikke funnet '=> __ (' Ingen dyr funnet '),' not_found_in_trash '=> __ (' Ingen dyr funnet i søppel ')); $ args = array ('labels' => $ etiketter, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => utdrag ',' egendefinerte felt ',' miniatyrbilde ',' sideattributter '),' taxonomies '=> array (' post_tag ',' kategori ');); register_post_type ('animal', $ args);  add_action ('init', 'wptp_create_post_type'); ?>

Dette registrerer egendefinert innleggstype ved hjelp av to parametere:

• 'dyr', navnet på den egendefinerte innleggstypen
• $ args, en rekke argumenter for den egendefinerte innleggstypen. Disse inkluderer argumenter for støtte, om posttypen er hierarkisk (det virker ikke, så oppfører seg som en tag), om posttypen har et arkiv, som mst skal være sant for arkivsiden din, og etikettene som er definert som en matrise med $ etiketter.

Funksjonen for å registrere den egendefinerte innleggstypen er deretter koblet til WordPress ved hjelp av 'i det' action hook, som betyr at den kjører når WordPress er intialised.

Lagre din functions.php fil.

Den nye posttypen vil nå bli vist i WordPress admin-menyen som vist på skjermbildet:

Etter å ha gjort dette, er neste trinn å legge til noen data. Legg til noen dyr, med et kjennetegnet bilde og litt dummy tekst for hver. Du vil da få en liste over dyr:

Gjør arkivoppføringsadressen

Før du jobber med malfilen for å vise innlegg fra den nye egendefinerte innleggstypen din, må du sette opp permalinkene dine slik at du enkelt kan få tilgang til siden på nettstedet ditt som viser arkivet for den nye egendefinerte innleggstypen.

På Permalinks-skjermbildet, rediger innstillingene for permalinks slik at "ganske permalinks" er slått på, ved å klikke på % Postname% alternativ. Dette betyr at du enkelt kan skrive inn nettadressen til posttypens arkiv.

Lagre endringene dine i permalink.

Vise arkivsiden

Skriv inn nettadressen til nettstedet ditt i nettleseren din, etterfulgt av /dyr for å vise arkivet. Når det gjelder min demo-side, er den fullstendige nettadressen http://rachelmccollin.co.uk/wptutsplus-image-archive/animal/. Dette vil vise arkivet for egendefinert innleggstype:

Som du kan se, for øyeblikket viser siden det kjente bildet, tittelen og alt innholdet for hvert dyr. Hvis du ruller nedover siden, ser du alle oppført.

Det neste trinnet vil være å lage en malfil for å vise bare bildet og tittelen for hvert dyr.

Opprette en malfil for den egendefinerte posttyparkivet

For å vise dyrene riktig, skal du lage en malfil spesielt for å vise arkiver av den tilpassede posttypen.

Legge til Inkluderingsetiketter og Arkivtittel

I barnetemaet ditt, opprett en ny, blankt fil som heter arkiv-animal.php.

Legg til koden for å ringe inkluderer - topptekst, bunntekst og sidebar, pluss åpnings- og lukkekoder for elementene som skal vises på siden. Disse elementene stemmer overens med andre malfiler ved hjelp av temaet Twenty Twelve, og vil bevare overordnet temaets styling:

  
 
 // la plass til arkiv tittelen // la plass her for løkken 
 
  

Deretter legger du til arkiv tittelen som vises som sidetittel. Dette går etter åpningen 

 stikkord:

Dette bruker post_type_archive_title () for å vise navnet på posttypen hvis arkiv vises. Det bryter dette inn i a og en

tag for å bevare konsistens med overordnet tema når det gjelder semantikk og styling.

Legge til løkken og populere den med innhold

Deretter legger du til grunnkoden for sløyfen under arkivoverskriften:

  // la plass her for å legge til innholdsutgangen for hvert innlegg 

Du har nå en tom sløyfe som kjører i arkivsidene dine, men det vil ikke skrive ut noe enda.

Legg til følgende inne i løkken:

  // la plass her for å legge til innholdsutgangen for hvert innlegg 

Du har nå en tom sløyfe som kjører i arkivsidene dine, men det vil ikke skrive ut noe enda.

Legg til følgende inne i løkken:

 
  "arkivbilde", "alt" => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt));); ?> "> 

Dette bruker the_post_thumbnail () for å vise det kjente bildet for hvert innlegg (eller hvert dyr). Parametrene for dette er som følger:

• 'Thumbnail' - størrelsen på bildet som vil bli vist, som er miniatyrstørrelsen
• $ attr - en rekke attributter: klassen av img element utgang av the_post_thumbnail () funksjon, som vil bli brukt til styling; og 'Alt' attributt, som bruker strip_tags for å vise noen alt attributter definert når bildet ble lastet opp minus noen HTML-koder. Dette bruker $ wp_postmeta for å få tilgang til metadataene for bildet

Dette bildet er inne i en lenke til post-permalinken (">).

Det neste trinnet er å legge til posttittelen under bildet. Gjør dette ved å legge til følgende kode under koden for å vise det kjente bildet, men over lukkingen stikkord:

 
">

Dette legger til tittel på posten (dvs. dyrets navn) inne i en annen lenke til post-permalinken, som igjen er inne i en h2 tag med arkiv-tittelen klasse. Å legge til denne klassen vil hjelpe til med styling senere og h2 tag legger til semantikk til posttittelen og er nyttig for tilgjengelighet.

Din komplette malfil vil nå inneholde følgende:

  
 
  
  
   
  "arkivbilde", "alt" => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt));); ?> "> 
">
 
  
 
  

Lagre malfilen din og gå tilbake til arkivsiden i nettleseren din. Når du oppdaterer siden, finner du at bildet og tittelen nå vises for hvert innlegg. I tillegg har sidetittelen endret fra 'Arkiv' til 'Dyr', noe som er mye mer nyttig. Slik ser arkivsiden ut nå:

Du har nå bildene og titlene på plass, men de vises under hverandre, og det er ingen svingeffekt. I neste del av denne opplæringen vil jeg vise deg hvordan du legger til CSS som skal gjøre tre hovedtyper:

• Vis bildene i et rutenett
• Skjul titlene
• Lag titlene når brukeren svinger musen over et bilde

Etter at du har gjort det, vil du ha et attraktivt bildebasert arkivliste som du kan bruke til alle prosjekter der innlegg gjør bruk av kjente bilder.

---

Nyttige ressurser

Codex sider:

• Barn temaer
• Mal hierarki
• Sløyfen
• Viser utvalgte bilder med the_post_thumbnail

Guider:

• Opprette barnemner
• Den komplette veiledningen til egendefinerte innleggstyper
• En nybegynners guide til løkken
  
• Slik legger du til kjente bilder til temaet ditt

Kode