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

This post was published 10 years ago. It may be exremely outdated.

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:

  • La primera y la última línea inician y concluyen el bucle (respectivamente).
  • La línea 15 comienza la capa (div) que contendrá el artículo.
  • La 16 muestra el título del artículo.
  • La 17 muestra la fecha.
  • La línea 18 está en blanco.
  • La 19 comienza la capa que contiene el texto del artículo.
  • La 20 muestra el contenido del artículo.
  • La 21 cierra la capa abierta dos líneas más arriba.
  • La línea 22 está en blanco.
  • La 23 muestra los tags del artículo, la categoría en la que está incluído, el link para editarlo (sólo usuarios con permisos adecuados) y por último el número de comentarios.
  • La 24 cierra la capa abierta en la línea 15.
  • La línea 25 está en blanco.

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 Responses to Añade una línea separadora entre cada artículo

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

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

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

Te quedó bien 😀

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

Leave a Reply