Ulzurrun de Asanza i Sàez

Añade una línea separadora entre cada artículo

Vía el formulario de contacto, Omar me ha preguntado cómo añadir una línea para separar cada artículo del siguiente en WordPress. He pensado que es un tutorial interesante, así que a continuación explico cómo hacerlo.

Vamos a modificar el theme Default, y los archivos que modificaremos serán el index.php y el style.css.

Abrimos el primero y nos situamos entre las lineas 13 y 26. En estas líneas se encuentra el bucle encargado de mostrar los artículos de la página de inicio. El código que encontramos es el siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
 <?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

</div>

<?php endwhile; ?>

El código es sencillo:

Ahora tenemos que decidir dónde poner la línea separadora. Yo he decicido añadirla después de la línea 23, pasados los links referentes a las tags, las categorías y los comentarios.

Así que vamos a la línea 24 y añadismos una nueva línea, en la que escribimos:

<hr class="separator" />

Con esto tendremos un código similar al siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

<hr class="separator" />
</div>

<?php endwhile; ?>

Si entramos ahora al blog, podremos ver una línea que separa cada artículo, pero esta línea no es demasiado bonita, y debemos darle algo de estilo y aquí es donde entra en acción el archivo style.css.

Abrimos el archivo style.css y nos situamos al final del mismo, donde añadimos el siguiente código:

hr.separator {
border:none;
border-top:1px dashed #9E9E9E;
}

Este código CSS afectará sólo a los elementos hr con clase separator, así que sólo modificará el estilo de la línea separadora.

Y así tenemos una bonita línea separadora, para añadirla a cualquier theme basta con seguir los mismos pasos, siempre teniendo en cuenta en lugar donde añadir la línea.

Por último, podéis descargar el theme Default modificado directamente desde aquí, por si tenéis problemas con el tutorial.


5 replies on “Añade una línea separadora entre cada artículo

  1. Saben que hace un par de dias, le pedi ayuda a Lluís sobre como insertar una linea horizontal que separe articulos!, pues miren ya tenemos un tutorial bien explicado y con archivo de ejemplo para descargar.
    Blog como el tuyo es para tenerlo como biblia, gracias por tu ayuda y por el tutorial
     
    saludos

  2. Felicidades por haber encontrado la respuesta!
    Y muy bien por Lluís por ayudarte!

  3. Y el resultado final esta en mi blog : http://www.trytokillme.tk/
    gracias maestro!!

  4. Te quedó bien :D

  5. Si y gracias a Lluís, aunque tengo algunas preguntas mas, pero sera en su debido tiempo
     
    saludos

Leave a Reply to extruendo Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar