Compartir el amor de WordPress con archivos adjuntos de medios sin imagen

Mientras WordPress muestra fácilmente imágenes adjuntas a sus páginas y publicaciones (incluso sin un attachment.php archivo), los otros tipos de medios permitidos (audio, video, documento, texto, archivo, código, interactivo) no reciben el mismo amor; guarde un enlace directo al archivo adjunto. Sin embargo, no tiene que recurrir a cargar sus archivos de audio, video u otros archivos adjuntos que no sean de imagen en otro lugar (como YouTube) para mostrarlos en su sitio de WordPress. Usando el tema predeterminado de Twenty Eleven como ejemplo, te mostraré las funciones integradas de WordPress para compartir el amor con archivos adjuntos que no son imágenes.

---

Cómo maneja WordPress los archivos adjuntos por defecto

Bajo el capó, los elementos multimedia son solo WordPress puestos, por lo tanto, se muestran de acuerdo con la jerarquía de plantillas de WordPress. El cargador de plantillas realiza una comprobación para ver si la publicación es un archivo adjunto y tiene una plantilla de archivo adjunto. Si no existe una plantilla de adjuntos, WordPress volverá a la plantilla de publicación única o la predeterminada index.php plantilla (si la plantilla de publicación única no existe).

Chequeo de plantillas

En la única publicación o index.php plantillas, los temas de WordPress probablemente mostrarán el contenido usando el contenido. Esta función tiene un filtro predeterminado adjunto. - prepend_attachment - que agregará automáticamente un enlace adjunto a la página (usando el wp_get_attachment_link Función) si determina que se trata de una publicación adjunta. Sin embargo, los argumentos utilizados aquí en la llamada a wp_get_attachment_link solo proporcionará una visualización real de los archivos adjuntos de la imagen; los archivos adjuntos que no son de imagen solo obtienen un enlace directo al archivo adjunto. (¿Dónde está el amor?) Podríamos mostrar más que un simple enlace para adjuntos sin imagen con un simple cambio de argumentos para wp_get_attachment_link, pero desafortunadamente no tenemos una manera de cambiar los argumentos antes de llamar a la función.

Visualización de adjuntos de imagen predeterminada frente a Visualización de adjuntos sin imagen predeterminada

Así que echemos un vistazo a lo que nosotros puede hacer para mostrar nuestros archivos adjuntos sin imagen un poco de amor.

---

Tomando el control de la visualización de archivos adjuntos sin imagen

Paso 1 Determine el tipo de archivo

Lo primero que haremos es determinar el tipo de archivo del archivo adjunto. WordPress permite cargar varios tipos de archivos, que se encuentran en el get_allowed_mime_types función que se muestra a continuación.

Tipos de archivos permitidos por defecto

Aunque la pantalla de administración de la Biblioteca de medios solo muestra filtros para los tres tipos de archivos predeterminados, la página Editar para cada elemento de medios muestra el tipo de archivo exacto. El tipo de archivo está en formato MIME (MIME es un estándar de larga data para clasificar los tipos de archivos en Internet) que tiene dos partes: tipo y subtipo separados por /. En la imagen de abajo, el tipo es "video" y el subtipo es "mp4". Este conocimiento será útil para el paso 2.

Tipos de archivos predeterminados mostrados en la biblioteca de medios
Tipos de archivos mostrados en la página Editar medios

Función incorporada de WordPress

WordPress tiene una función incorporada para determinar el tipo de archivo de un archivo adjunto utilizando el ID de publicación del archivo adjunto.

get_post_mime_type ($ ID)

Esta función devolverá el tipo de archivo en formato MIME, tal como se muestra en la página de edición del elemento multimedia en el administrador.
Ahora estamos listos para tomar el control de mostrar archivos adjuntos sin imagen en nuestros archivos de plantillas de temas.

Paso 2 Crear archivo de plantilla de tema

Jerarquía de plantillas

Como se muestra en la imagen, la jerarquía de plantillas de WordPress tiene cuatro posibles plantillas de adjuntos que buscará una vez que determine que estamos mostrando una publicación de adjuntos. Podemos manejar la visualización de cada tipo de archivo en el attachment.php archivo o podemos crear archivos de plantilla separados para cada tipo MIME y / o subtipo MIME. Echemos un vistazo a estas opciones..

Opción 1. Archivo Attachment.php

Podemos manejar la visualización de cada tipo de archivo en attachment.php usando nuestro práctico get_post_mime_type función.

Primero, obtendremos el tipo de archivo del archivo adjunto (dentro del bucle):

CARNÉ DE IDENTIDAD ); ?>

Luego, podemos hacer una declaración de cambio en el tipo de archivo para proporcionar el código para mostrar cada tipo:

Entonces, si nos gustaría mostrar archivos adjuntos de audio (mp3) y video (mp4), nuestra declaración de cambio se vería así:

Utilizando attachment.php es excelente si solo tiene unos pocos tipos de archivos para mostrar (o su pantalla para cada tipo de archivo seguirá el mismo diseño básico) ya que nos permite mantener nuestro código en un solo archivo. Si tenemos varios tipos de archivos y / o planea personalizar el diseño de visualización para cada tipo de archivo, querrá echar un vistazo a la opción 2.

opcion 2. $ mimetype.php, $ mimesubtype.php, o $ mimetype_$ mimesubtype.php

attachment.php es en realidad la plantilla alternativa para los archivos de plantilla con el nombre del tipo MIME o subtipo MIME de la publicación adjunta actual. WordPress buscará archivos con nombres como $ mimetype.php, $ mimesubtype.php, o $ mimetype_$ mimesubtype.php antes de caer de nuevo a attachment.php.

Así que en lugar de llamar get_post_mime_type y al usar una instrucción switch, podemos crear un archivo de plantilla con el nombre del tipo o subtipo MIME:

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

y coloca el código para mostrar ese tipo de archivo.

Nota: Los nombres de los archivos se enumeran en el orden en que WordPress los llamará. Asi que $ mimetype.php primero, luego retroceder a $ mimesubtype.php, luego retroceder a $ mimetype_$ mimesubtype.php.

Ahora veamos algunos ejemplos..

---

Ejemplos

Visualización de documentos

No sé sobre usted, pero personalmente no me gusta tener que descargar un documento en mi computadora solo para verlo. Vamos a pedir la ayuda del Visor de documentos de Google. Puede mostrar archivos PDF, hojas de cálculo, presentaciones y muchos otros tipos de archivos enumerados en la Ayuda de Google. No hay ningún requisito para que sus documentos estén alojados en Google Docs, ya que integrará un visor directamente en la página al pasarle una URL de archivo y establecer el parámetro incrustado en verdadero.

Así es como manejaríamos la visualización de documentos usando el Visor de Google Docs en attachment.php después de obtener el tipo de archivo:

 switch ($ tipo) caso 'application / pdf': caso 'application / msword':?>   
O podríamos crear uno de los siguientes archivos de plantilla:
 
 
aplicacion.php
 
pdf.php
 
aplicacion_pdf.php
 
 
y coloque el siguiente código donde le gustaría mostrar el contenido dentro del bucle:
 
 
 
Observe que estamos pasando la URL del archivo adjunto al visor de Google Docs mediante el uso de la wp_get_attachment_url función.
 
Resultado final:
  
Audio
 
Para mostrar (reproducir) los archivos de audio cargados en WordPress y proporcionar una experiencia de navegador cruzada consistente, vamos a solicitar la ayuda de la biblioteca audio.js ligera que nos permite usar HTML5 audio etiqueta en cualquier lugar, retrocediendo a flash en navegadores que aún no admiten audio HTML5.
 
Primero, descargue y coloque el audio.js archivos en su tema. Entonces, en tu funciones.php archivo, agregue el código para poner en cola audio.js JavaScript solo en las páginas adjuntas (siguiendo las mejores prácticas). Estoy seguro de que hay otras formas de hacer esto, incluyendo el uso de lo recomendado wp_enqueue_scripts Acción y algunas declaraciones condicionales, sin embargo, voy a ilustrar el método en este artículo: Consejo rápido: Incluyendo JavaScript y CSS solo en ciertas páginas del sitio
 
 add_filter ('attachment_template', 'ncb_attachment_template'); function 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'); devuelve $ template_path;  función ncb_audio_js () echo ''; 
 
Entonces, podemos agregar el siguiente código a nuestro attachment.php expediente:
 
   
 
Aquí está nuestra declaración de cambio completo hasta este punto:
 
      
O podríamos crear uno de los siguientes archivos de plantilla:
 
 
audio.php
 
mpeg.php
 
audio_mpeg.php
 
 
y agregue nuestro código de audio dentro del bucle donde nos gustaría mostrar el contenido:
 
 
 
Nota: Si usa archivos de plantilla de tipo de archivo, el JavaScript solo debe estar en cola en esas páginas.
 
Resultado final:
  
Vídeo
 
Podemos mostrar (reproducir) los archivos de video subidos a WordPress de manera muy similar al audio, excepto que vamos a pedir la ayuda de video.js Biblioteca que nos permite utilizar el HTML5. vídeo etiqueta en cualquier lugar, retrocediendo a flash en navegadores que aún no admiten video HTML5.
 
Al igual que con el audio, descargaremos los archivos, los agregaremos a nuestro directorio de temas y pondremos en cola video.js javascript solo en páginas adjuntas, guarde para agregar un archivo CSS:
 
 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');
 
Aquí está el completo funciones.php retazo:
 
 add_filter ('attachment_template', 'ncb_attachment_template'); function 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'); devuelve $ template_path;  función ncb_audio_js () echo ''; 
 
Entonces, podemos agregar el siguiente código a nuestro attachment.php expediente:
 
  ';  
Aquí está nuestra declaración de cambio completo:
 
      ';  
O podríamos crear uno de los siguientes archivos de plantilla:
 
 
video.php
 
mp4.php
 
video_mp4.php
 
 
y agregue nuestro código de video dentro del bucle donde nos gustaría mostrar el contenido:
 
 
 
Recuerda: Cuando se utilizan archivos de plantilla de tipo de archivo en lugar de attachment.php, Deberá cambiar el nombre del filtro utilizado para llamar a la función que pone en cola su JavaScript..
 
Resultado final:
  
 
Resumen
 
¡Los archivos adjuntos sin imagen en WordPress también necesitan amor! Usando solo dos funciones de WordPress, puede mantener sus archivos de medios en su sitio y personalizar la visualización y el diseño de cualquiera de los tipos de archivos permitidos.
 
Descargar y / o bifurcar el código de trabajo en Github.
 
Referencias en este artículo
 
Funciones de WordPress
 
 
el contenido
 
prepend_attachment
 
wp_get_attachment_link
 
get_allowed_mime_types
 
get_post_mime_type
 
wp_get_attachment_url
 
 
Archivos de plantilla de WordPress
 
 
attachment.php
 
index.php
 
single.php
 
$ mimetype.php
 
$ mimesubtype.php
 
$ mimetype_$ mimesubtype.php
 



		
			
	   
	




Código