Accentsconagua

Dele WordPress Love With Non-Image Media Attachments

Kode
Share

Mens WordPress enkelt viser bilder knyttet til sidene og innleggene dine (selv uten en attachment.php fil), de andre tillatte medietyper (lyd, video, dokument, tekst, arkiv, kode, interaktiv) får ikke samme kjærlighet - lagre en direkte kobling til vedleggsfilen. Men du må ikke ty til å laste opp lyd-, video- eller andre ikke-bildemedievedlegg andre steder (som YouTube) for å vise dem på WordPress-siden din. Ved å bruke standard Twenty Eleven-temaet som et eksempel, viser jeg deg WordPress 'innebygde funksjoner for å dele kjærligheten med ikke-bildemedievedlegg.

Hvordan WordPress håndterer vedlegg som standard

Under hetten er medieelementer bare WordPress innlegg, Derfor blir de vist i henhold til WordPress-templathierarkiet. Malen lasteren gjør en sjekk for å se om innlegget er et vedlegg og har en vedleggsmal. Hvis en vedleggsmal ikke eksisterer, faller WordPress tilbake til enkeltmalen eller standard index.php mal (hvis den enkle innleggsmalen ikke eksisterer).


Malekontroll

I det enkelte innlegg eller index.php maler, vil WordPress-temaer sannsynligvis vise innholdet ved hjelp av innholdet. Denne funksjonen har et standardfilter festet til det - prepend_attachment - som automatisk vil legge til en vedleggslink til siden (ved hjelp av wp_get_attachment_link funksjon) hvis det avgjør at dette er et vedlegg post. Men argumentene som brukes her i kallet til wp_get_attachment_link vil bare gi faktisk visning for bildevedlegg - filer som ikke inneholder bildevedlegg, får bare en direkte kobling til vedleggsfilen. (Hvor er kjærligheten?) Vi kunne potensielt vise mer enn bare en kobling for ikke-bildevedlegg med en enkel endring av argumenter til wp_get_attachment_link, men dessverre har vi ikke mulighet til å endre argumenter før funksjonen kalles.


Standard bildevedleggsvisning vs. Standard ikke-bildevedleggsvisning

Så la oss ta en titt på hva vi kan gjør for å vise våre bilder uten vedlegg litt kjærlighet.

Ta kontroll over ikke-bilde medievedleggsvisning

Trinn 1 Bestem filtypen

Det første vi skal gjøre er å bestemme filtypen for vedlegget. WordPress tillater opplasting av flere filtyper, funnet i get_allowed_mime_types funksjon vist nedenfor.


Standard Tillatte filtyper

Selv om Media-administrasjonsskjermbildet bare viser filtre for de tre standard filtyper, viser redigeringssiden for hvert medieelement den eksakte filtypen. Filtypen er i MIME-formatet (MIME er en stående standard for klassifisering av filtyper på Internett) som har to deler: type og undertype separert av /. I bildet nedenfor er typen "video" og subtypen er "mp4". Denne kunnskapen kommer til nytte for trinn 2.


Standard filtyper vist i Mediebibliotek
Filtyper vist på Rediger medieside

Innebygd WordPress-funksjon

WordPress har en innebygd funksjon for å bestemme filtypen til et vedlegg ved hjelp av vedleggets post-ID.

get_post_mime_type ($ ID)

Denne funksjonen returnerer filtypen i MIME-format, akkurat som det vises på medieelementets redigeringsside i administrasjonen.
Nå er vi klare til å ta kontroll over å vise ikke-vedlegg i våre temalmatfiler.

Trinn 2 Lag temafilfil


Mal hierarki

Som vist på bildet, har WordPress-mallhierarkiet fire mulige vedleggsmaler som det vil se etter når det avgjør at vi viser et vedlegg. Vi kan enten håndtere visning av hver filtype i attachment.php fil eller vi kan opprette separate malfiler for hver MIME-type og / eller MIME-undertype. La oss ta en titt på disse alternativene.

Alternativ 1. attachment.php File

Vi kan håndtere visning av hver filtype i attachment.php bruker vår praktiske get_post_mime_type funksjon.

Først får vi filtypen til vedlegget (mens du er inne i sløyfen):

ID); ?>

Deretter kan vi gjøre en bryteretning på filtypen for å gi koden for å vise hver type:

Så hvis vi ønsker å vise lyd (mp3) og video (mp4) vedlegg, vil vår bryteretning se slik ut:

Ved hjelp av attachment.php er flott hvis du bare har noen filtyper som skal vises (eller skjermen for hver filtype vil følge samme grunnleggende layout) som det tillater oss å beholde vår kode i en fil. Hvis vi har flere filtyper og / eller du planlegger å tilpasse skjermoppsettet for hver filtype, vil du se på alternativ 2.

Alternativ 2. $ mimetype.php, $ mimesubtype.php eller $ mimetype_$ mimesubtype.php

attachment.php er faktisk fallbackmalen for malfiler med navnet MIME-typen eller MIME-undertypen for gjeldende vedleggspost. WordPress vil se etter filer med navn som $ mimetype.php, $ mimesubtype.php, eller $ mimetype_$ mimesubtype.php før de faller tilbake til attachment.php.

Så i stedet for å ringe get_post_mime_type og ved hjelp av en bryteretning, kan vi bare lage en malfil med navnet på MIME-typen eller undertypen:

  • audio.php
  • mpeg.php
  • audio_mpeg.php

og legg koden til å vise den filtypen.

Merk: Filnavnene er oppført i rekkefølge som WordPress vil kalle dem. Så $ mimetype.php først, deretter fallback til $ mimesubtype.php, og deretter tilbake til $ mimetype_$ mimesubtype.php.

La oss nå se på noen eksempler.

eksempler

Viser dokumenter

Jeg vet ikke om deg, men jeg personlig ikke liker å måtte laste ned et dokument til datamaskinen min bare for å se det. La oss få hjelp av den innebygde Google Docs Viewer. Den kan vise PDF-filer, regneark, presentasjoner og mange andre filtyper som er oppført i Google Hjelp. Det er ikke noe krav for at dokumentene dine skal hostes på Google Dokumenter, da det vil legge inn en seer rett på siden ved å sende den en filadresse og sette den innebygde parameteren til ekte.

Slik kan vi håndtere visning av dokumenter ved hjelp av Google Docs Viewer i attachment.php etter å ha fått filtypen:

 bytte ($ type) case 'application / pdf': case 'application / msword':?>   
Eller, kan vi opprette en av følgende malfiler:
 
     
  • application.php
    •  
  • pdf.php
    •  
  • application_pdf.php
    •  
 
og legg inn følgende kode hvor du vil vise innholdet inne i løkken:
 
 
 
Legg merke til at vi sender URL-en til vedleggsfilen til Google Docs-visningsprogrammet ved hjelp av wp_get_attachment_url funksjon.
 
Endelig resultat:
  
Audio
 
For å vise (spille) lydfiler som er lastet opp til WordPress og gi en konsistent kryssbrowseropplevelse, skal vi innhente hjelp fra det lette lyd.js biblioteket som lar oss bruke HTML5 lyd tag hvor som helst, faller tilbake til blits i nettlesere som ikke støtter HTML5 lyd ennå.
 
Først, last ned og plasser audio.js filer i temaet ditt. Så, i din functions.php fil, legg koden til enqueue the audio.js bare javascript på vedleggssider (etter beste praksis). Jeg er sikker på at det finnes andre måter å gjøre dette på, inkludert bruk av anbefalt wp_enqueue_scripts handling og noen betingede utsagn - men jeg skal illustrere metoden i denne artikkelen: Hurtig Tips: Inkluderer JavaScript og CSS bare på enkelte nettsider
 
 add_filter ('attachment_template', 'ncb_attachment_template'); funksjon ncb_attachment_template ($ template_path) wp_enqueue_script ('audio-js', get_template_directory_uri (). '/js/audiojs/audiojs/audio.min.js'); add_action ('wp_head', 'ncb_audio_js'); returner $ template_path;  funksjon ncb_audio_js () echo ''; 
 
Deretter kan vi legge til følgende kode i vår attachment.php fil:
 
   
 
Her er vår fulle bryteretning til dette punktet:
 
      
Eller, kan vi opprette en av følgende malfiler:
 
     
  • audio.php
    •  
  • mpeg.php
    •  
  • audio_mpeg.php
    •  
 
og legg til lydkoden vår inne i sløyfen der vi vil vise innholdet:
 
 
 
Merk: Hvis du bruker filtype malfiler, må JavaScript bare være enqueued på disse sidene.
 
Endelig resultat:
  
video
 
Vi kan vise (spille) videofiler som er lastet opp til WordPress, det samme som lyd, bortsett fra at vi skal anskaffe hjelp fra Video.js bibliotek som lar oss bruke HTML5 video tag hvor som helst, faller tilbake til flash i nettlesere som ikke støtter HTML5 video ennå.
 
Akkurat som med lyd, laster vi ned filene, legger dem til vår temakatalog, og enker på Video.js bare javascript på vedleggssider, lagre for tillegg av en CSS-fil:
 
 wp_enqueue_script ('video-js', get_template_directory_uri (). '/js/video-js/video.min.js'); wp_enqueue_style ('video-js-css', get_template_directory_uri (). '/js/video-js/video-js.min.css');
 
Her er den fulle functions.php snippet:
 
 add_filter ('attachment_template', 'ncb_attachment_template'); funksjon ncb_attachment_template ($ template_path) wp_enqueue_script ('audio-js', get_template_directory_uri (). '/js/audiojs/audiojs/audio.min.js'); add_action ('wp_head', 'ncb_audio_js'); wp_enqueue_script ('video-js', get_template_directory_uri (). '/js/video-js/video.min.js'); wp_enqueue_style ('video-js-css', get_template_directory_uri (). '/js/video-js/video-js.min.css'); returner $ template_path;  funksjon ncb_audio_js () echo ''; 
 
Deretter kan vi legge til følgende kode i vår attachment.php fil:
 
  ';  
Her er vår fulle bryteretning:
 
      ';  
Eller, kan vi opprette en av følgende malfiler:
 
     
  • video.php
    •  
  • mp4.php
    •  
  • video_mp4.php
    •  
 
og legg til vår videokode inne i løkken der vi ønsker å vise innholdet:
 
 
 
Huske: Når du bruker filtype malfiler i stedet for attachment.php, Du må endre navnet på filteret som brukes til å ringe til funksjonen som kalkulerer JavaScript.
 
Endelig resultat:
  
 
Sammendrag
 
Ikke-bilde medievedlegg i WordPress trenger kjærlighet også! Ved å bruke bare to WordPress-funksjoner, kan du beholde mediefiler på nettstedet ditt og tilpasse visningen og utformingen av noen av de tillatte filtyper.
 
Last ned og / eller skjåk arbeidskoden på Github.
 
Referanser i denne artikkelen
 
WordPress-funksjoner
 
     
  • innholdet
    •  
  • prepend_attachment
    •  
  • wp_get_attachment_link
    •  
  • get_allowed_mime_types
    •  
  • get_post_mime_type
    •  
  • wp_get_attachment_url
    •  
 
WordPress malfiler
 
     
  • attachment.php
    •  
  • index.php
    •  
  • single.php
    •  
  • $ mimetype.php
    •  
  • $ mimesubtype.php
    •  
  • $ mimetype_$ mimesubtype.php
    •  





	
	
			
	   
	







Kode
×