Como añadir una imagen a la etiqueta <more> de WordPress y cambiar su efecto

more WordPress La etiqueta more es muy conocida por su efecto dentro de WordPress, es decir, la de poder realizar un salto, tras un determinado texto, imagen, o lo que deseemos para mostrar el resto del contenido de nuestra entrada.

Si eres nuevo en el mundo de Worpdress, quizás no hayas tenido la oportunidad de comprobar el efecto, pero a modo resumen podemos decir que esta etiqueta es muy útil y de hecho yo la empleo en este blog.

Esta etiqueta puede ser modificada para que el texto sea de nuestro agrado o el de nuestros visitantes, es decir, y para que pueda quedarnos más claro debemos primero fijarnos en el código que podemos encontrar en el fichero index.php si dispones de este mismo tema (blue grace).

<div class="entrybody">    
   <?php if (is_archive() || is_search()) : ?>   
     <?php the_excerpt(); _e('<p><a href="'.get_permalink().'">Seguir leyendo... '); the_title(); _e('</a></p>');  ?>
                <?php else : ?>
     <?php the_content('Leer el resto de la entrada &raquo;');   ?>                  <?php the_tags( '<p>Etiquetas: ', ', ', '</p>'); ?>    <?php endif; ?>           
                </div>

Tras haber encontrado la parte del código en la que se muestra el contenido podemos modificar el texto “Seguir leyendo…” y “Leer el resto de la entrada &raquo;” por otro texto que creamos conveniente, pero el objetivo de nuestra entrada es incluir una imagen que sustituya dicho texto, y para ello lo haremos de la siguiente forma:

  1. Buscamos el código que enlaza al contenido, es decir, la siguiente función the_content() e incluir la ruta de la imagen que deseamos visualizar.
<?php the_content('<img src=http://URL de la imagen" alt="Arrow" title="Leer más…" />'); ?>

El código anterior visualizará la imagen para nuestra etiqueta more en lugar del texto, aunque ámbos (texto e imagen) pueden estar combinados, pero sino estamos seguros de incluir los atributos alt y title podemos estilizar la imagen mediante el uso de CSS, como por ejemlo:

.more-link img {
	background:url(http://URL de la imagen) no-repeat left center;
	padding: 10px;
	height: 70px;
	width: 250px;
	}

Para modificar un poco más esta etiqueta, podemos realizar unos cambios con el propósito de cambiar la acción que incluye por defecto, es decir, la etiqueta more suele llevarnos a una entrada simple y justo donde dicha etiqueta ha sido incluida, pero eso podemos cambiarlos, consiguiendo que la entrada podamos leerla por completo en la parte superior de nuestro blog.

Para ello, debemos acceder a nuestro tema y localizar el fichero functions.php y pegar el siguiente código:

function remove_more_jump_link($link){

$offset = strpos($link, '#more-');

if ($offset) { $end = strpos($link, '"',$offset); }

if ($end) { $link = substr_replace($link, '', $offset, $end-$offset); }

return $link; }

add_filter('the_content_more_link', 'remove_more_jump_link');

Con el código anterior eliminamos el salto a una entrada simple y visualizamos el resto de la entrada y permite visualizar el resto del contenido en la misma página principal. Solo funciona en las versiones de WordPress 2.8 y superiores.

[Fuente: Codex]

¿Te gusta compartir? ¡Comparte!
  •  
  •  
  •  
  •  
  •  
  •  

Dejar un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *