Extractos WordPress con formato

extractos-wordpress-con-formato
Extractos WordPress con formato

Un problema que, inexplicablemente, no está resuelto en el Core.

Los extractos WordPress con formato debería ser algo que estuviese en el Core de WP. Nadie puede concebir que quiera que el extracto de su publicación aparezca como un texto plano, sin tabulaciones, párrafos, negritas, enlaces,y todo lo que ponemos en el post.

Extrañamente alguien ha decidido que es mejor que los extractos aparezcan apelotonados y con el texto todo seguido como si fuese un mensaje en clave.

El resultado es que en la página principal del blog te aparecen un montón de títulos y fotografías bien maquetadas, acompañados de 55 palabras que forman el extracto por defecto que son un auténtico churro y que rompen toda la apariencia que quieras darle a tu sitio web.

No solo es problema de WordPress, también les pasa a los temas comerciales.

Resulta que la mayoría de los temas, ya sean de pago o gratuitos, tampoco implementan esta función y el resultado es que tenemos un tema visualmente atractivo que cuando llega a la página del blog muestra este engendro.

Enfocados como estamos en el mundo autodidacta, hemos estado investigando cómo podríamos mostrar los extractos WordPress con formato, con el mismo formato que tenemos en el post. (Puedes consultar más posts en nuestra etiqueta Autodidacta )

Es obligatorio ser Autodidacta

Nos hemos ido encontrado con varios problemas, y hemos concluido que hay que modificar la función que trae WordPress para mostrar los extractos. No la función the_excertp(), sino la que la muestra wp_trim_excerpt() .

Esto a su vez crea un problema con la función que añade el enlace LEER MÁS que, debido a que se puede quedar fuera del loop. Ya que, debido a que cuenta los enlaces y las etiquetas html (aunque las interpreta y no las muestra) puede darse el caso de llegar al número que hayamos establecido como longitud del extracto en medio de una etiqueta o enlace.

Después de muchos intentos, hemos encontrado en la Web la página de Boutros AbiChedid que lo ha resuelto elegantemente con una función que nos permite elegir qué etiquetas Html queremos que muestre nuestro extracto, la longitud del mismo y el tratamiento que queremos darle al Leer Más.

Sin más ponemos la función para que la pegues en tu archivo functions.php (ya sabes que es mejor que tengas un tema hijo con su propio archivo functions.php para que no lo machaque cuando tu tema se actualice). Nosotros preferimos tener instalado el plugin Snippets y así podemos tenerlo en todos los sitios que queramos independientemente del tema que utilicemos.

Esta es la función que lo hace

<?php
/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   June 20, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Preserves HTML formating to the automatically generated Excerpt.
* Also Code modifies the default excerpt_length and excerpt_more filters.
*******************************************************************************/
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    $text = get_the_content('');
 
    $text = strip_shortcodes( $text );
 
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
     
    /***Add the allowed HTML tags separated by a comma.***/
    $allowed_tags = '<p>,<a>,<em>,<strong>';  
    $text = strip_tags($text, $allowed_tags);
     
    /***Change the excerpt word count.***/
    $excerpt_word_count = 80; 
    $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count); 
     
    /*** Change the excerpt ending.***/
    $excerpt_end = ' <a href="'. get_permalink($post->ID) . '">' . '» Continue Reading.' . '</a>'; 
    $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);
     
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');
?>

Puedes cambiar la longitud del extracto en esta línea $excerpt_word_count = 80; 

Con esta función puedes tener estas funcionalidades sin utilizar plugins que sobrecargan tu instalación. 

Seguimos investigando para hacer que [Leer más] se muestre como un botón

Compartimos este código, aunque seguimos investigando para que la función, en lugar de poner el Leer Más como un texto lo haga con un botón con  todos sus estilos, que muestre el título y le añada el permalink() y por otro lado, poner el enlace al post a la imagen. Ya os iremos contando. Si tú ya lo has resuelto, por favor dínoslo en los comentarios.


Actualización: El tema del botón ya se ha resuelto fácilmente, ya que GeneratePress lo tiene como una opción, así que ha sido muy fácil. El asunto de poner el enlace en la imagen ya ha costado un poco más, y lo hemos resuelto modificando el archivo content.php y modificando la línea 65 del archivo (esto puede diferir si usas otro tema), en la zona que muestra la imagen para que quede así: 


/.... </header><!-- .entry-header -->
<?php
/**
* generate_after_entry_header hook.
*
* @since 0.1
*
* @hooked generate_post_image - 10
*/
// do_action( 'generate_after_entry_header' );*/
		
if ( generate_show_excerpt() ) : ?>
<!-- Esto lo he puesto yo -->	
<div class="center">
       <a href=<?php the_permalink($post);?> > <?php 
       the_post_thumbnail($size='large',$attr='');?></a>
</div><!-- Esto lo he puesto yo -->
					
<div class="entry-summary" itemprop="text" >	
      <?php  the_excerpt(); ?>  
</div><!-- .entry-summary -->
	
      <?php else : ?>
<div class="entry-content" itemprop="text">
	<?php the_content();<a href=<?php the_permalink($post);?> > <? 
        php the_post_thumbnail($size='large',$attr='');?></a> y continúa .....

¡Suscríbete a nuestra newsletter!

suscríbete