WordPress | como mostrar el primer post con un estilo diferente

A veces cuando creamos un tema en wordpress, queremos darle un toque diferente al último articulo creado para destacarlo sobre el resto. Con unas funciones de wordpress y algo de php podremos lograr nuestro objetivo.

Primero lo que deben hacer es abrir el archivo index.php en Apariencia > Editor en el backend de WordPress, si están trabajándolo offline lo abrirán directamente con dreamweaver, textmate o el editor de html que esten usando.

Luego, cuidadosamente colocaremos nuestro html dentro del código a continuación:

<?php $postnum = 0; if (have_posts()) : ?>
<?php while (have_posts()) : $postnum = $postnum + 1; the_post(); ?>
<?php if ($postnum == 1 ) { ?>
<!-- HTML del post destacado -->
<?php } ?>

<?php if ($postnum >= 2 ) { ?>
<!-- HTML de los siguientes post -->
<?php } ?>
<?php endwhile; ?>

Como ven, en la primera porción de código, colocaremos nuestro html para el post destacado.

Ejemplo:

<div id="content">
<?php $postnum = 0; if (have_posts()) : ?>
<?php while (have_posts()) : $postnum = $postnum + 1; the_post(); ?>
<?php if ($postnum == 1 ) { ?>

<!-- Empieza código html del post destacado -->
<div id="feature">

<li>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<?php the_time('l, j');?> de <?php the_time('F');?> de <?php the_time('Y');?>,
 escrito por <?php the_author_link();?>
<?php the_content('Leer más'); ?>

 </li>
</div>

<!-- Termina código html del post destacado -->
<?php } ?>

En la segunda porción de código es donde colocaremos el html de los siguientes post, que serán los que se muestren normalmente.

Ejemplo:

<div id="entry">
<?php if ($postnum >= 2 ) { ?>
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" 
title="Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_time('l, j F Y H:i'); ?> | Escrito por <?php the_author() ?>
<?php edit_post_link('Editar', ' | ', ''); ?>

<?php the_content('',FALSE,''); ?>

 <div><?php wp_link_pages(); ?></div>

 <?php } ?>
 </div> <!-- end div entry -->

 <?php endwhile;?>

Si tienen alguna duda o quieren dejarnos algun comentario lo pueden hacer aquí.

Modificado por última vez el día 01 de abril de 2012 a las 08:44
  • tengo este codigo y qusieira que el primer post sea diferente que es lo que tengo que hacer puede ayudarme alguien

    hook(‘content_before’); ?>

  • Hola muchas gracias por el tutorial, me gustaría saber si le puedo aplicar un código a este script para que se vea una sola categoría.

  • Gracias por compartirlo!! me ha venido muy bien, faltaba el para que funcione ;)

    un saludo

  • dhatt hamko to fir bhi nahin samajh men aayaa .ab ham kaa karen bhaya .hako to bhavagan ji ne buddhi hi nahin dilvayaa .!!ab tum hi kuchh karo o raamlubhaya ..!!

  • Estimado Antonio, para hacer lo que tu quieres debes emplear simplemente el código que presentamos en el artículo y darle luego estilo con el CSS.
    Deberías buscar en index.php la línea con el siguiente código:

    <div class="post-wrap clearfix"> 

    En esta línea empieza el listado de post.
    Saludos

  • No consigo colocar el contenido de mi index para que lo podais visualizar…

  • hook(‘main_before’); ?>

    hook(‘content_before’); ?>

    hook(‘content_after’); ?>

    hook(‘main_after’); ?>

  • Buenas, quiero que en mi tema el primer post salgo mas grande y los de abajo en su tamaño normal (es decir como si la primera noticia fuese destacada o de portada). Mi theme se llama Enzo (http://fthemes.com/demo/Enzo/)

    El index es el siguiente:

    hook(‘main_before’); ?>

    hook(‘content_before’); ?>

    hook(‘content_after’); ?>

    hook(‘main_after’); ?>

    Habria alguna forma de hacer lo que busco.

    Sería de muchísima ayuda, porque por mas que lo intento no lo consigo.

    Ante todo mil gracias, un saludo y felicidades por la web.

  • Hola amigo como estas, em gusta mucho tu contenido, estoy tratando de configurar un theme en WP, pegustaria hacer este camibio:

    Me gustaria que los Post u Entradas se vean de dos en dos uno a la derecha y el otro a la izquierdad, y asi sucesivamente, agradeceria mucho si supiedes el modo gracias

    • Hola Luis, te comento que hay varios métodos para realizar lo que quieres.
      El primero es por CSS que solamente haciendo unos arreglos con float y el ancho de los artículos ya te quedaría, pero deberías tener cuidado con el alto que lo deberías dejar de un tamaño fijo para que no se te “desarme” el tema. Cosa que es una desventaja por los títulos largos ó muy cortos.

      Otro método es mediante PHP:

      <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); 
      // Lo que hacemos con este código es mostrar los post con numeración par. Esa numeración se la estamos dando con $i++
      ?> 
      
      <div id="izquierda">
      <a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
      <?php the_content(); ?>
      </div>
      
      <?php endif; endwhile; else: ?>
      <div>No hay artículos para mostrar</div>
      <?php endif; ?>
      
      <?php $i = 0; rewind_posts(); ?>
      
      <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); 
      // Lo mismo que arriba nada mas que aquí vemos los impar
      ?>
      
      <div id="derecha">
      <a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
      <?php the_content(); ?>
      </div>
      
      <?php endif; endwhile; else: ?>
      <div>No hay artículos para mostrar</div>
      <?php endif; ?>

      Espero que te haya servido Luis

  • hay forma de que no sean dos post si no 5

    • Hola Sebastian, esto te sirve para mostrar el primer post diferente al resto, el tema de poner 2, 5 o mas post en el loop lo manejas tú.

      Lo que nos indica esto: = 2 ) { ?>
      es que a partir del segundo post se vera de forma “normal”

      Saludos.

  • ¡Hola chicos! Una pregunta sobre esto… ¿qué estilo presentaría el último post creado? ¿Lo tengo que definir desde la hoja de estilos?
    Gracias! :)

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>