2

Buenas. Estoy intentando hacer un boton con un texto y un icono para descargar un PDF en entradas de Wordpress.

He probado en JSFIDDLE y funciona de maravilla.

#dwnld-pdf {
clear: both;
padding: 0.8% 0;
display: flex;
border: 1.2px solid;
width: 232px;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
}

#dwn-img { /* div imagen */
display: flex;
width: 28px;
}
<a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download>
<div id="dwn-img"><img src="https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-046_file_pdf-512.png" alt="Icono de archivo PDF"></div><div>Descarga el archivo siguiente</div>
</a>

Pero en Wordpress me genera el siguiente HTML y queda muy feo:

#dwnld-pdf {
clear: both;
padding: 0.8% 0;
display: flex;
border: 1.2px solid;
width: 232px;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
}

#dwn-img { /* div imagen */
display: flex;
width: 28px;
}
<a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download=""><p></p>
<div id="dwn-img"><img src="http://localhost/html_preg/wp-content/uploads/2015/10/adobe_pdf_document_01.gif" alt="Icono de archivo PDF"></div>
<div>Descarga el archivo siguiente</div>
</a><p><a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download=""></a>
</p>

En Vivaldi Y Google Chrome directamente no parece funcionar en el JSFIDDLE el CSS y no se visualiza bien.

2 respuestas 2

2

Por lo que veo del código generado lo estas pegando directamente en tu post. Es por eso que añade las etiquetas <p> en tu codigo, yo te recomiendo agregar el link de descarga usando un filtro:

    add_filter('the_content', 'add_pdf_download_link');
    function add_pdf_download_link($content) {
        global $post;
        // si el tipo de post es pagina no le concatena el link
        if(get_post_type($post)=='page'){
            return $content;
        }

        $link = '<a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download>
<div id="dwn-img"><img src="https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-046_file_pdf-512.png" alt="Icono de archivo PDF"></div><div>Descarga el archivo siguiente</div>
</a>';        

        return $content.$link;
    }

Esto debe de ir en tu archivo functions.php de tu tema.

2
  • La solución esta bien pero si el enlace va a ser siempre el mismo al mismo PDF (o archivo que saa) y quiero que aparezca en todos los posts, pero por loq ue he veo saldria en todos los post y siempre tendria que ser el mismo enlace con el mismo texto, los cuales irian variando y no siempre habria un enlace en todos los post. Pero bueno, me guardo la solución por si acaso. Gracias.
    – Lorthas
    el 17 may. 2017 a las 14:58
  • OK en ese caso podriamos implementar otra forma de hacerlo y podriamos hacer una funcion con Shortcodes y usando extra fields de wordpress, dejame hacerlo y actualizo mi respuesta. el 17 may. 2017 a las 17:08
1

Es el tipo de caso donde un Shortcode puede ayudar bastante. Sería el caso de simplemente poner [descargar-pdf] dentro del contenido de un post/página, y el código de shortcode se encarga de generar el HTML exacto que necesitamos.

Lo recomendado es crear un plugin pues sí cambiamos de theme el shortcode sigue funcionando. Actualmente es prohibido publicar themes en el repositorio oficial que contengan shortcodes.

<?php
/**
 * Plugin Name: PDF Shortcode
 * Plugin URI: https://es.stackoverflow.com/a/70573/238
 */

add_shortcode( 'descarga-pdf', function($atts,$content){
    # Cargar CSS propio
    // wp_enqueue_style('estilo-shortcode', plugins_url( '/css/shortcodes.css', __FILE__ ) );
    # Cargar jQuery
    // wp_enqueue_script('jquery');

    $icono = 'https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-046_file_pdf-512.png';
    $url = isset( $atts['url'] ) ? $atts['url'] : 'http://example.com/documento-por-defecto.pdf';
    $texto  = isset( $atts['texto'] ) ? $atts['texto'] : 'Descarga el archivo siguiente';

    $html = sprintf(
        '<a id="dwnld-pdf" class="clearfix" href="%s" title="Descarga el archivo archivo" download>
            <div id="dwn-img"><img src="%s" alt="Icono de archivo PDF"></div><div>%s</div>
        </a>',
        $url, $icono, $texto
    );

    return $html;
});

En este ejemplo, sólo puede haver un shortcode por post/página, pues el anchor tiene un ID predefinido id="dwnld-pdf" (facil ajustar para una class).

Como hay valores predeterminados, puede ser usado en qualquier combinación:

  • [descarga-pdf]
  • [descarga-pdf texto="Descargar acrhivo"]
  • [descarga-pdf url="http://example.com/documento.pdf"]

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.