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:

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

Ejemplo:

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:

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:

    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:

      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>