Añadir botón de descarga al final de post automáticamente

Por: Nicolas Seijas | Categoría: Wordpress

Les enseñaré de manera sencilla a colocar mediante el uso de un Campo Personalizado o Custom Field un botón de descarga automáticamente al final de cada artículo que creen.

Además conociendo las funciones de este código podrán encontrarle nuevas utilidades.

Antes de comenzar debemos encontrar en la sección de edición de temas de WordPress el archivo Single.php, que contiene el código que hace funcionar al artículo.

Para poder encontrar el archivo Single.php dirigirse a la sidebar del panel de administración y seguir el camino: Apariencia > Editor > Single.php

Luego de haber encontrado este archivo debemos leer cuidadosamente el código existente y agregar el siguiente código dentro de la loop.

<?php if(get_post_meta($post->ID, "link_descarga", $single = true) != ""){ ?>
<a href="<?php echo get_post_meta($post->ID, "link_descarga", $single = true); ?>">
<div class="boton_descarga">
</div>
</a>
<?php } ?>

Expliquemos este codigo (que al final encontrarán muy sencillo).

En la primera línea indicamos que se creará un custom field de nombre link_descarga

<?php if(get_post_meta($post->ID, "link_descarga", $single = true) != ""){ ?>

Este nombre puede ser cambiado, ya que sirve únicamente como identificación.

Si no añadimos el Campo Personalizado no veremos el botón de descargas en el artículo

Comencemos a personalizar nuestro botón:

Tenemos dos opciones, podemos dar estilo con una class, como nosotros hicimos en este blog o podemos colocar directamente una imagen si no queremos adentrarnos en el CSS.

Quiero usar CSS

Es sencillo, se crea en la hoja de estilos que está siendo utilizada para el blog un estilo llamado (siguiendo este ejemplo) .boton_descarga

Por ejemplo, nuestro CSS se vería así:

.boton_descarga{
width: 150px;
height: 50px;
background: url(images/boton.png);
}

Este estilo que les menciono es absolutamente básico, ustedes deben adaptarlo a su página.

No quiero usar CSS

Es bastante simple, el código se vería así:

<?php if(get_post_meta($post->ID, "link_descarga", $single = true) != ""){ ?>
<a href="<?php echo get_post_meta($post->ID, "link_descarga", $single = true); ?>">
<img src="RUTA DE IMAGEN" />
</a>
<?php } ?>

Claramente, donde se indica “RUTA DE IMAGEN” deberán colocar la dirección a la imagen que desean que sea el fondo del botón.

Si han seguido los pasos deberían estar viendo algo similar a lo que tenemos nosotros bajo cada artículo

Colocamos como link de demostración y de descarga el link de este artículo para que puedan ver lo fácil que funciona.

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Este artículo no tiene comentarios

¡Se el primero en comentar!

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.