Style Each Post Differently

Cómo diseñar cada publicación de WordPress de manera diferente

¿Alguna vez te has encontrado con un sitio que diseñe las publicaciones de su blog de manera diferente? Algunos sitios tienen artículos fijos resaltados con un fondo personalizado, mientras que otros pueden tener cada artículo de categoría con un aspecto único. Si siempre ha querido aprender a diseñar cada publicación de WordPress de manera diferente, ha venido al lugar correcto. En este artículo, le mostraremos cómo diseñar cada publicación de WordPress de manera diferente.

Nota: Este tutorial requiere que agregue CSS personalizado en WordPress. También deberá poder utilizar la herramienta Inspeccionar. Se requieren conocimientos básicos de CSS y HTML.

Diseñar publicaciones individuales en WordPress

WordPress agrega clases CSS predeterminadas a varios elementos de su sitio web. Un tema de WordPress que cumpla con el estándar debe tener el código requerido por WordPress para agregar clases de CSS para el cuerpo, publicaciones, páginas, widgets, menús, etc. Los temas utilizan una función principal de WordPress llamada post_class () para indicarle a WordPress dónde agregar estas clases CSS predeterminadas para las publicaciones. Si visita su sitio web y utiliza la herramienta Inspeccionar en su navegador, podrá ver estas clases agregadas para cada publicación.

Clases Css Predeterminadas Para La Publicación De Wordpress
Aquí están las clases CSS agregadas por defecto según la página vista por un usuario.

  • .ID del mensaje
  • .Publicar
  • .adjunto archivo
  • .medias
  • .hentry (páginas de microformatos hAtom)
  • .categoria ID
  • Nombre de la categoría
  • .tag-name
  • .format- {nombre-formato}
  • .type- {post-type-name}
  • .ha-post-miniatura
  • .post-contraseña-requerida
  • .post protegido por contraseña

Un resultado de ejemplo se vería así:

Puede diseñar cada publicación de WordPress de manera diferente utilizando las respectivas clases de CSS. Por ejemplo, si desea diseñar una publicación individual, puede usar la clase post-id en su CSS personalizado. .post-412 {color de fondo: # FF0303; color: #FFFFFF; } No olvide cambiar el ID de publicación para que coincida con el suyo.
Diseñar Una Publicación Específica En Wordpress
Echemos un vistazo a otro ejemplo. Esta vez, aplicaremos estilo a todos los artículos que están en una categoría específica llamada noticias. Podemos hacer esto agregando el siguiente CSS personalizado a nuestro tema «.category-news {tamaño de fuente: 18px; estilo de fuente: cursiva;} Este CSS afectará a todas las publicaciones categorizadas como noticias.

La función posterior a la clase

Los desarrolladores de temas usan la función post_class para decirle a WordPress dónde agregar clases de publicaciones. Normalmente está en el

etiqueta. La función post class no solo carga las clases CSS generadas por WordPress de forma predeterminada, sino que también le permite agregar sus propias clases. Dependiendo de su tema, encontrará la función post_class en su archivo single.php o en los archivos de plantilla de contenido. Normalmente, el código se verá así:» > Puede agregar su propia clase CSS personalizada con un atributo como este:» > El post_class mostrará las respectivas clases CSS predeterminadas con su clase CSS personalizada. Si desea agregar varias clases CSS, puede definirlas como una matriz y luego llamarlas en la función post_class.

Artículos con estilos diferentes según los autores

Las clases CSS predeterminadas generadas por la función_posts no incluyen el nombre del autor como clase CSS. Si desea personalizar el estilo de cada publicación para que se adapte al autor, primero deberá agregar el nombre del autor como una clase de CSS. Puede hacer esto usando el siguiente fragmento de código:

Ahora puede usar .peter en su CSS personalizado para dar a todas las publicaciones de ese autor en particular un estilo diferente. .peter {color de fondo: #EEE; borde: 1px sólido #CCC; }

Diseñe artículos según la popularidad usando el número de comentarios

Es posible que haya visto sitios con widgets de publicaciones populares que a veces se basan en la cantidad de comentarios. En este ejemplo, le mostraremos cómo diseñar publicaciones de manera diferente usando el número de comentarios. Primero, necesitamos obtener el número de comentarios y asociarle una clase. Para obtener la cantidad de comentarios, deberá agregar el siguiente código en sus archivos de tema. Este código entra en el bucle de WordPress, por lo que puede agregarlo justo antes del

etiqueta también.

aprobado; si ($ my_comment_count <10) { $my_comment_count="new"; } elseif ($my_comment_count >= 10 && $ my_comment_account <20) { $my_comment_count="emerging"; } elseif ($my_comment_count >= 20) {$ my_comment_count = «popular»; }?> Este código verifica el número de comentarios del mensaje mostrado y les asigna un valor basado en el número. Por ejemplo, los artículos con menos de 10 comentarios reciben una clase denominada nuevos, menos de 20 se denominan emergentes y todo lo que supere los 20 comentarios es popular. Luego, debe agregar la clase CSS del número de comentarios a la función post_class.» > Esto agregará clases CSS nuevas, emergentes y populares a todas las publicaciones según la cantidad de comentarios de cada publicación. Puede agregar CSS personalizado a las publicaciones de estilo según su popularidad: .new {border: 1px solid # FFFF00;} .emerging {border: 1px dashed # FF9933;} .popular {border: 1px dashed # CC0000;} Simplemente agreguemos bordes, puede agregar las reglas CSS que desee.

Artículos de estilo basados ​​en campos personalizados

Las clases CSS de codificación rígida en su archivo de tema lo limitan solo a esas clases CSS específicas. ¿Y si quisiera decidir qué clase de CSS agregar a un artículo mientras lo escribe? Con campos personalizados, puede agregar clases CSS sobre la marcha. Primero debe agregar un campo personalizado a una publicación para que pueda probarlo. Edite un artículo y desplácese hasta la sección de campos personalizados.
Agregar Una Clase De Publicación Como Campo Personalizado
Agregue post-class como un nombre de campo personalizado y lo que quiera usar como clase CSS en el campo de valor. No olvide hacer clic en el botón «Agregar un campo personalizado» para almacenarlo, luego guarde su mensaje. Luego edite los archivos de su tema para mostrar su campo personalizado como una clase posterior.
ID, ‘postclase’); ?>» > Mostrará el siguiente código HTML:

Ahora puede agregar CSS personalizado para la post_class que agregó usando un campo personalizado. .trending {color de fondo: ## ff0000; } Los campos personalizados pueden tener varios valores, por lo que puede agregar varias clases de CSS con el mismo nombre. Hay muchas otras formas de diseñar publicaciones de WordPress individualmente. A medida que sus habilidades crezcan, descubrirá nuevas formas de diseñar publicaciones utilizando diferentes condiciones. Esperamos que este artículo le haya ayudado a aprender a diseñar cada publicación de WordPress de manera diferente. También puede consultar nuestra lista definitiva de los consejos, trucos y trucos de WordPress más buscados. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply