Share
Terwijl WordPress eenvoudig afbeeldingen weergeeft die zijn gekoppeld aan uw pagina's en berichten (zelfs zonder een attachment.php bestand), de andere toegestane mediatypen (audio, video, document, tekst, archief, code, interactief) krijgen niet dezelfde liefde - sla een directe link naar het bijlagebestand op. Maar u hoeft geen toevlucht te nemen tot het elders uploaden van uw audio-, video- of andere niet-afbeelding media-bijlagen (zoals YouTube) om ze op uw WordPress-site weer te geven. Met het standaard Twenty Eleven-thema als voorbeeld, laat ik je de ingebouwde functies van WordPress zien om de liefde te delen met niet-beeldmedia-bijlagen.
Onder de motorkap zijn media-items gewoon WordPress posts, daarom worden ze weergegeven volgens de WordPress-sjabloonhiërarchie. De sjabloonlader controleert of het bericht een bijlage is en een bijlagenjabloon heeft. Als er geen bijlagensjabloon bestaat, zal WordPress terugvallen op de sjabloon met één bericht of de standaardsjabloon index.php sjabloon (als de sjabloon met één bericht niet bestaat).
In de enkele post of index.php sjablonen, WordPress-thema's zullen waarschijnlijk de inhoud weergeven de inhoud. Aan deze functie is een standaardfilter gekoppeld - prepend_attachment - die automatisch een bijlagekoppeling naar de pagina zal toevoegen (met behulp van de wp_get_attachment_link functie) als dit bepaalt dat dit een bijlage is. De argumenten die hier worden gebruikt in de aanroep naar wp_get_attachment_link geeft alleen de daadwerkelijke weergave voor beeldbijlagen weer - bijlagen zonder afbeeldingen krijgen alleen een directe link naar het bijlagebestand. (Waar is de liefde?) We zouden mogelijk meer dan alleen een link kunnen weergeven voor niet-afbeeldingbijlagen met een eenvoudige wijziging van argumenten in wp_get_attachment_link, maar helaas hebben we geen manier om de argumenten te wijzigen voordat de functie wordt aangeroepen.
Dus laten we eens kijken naar wat we doen kan doe om onze niet-afbeeldingbijlagen wat liefde te tonen.
Het eerste wat we zullen doen, is het bepalen van het bestandstype van de bijlage. WordPress maakt het uploaden van verschillende bestandstypen mogelijk, te vinden in de get_allowed_mime_types onderstaande functie.
Hoewel het beheerdersscherm van de mediabibliotheek alleen filters voor de drie standaardbestandstypen weergeeft, geeft de pagina Bewerken voor elk media-item het exacte bestandstype aan. Het bestandstype heeft de MIME-indeling (MIME is een aloude standaard voor het classificeren van bestandstypen op internet) die uit twee delen bestaat: type en subtype gescheiden door de /. In de afbeelding hieronder is het type "video" en het subtype "mp4". Deze kennis is handig voor stap 2.
WordPress heeft een ingebouwde functie voor het bepalen van het bestandstype van een bijlage met behulp van de bijlage-ID.
get_post_mime_type ($ id)
Deze functie retourneert het bestandstype in MIME-indeling, net zoals het wordt weergegeven op de bewerkingspagina van het media-item in de beheerder.
Nu zijn we klaar om de controle te nemen over het weergeven van niet-afbeeldingbijlagen in onze themasjabloonbestanden.
Zoals in de afbeelding wordt weergegeven, heeft de hiërarchie van de WordPress-sjabloon vier mogelijke bijlagen sjablonen waarnaar wordt gezocht, nadat deze bepaalt dat we een bijlagebet weergeven. We kunnen de weergave van elk bestandstype in de attachment.php bestand of kunnen we aparte sjabloonbestanden maken voor elk MIME-type en / of MIME-subtype. Laten we deze opties eens bekijken.
We kunnen de weergave van elk bestandstype aan attachment.php met behulp van onze handige get_post_mime_type functie.
Eerst krijgen we het bestandstype van de bijlage (binnen de lus):
ID KAART ); ?>
Vervolgens kunnen we een switch-instructie voor het bestandstype uitvoeren om de code te leveren voor het weergeven van elk type:
Dus als we audio- (mp3) en video (mp4) -bijlagen willen weergeven, ziet onze switch-instructie er als volgt uit:
Gebruik makend van attachment.php is geweldig als je maar een paar bestandstypen hoeft weer te geven (of je weergave voor elk bestandstype zal dezelfde basislay-out volgen), omdat we onze code in één bestand kunnen houden. Als we verschillende bestandstypen hebben en / of van plan bent om de weergave-indeling aan te passen voor elk bestandstype, moet u optie 2 bekijken..
Accentsconagua
$ mimetype.php, $ mimesubtype.php, of $ mimetype_$ mimesubtype.phpattachment.php is in feite de fallback-sjabloon voor sjabloonbestanden met de naam van het MIME-type of MIME-subtype van de huidige bijlading. WordPress zoekt naar bestanden met namen als $ mimetype.php, $ mimesubtype.php, of $ mimetype_$ mimesubtype.php voordat je teruggaat naar attachment.php.
Dus in plaats van bellen get_post_mime_type en met behulp van een switch-instructie kunnen we gewoon een sjabloonbestand maken met de naam van het MIME-type of -subtype:
en plaats de code om dat bestandstype weer te geven.
Notitie: De bestandsnamen worden weergegeven in de volgorde waarin WordPress ze belt. Zo $ mimetype.php eerst, dan fallback aan $ mimesubtype.php, dan terugvallen op $ mimetype_$ mimesubtype.php.
Laten we nu eens naar enkele voorbeelden kijken.
Ik weet niets over u, maar ik vind het persoonlijk niet leuk om een document naar mijn computer te moeten downloaden om het te kunnen bekijken. Laten we de hulp inroepen van de integreerbare Google Docs Viewer. Het kan pdf's, spreadsheets, presentaties en vele andere bestandstypen weergeven die worden vermeld in Google Help. Uw documenten hoeven niet te worden gehost in Google Documenten omdat het een kijker rechtstreeks op de pagina zal insluiten door het een bestands-URL door te geven en de ingesloten parameter in te stellen op true.
Dit is hoe we omgaan met het weergeven van documenten met de Google Docs Viewer in attachment.php na het verkrijgen van het bestandstype:
switch ($ type) case 'application / pdf': case 'application / msword':?>Of we kunnen een van de volgende sjabloonbestanden maken:
en plaats de volgende code waar u de inhoud binnen de lus wilt weergeven:
U ziet dat we de URL van het bijlagebestand doorgeven aan de Google Docs-viewer met behulp van de wp_get_attachment_url functie.
Eindresultaat:
Om audiobestanden weer te geven die naar WordPress zijn geüpload en om een consistente browserervaring te bieden, gaan we de hulp in van de lichtgewicht audio.js-bibliotheek waarmee we de HTML5 kunnen gebruiken audio overal taggen, terugvallen naar flash in browsers die nog geen HTML5-audio ondersteunen.
Download en plaats eerst het audio.js bestanden in uw thema. Vervolgens in uw functions.php bestand, voeg de code toe om het te vervolmaken audio.js javascript alleen op pagina's met bijlagen (volgens de beste werkwijzen). Ik weet zeker dat er andere manieren zijn om dit te doen - inclusief het gebruik van de aanbevolen methode wp_enqueue_scripts actie en enkele voorwaardelijke uitspraken - ik ga echter de methode in dit artikel illustreren: Snelle tip: JavaScript en CSS alleen op bepaalde site-pagina's opnemen
add_filter ('attachment_template', 'ncb_attachment_template'); functie 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'); return $ template_path; functie ncb_audio_js () echo ''; Vervolgens kunnen we de volgende code toevoegen aan onze attachment.php het dossier:
Hier is onze volledige switch-statement tot nu toe:
Of we kunnen een van de volgende sjabloonbestanden maken:
en voeg onze audiocode toe in de loop waar we de inhoud willen weergeven:
Notitie: Als u bestandstypesjabloonbestanden gebruikt, moet JavaScript alleen op die pagina's worden uitgelijnd.
Eindresultaat:
We kunnen videobestanden die naar WordPress zijn geüpload vrijwel gelijk aan audio weergeven, behalve dat we de hulp inroepen van de video.js bibliotheek waarmee we de HTML5 kunnen gebruiken video- overal taggen, terugvallen naar flash in browsers die nog geen HTML5-video ondersteunen.
Net als bij audio, zullen we de bestanden downloaden, ze toevoegen aan onze themamap en het album in de wacht slepen video.js javascript alleen op bijlagepagina's, opslaan voor de toevoeging van een CSS-bestand:
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'); Hier is het vol functions.php snippet:
add_filter ('attachment_template', 'ncb_attachment_template'); functie 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'); return $ template_path; functie ncb_audio_js () echo ''; Vervolgens kunnen we de volgende code toevoegen aan onze attachment.php het dossier:
';Dit is onze volledige switchinstructie:
';Of we kunnen een van de volgende sjabloonbestanden maken:
en voeg onze videocode toe in de lus waar we de inhoud willen weergeven:
Onthouden: Bij gebruik van bestandstypen sjabloonbestanden in plaats van attachment.php, u moet de naam van het filter wijzigen dat wordt gebruikt om de functie aan te roepen die uw JavaScript oproept.
Eindresultaat:
Niet-afbeelding media-bijlagen in WordPress hebben ook liefde nodig! Met slechts twee WordPress-functies kunt u uw mediabestanden op uw site bewaren en de weergave en lay-out van elk van de toegestane bestandstypen aanpassen.
Download en / of vervuil de werkcode op Github.
WordPress-functies
de inhoudprepend_attachmentwp_get_attachment_linkget_allowed_mime_typesget_post_mime_typewp_get_attachment_urlWordPress-sjabloonbestanden
$ mimetype.php$ mimesubtype.php$ mimetype_$ mimesubtype.php