SummArg | Cursos y recursos para webmasters

21/11/2012

Insertar documentos para descargar en WordPress con sus respectivos iconos según tipo de archivo

WordPress nos permite adjuntar prácticamente cualquier tipo de archivo desde el gestor de archivos de la plataforma. Una vez subido el archivo nos ofrece “insertarlo” en nuestra entrada, si el archivo es un formato de imagen mostrará la misma con unas cuantas opciones para imágenes, pero si es otro tipo de archivo colocará el link a la descarga del mismo.

Con un poco de código podemos indicarle a nuestro WordPress que debe aplicar un estilo determinado según Mime Type (tipo de archivo) y luego con un shortcode mostramos todos los archivos para descargar. Los iconos en nuestro ejemplo deben encontrarse dentro de la carpeta /images/mime/.

Asimismo podemos colocar un reproductor para los archivos con extensión .mp3, y el ejemplo que brindamos sirve de base para reproducir todos los formatos de audio e incluso de video.

Para ello colocamos dentro de nuestro functions.php el siguiente código:

function get_attachment_icons($echo = false){
	$sAttachmentString = "<div class='documentIconsWrapper'> \n";
	if ( $files = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'application/pdf',  //MIME Type condition
	 ))){
	 foreach( $files as $file ){ //setup array for more than one file attachment
		$file_link = wp_get_attachment_url($file->ID);    //get the url for linkage
		$file_name_array=explode("/",$file_link);
		$file_name=array_reverse($file_name_array);  //creates an array out of the url and grabs the filename
		$sAttachmentString .= "<div class='documentIcons'>";
		$sAttachmentString .= "<a href='$file_link'>";
		$sAttachmentString .= "<img src='".get_bloginfo('template_directory')."/images/mime/pdf.png'/>";
		$sAttachmentString .= "</a>";
		$sAttachmentString .= "<br>";
		$sAttachmentString .= "<a href='$file_link'>$file_name[0]</a>";
		$sAttachmentString .= "</div>";
		}
	}
	//Word Documents
	if ( $files = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'application/msword',  //MIME Type condition
	 ))){
	 foreach( $files as $file ){ //setup array for more than one file attachment
		$file_link = wp_get_attachment_url($file->ID);    //get the url for linkage
		$file_name_array=explode("/",$file_link);
		$file_name=array_reverse($file_name_array);  //creates an array out of the url and grabs the filename
		$sAttachmentString .= "<div class='documentIcons'>";
		$sAttachmentString .= "<a href='$file_link'>";
		$sAttachmentString .= "<img src='".get_bloginfo('template_directory')."/images/mime/word.png'/>";
		$sAttachmentString .= "</a>";
		$sAttachmentString .= "<br>";
		$sAttachmentString .= "<a href='$file_link'>$file_name[0]</a>";
		$sAttachmentString .= "</div>";
		}
	}
	//Powerpoint Documents
	if ( $files = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'application/vnd.ms-powerpoint',  //MIME Type condition
	 ))){
	 foreach( $files as $file ){ //setup array for more than one file attachment
		$file_link = wp_get_attachment_url($file->ID);    //get the url for linkage
		$file_name_array=explode("/",$file_link);
		$file_name=array_reverse($file_name_array);  //creates an array out of the url and grabs the filename
		$sAttachmentString .= "<div class='documentIcons'>";
		$sAttachmentString .= "<a href='$file_link'>";
		$sAttachmentString .= "<img src='".get_bloginfo('template_directory')."/images/mime/PowerPoint.png'/>";
		$sAttachmentString .= "</a>";
		$sAttachmentString .= "<br>";
		$sAttachmentString .= "<a href='$file_link'>$file_name[0]</a>";
		$sAttachmentString .= "</div>";
		}
	}
	//Excel Documents
	if ( $files = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'application/vnd.ms-excel',  //MIME Type condition
	 ))){
	 foreach( $files as $file ){ //setup array for more than one file attachment
		$file_link = wp_get_attachment_url($file->ID);    //get the url for linkage
		$file_name_array=explode("/",$file_link);
		$file_name=array_reverse($file_name_array);  //creates an array out of the url and grabs the filename
		$sAttachmentString .= "<div class='documentIcons'>";
		$sAttachmentString .= "<a href='$file_link'>";
		$sAttachmentString .= "<img src='".get_bloginfo('template_directory')."/images/mime/XLS8.png'/>";
		$sAttachmentString .= "</a>";
		$sAttachmentString .= "<br>";
		$sAttachmentString .= "<a href='$file_link'>$file_name[0]</a>";
		$sAttachmentString .= "</div>";
		}
	}
	//Zipped Files
	if ( $files = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'application/zip',  //MIME Type condition
	 ))){
	 foreach( $files as $file ){ //setup array for more than one file attachment
		$file_link = wp_get_attachment_url($file->ID);    //get the url for linkage
		$file_name_array=explode("/",$file_link);
		$file_name=array_reverse($file_name_array);  //creates an array out of the url and grabs the filename
		$sAttachmentString .= "<div class='documentIcons'>";
		$sAttachmentString .= "<a href='$file_link'>";
		$sAttachmentString .= "<img src='".get_bloginfo('template_directory')."/images/mime/zip.png'/>";
		$sAttachmentString .= "</a>";
		$sAttachmentString .= "<br>";
		$sAttachmentString .= "<a href='$file_link'>$file_name[0]</a>";
		$sAttachmentString .= "</div>";
		}
	}
	//Audio Files
	$mp3s = get_children(array(   //do only if there are attachments of these qualifications
	 'post_parent' => get_the_ID(),
	 'post_type' => 'attachment',
	 'numberposts' => -1,
	 'post_mime_type' => 'audio',  //MIME Type condition
	 ) );
	if (!empty($mp3s)) :
	$sAttachmentString .= "<ul class='audiofiles'>";
		foreach($mp3s as $mp3) :
    		$sAttachmentString .= "<li>";
			if(!empty($mp3->post_title)) : //checking to make sure the post title isn't empty
				$sAttachmentString .= "<h4 class='title'>".$mp3->post_title."</h4>";
			endif;
			if(!empty($mp3->post_content)) : //checking to make sure something exists in post_content (description)
				$sAttachmentString .= "<p class='description'>".$mp3->post_content."</p>";
			endif;
			$sAttachmentString .= "<object width='470' height='24' id='single".$mp3->ID."' name='single".$mp3->ID."'>";
				$sAttachmentString .= "<param name='movie' value='player.swf'>";
				$sAttachmentString .= "<param name='allowfullscreen' value='true'>";
				$sAttachmentString .= "<param name='allowscriptaccess' value='always'>";
				$sAttachmentString .= "<param name='wmode' value='transparent'>";
				$sAttachmentString .= "<param name='flashvars' value='file=".$mp3->guid."'>";
					$sAttachmentString .= "<embed ";
					  $sAttachmentString .= "id='single".$mp3->ID."' ";
					  $sAttachmentString .= "name='single".$mp3->ID."' ";
					  $sAttachmentString .= "src='".get_bloginfo('template_directory')."/jw/player.swf' ";
					  $sAttachmentString .= "width='470' ";
					  $sAttachmentString .= "height='24' ";
					  $sAttachmentString .= "bgcolor='#ffffff' ";
					  $sAttachmentString .= "allowscriptaccess='always' ";
					  $sAttachmentString .= "allowfullscreen='true' ";
					  $sAttachmentString .= "flashvars='file=".$mp3->guid."' ";
					$sAttachmentString .= "/>";
			$sAttachmentString .= "</object>";
                        $sAttachmentString .= "<a href='".$mp3->guid."'>Download</a>";
			$sAttachmentString .= "</li>";
		endforeach;
	$sAttachmentString .= "</ul>";
	endif;
$sAttachmentString .= "</div>";
if($echo){
    echo $sAttachmentString;
  }
  return $sAttachmentString;
}
add_shortcode('attachment icons', 'get_attachment_icons');

Y finalmente insertamos el siguiente shortcode en nuestro post:

[attachment icons]

Fuente: tgrayimages.com

Dejar un comentario

  1. que nombre deben llevar los iconos para aparecer en la vista

  2. Hola gracias.. una consulta..que nombre deben llevar los iconos para aparecer en la vista

  3. Cesar

    Me podria indicar como personalziarlo, porque sale arriba el icno

  4. Hola y mil gracias!

    He Ԁe decir que tu entrada en el site me haa sido
    verdaderamente productivo!

  5. Desde el administrador de este sitio web sitio web está trabajando,
    sin duda, cuestión poco será conocido ,debido a sus características contenido.

Dejar un comentario