Share
Während WordPress auf einfache Weise Bilder an Ihre Seiten und Beiträge anfügt (auch ohne attachment.php Datei), die anderen zulässigen Medientypen (Audio, Video, Dokument, Text, Archiv, Code, interaktiv) erhalten nicht dieselbe Liebe - speichern Sie einen direkten Link zur Anhangsdatei. Sie müssen Ihre Audio-, Video- oder anderen Anhänge, die keine Bildmedien sind, an anderer Stelle (wie YouTube) hochladen, um sie auf Ihrer WordPress-Site anzuzeigen. Am Beispiel des Standardmotivs Twenty Eleven zeige ich Ihnen die in WordPress integrierten Funktionen zum Teilen der Liebe mit Nicht-Bildmedienanhängen.
Unter der Haube sind Medienelemente nur WordPress Beiträge, Daher werden sie gemäß der WordPress-Vorlagenhierarchie angezeigt. Das Vorlagenladeprogramm überprüft, ob es sich bei dem Beitrag um eine Anlage handelt und über eine Anlagenvorlage verfügt. Wenn keine Anhangsvorlage vorhanden ist, greift WordPress auf die Vorlage für einzelne Beiträge oder auf die Standardeinstellung zurück index.php Vorlage (wenn die Vorlage für einzelne Beiträge nicht vorhanden ist).
Im Einzelbeitrag oder index.php Vorlagen, WordPress-Designs werden wahrscheinlich den Inhalt mit anzeigen der Inhalt. Mit dieser Funktion ist ein Standardfilter verbunden - prepend_attachment - Dadurch wird der Seite automatisch ein Anhangslink hinzugefügt wp_get_attachment_link function), wenn festgestellt wird, dass es sich um einen Anhängeposten handelt. Die Argumente, die hier beim Aufruf von verwendet werden wp_get_attachment_link zeigt nur die tatsächliche Anzeige von Bildanhängen an - Nicht-Bildanhangdateien erhalten nur einen direkten Link zur Anhangdatei. (Wo ist die Liebe?) Wir könnten möglicherweise mehr als nur einen Link für Anhänge ohne Bilder anzeigen, wenn Sie die Argumente einfach ändern wp_get_attachment_link, Leider haben wir keine Möglichkeit, die Argumente zu ändern, bevor die Funktion aufgerufen wird.
Schauen wir uns also an, was wir tun können tun, um unseren Nicht-Bild-Anhängen etwas Liebe zu zeigen.
Als Erstes bestimmen wir den Dateityp der Anlage. WordPress ermöglicht das Hochladen verschiedener Dateitypen, die in der get_allowed_mime_types Funktion unten gezeigt.
Obwohl im Administratorbildschirm der Medienbibliothek nur Filter für die drei Standarddateitypen angezeigt werden, wird auf der Bearbeitungsseite für jedes Medienelement der genaue Dateityp angezeigt. Der Dateityp liegt im MIME-Format vor (MIME ist ein seit langem bestehender Standard zum Klassifizieren von Dateitypen im Internet), der aus zwei Teilen besteht: Typ und Untertyp, getrennt durch /. In der Abbildung unten ist der Typ "video" und der Untertyp ist "mp4". Dieses Wissen wird für Schritt 2 von Nutzen sein.
WordPress verfügt über eine integrierte Funktion zum Ermitteln des Dateityps eines Anhangs anhand der Anhangs-Post-ID.
get_post_mime_type ($ ID)
Diese Funktion gibt den Dateityp im MIME-Format zurück, genauso wie er auf der Bearbeitungsseite des Medienelements im Administrator angezeigt wird.
Jetzt können Sie die Anzeige von Anhängen ohne Bilder in unseren Vorlagen-Vorlagendateien steuern.
Wie im Bild gezeigt, verfügt die WordPress-Vorlagenhierarchie über vier mögliche Anhangsvorlagen, nach denen sie sucht, nachdem festgestellt wurde, dass wir einen Anhang anzeigen. Wir können entweder die Anzeige jedes Dateityps im attachment.php Datei oder wir können separate Vorlagendateien für jeden MIME-Typ und / oder MIME-Subtyp erstellen. Lassen Sie uns einen Blick auf diese Optionen werfen.
Wir können die Anzeige jedes Dateityps in handhaben attachment.php mit unserem Handy get_post_mime_type Funktion.
Zuerst erhalten wir den Dateityp des Anhangs (innerhalb der Schleife):
ICH WÜRDE ); ?>
Dann können wir eine Wechselanweisung für den Dateityp ausführen, um den Code für die Anzeige jedes Typs bereitzustellen:
Wenn wir also Audio- (mp3) und Video (mp4) -Anhänge anzeigen möchten, würde unsere switch-Anweisung folgendermaßen aussehen:
Verwenden attachment.php ist großartig, wenn Sie nur wenige Dateitypen anzeigen möchten (oder Ihre Anzeige für jeden Dateityp dasselbe grundlegende Layout hat), da wir unseren Code in einer Datei speichern können. Wenn wir mehrere Dateitypen haben und / oder das Anzeigelayout für jeden Dateityp anpassen möchten, sollten Sie sich die Option 2 ansehen.
Accentsconagua
$ mimetype.php, $ mimesubtype.php oder $ mimetype_$ mimesubtype.phpattachment.php ist eigentlich die Fallback-Vorlage für Vorlagendateien mit dem Namen des MIME-Typs oder MIME-Untertyps des aktuellen Anhangs. WordPress sucht nach Dateien mit Namen wie $ mimetype.php, $ mimesubtype.php, oder $ mimetype_$ mimesubtype.php bevor sie zurückfallen attachment.php.
Also statt zu rufen get_post_mime_type Mit einer switch-Anweisung können wir einfach eine Vorlagendatei mit dem Namen des MIME-Typs oder -Untertyps erstellen:
und geben Sie den Code ein, um diesen Dateityp anzuzeigen.
Hinweis: Die Dateinamen werden in der Reihenfolge aufgelistet, in der sie von WordPress aufgerufen werden. So $ mimetype.php zuerst, dann Rückfall zu $ mimesubtype.php, dann Rückfall zu $ mimetype_$ mimesubtype.php.
Nun wollen wir uns einige Beispiele ansehen.
Ich weiß nicht, wie es Ihnen geht, aber ich persönlich mag es nicht, ein Dokument auf meinen Computer herunterladen zu müssen, um es anzusehen. Lassen Sie uns die Hilfe des einbettbaren Google Docs Viewer anfordern. Es kann PDFs, Tabellenkalkulationen, Präsentationen und viele andere Dateitypen anzeigen, die in der Google-Hilfe aufgelistet sind. Es ist nicht erforderlich, dass Ihre Dokumente in Google Docs gehostet werden, da ein Viewer direkt in die Seite eingebettet wird, indem Sie eine Datei-URL übergeben und den eingebetteten Parameter auf true setzen.
Im Folgenden wird beschrieben, wie Dokumente mit dem Google Docs Viewer in angezeigt werden attachment.php Nachdem Sie den Dateityp erhalten haben:
Schalter ($ type) Fall 'application / pdf': Fall 'application / msword':?>Oder wir könnten eine der folgenden Vorlagendateien erstellen:
Platzieren Sie den folgenden Code dort, wo Sie den Inhalt innerhalb der Schleife anzeigen möchten:
Beachten Sie, dass wir die URL der Anlagendatei mit dem Google Docs-Viewer übermitteln wp_get_attachment_url Funktion.
Endergebnis:
Um Audiodateien anzuzeigen (wiederzugeben), die in WordPress hochgeladen wurden, und eine konsistente Browser-übergreifende Erfahrung zu bieten, werden wir die Hilfe der leichtgewichtigen Bibliothek audio.js in Anspruch nehmen, mit der HTML5 verwendet werden kann Audio- taggen Sie überall und greifen Sie in Browsern zurück, die noch kein HTML5-Audio unterstützen.
Laden Sie zuerst das herunter und platzieren Sie es audio.js Dateien in Ihrem Design. Dann in deiner Functions.php Datei, fügen Sie den Code hinzu, um die audio.js Javascript nur auf Anhangseiten (Best Practices). Ich bin sicher, dass es andere Möglichkeiten gibt, dies zu tun - einschließlich der empfohlenen wp_enqueue_scripts Aktion und einige Bedingungsanweisungen - ich werde jedoch die Methode in diesem Artikel erläutern: Schneller Tipp: Einschließlich JavaScript und CSS nur auf bestimmten Seiten der Site
add_filter ('attachment_template', 'ncb_attachment_template'); Funktion 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; Funktion ncb_audio_js () echo ''; Dann können wir unseren folgenden Code hinzufügen attachment.php Datei:
Hier ist unsere vollständige Wechselaussage bis zu diesem Punkt:
Oder wir könnten eine der folgenden Vorlagendateien erstellen:
und fügen Sie unseren Audiocode in die Schleife ein, wo wir den Inhalt anzeigen möchten:
Hinweis: Wenn Sie Dateityp-Vorlagendateien verwenden, muss das JavaScript nur auf diesen Seiten in die Warteschlange gestellt werden.
Endergebnis:
Wir können Videodateien, die in WordPress hochgeladen wurden, ähnlich wie Audio anzeigen (abspielen), es sei denn, wir werden die Hilfe von video.js Bibliothek, die uns die Verwendung von HTML5 ermöglicht Video taggen Sie überall und greifen Sie in Browsern zurück, die noch kein HTML5-Video unterstützen.
Genau wie bei Audio laden wir die Dateien herunter, fügen sie zu unserem Designverzeichnis hinzu und erfassen das video.js Javascript nur auf Anhangseiten, außer für das Hinzufügen einer CSS-Datei:
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 ist alles Functions.php schnipsel:
add_filter ('attachment_template', 'ncb_attachment_template'); Funktion 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; Funktion ncb_audio_js () echo ''; Dann können wir unseren folgenden Code hinzufügen attachment.php Datei:
';Hier ist unsere vollständige Wechselaussage:
';Oder wir könnten eine der folgenden Vorlagendateien erstellen:
und fügen Sie unseren Videocode in die Schleife ein, in der wir den Inhalt anzeigen möchten:
Merken: Bei Verwendung von Dateityp-Vorlagendateien anstelle von attachment.php, Sie müssen den Namen des Filters ändern, der zum Aufrufen der Funktion verwendet wird, die Ihr JavaScript in eine Warteschlange stellt.
Endergebnis:
Nicht-Image-Medienanhänge in WordPress brauchen auch Liebe! Mit nur zwei WordPress-Funktionen können Sie Ihre Mediendateien auf Ihrer Site behalten und die Anzeige und das Layout aller zulässigen Dateitypen anpassen.
Laden Sie den Arbeitscode auf Github herunter und / oder verzweigen Sie ihn dort.
WordPress-Funktionen
der Inhaltprepend_attachmentwp_get_attachment_linkget_allowed_mime_typesget_post_mime_typewp_get_attachment_urlWordPress-Vorlagendateien
$ mimetype.php$ mimesubtype.php$ mimetype_$ mimesubtype.php