¿Alguna vez te has encontrado con un sitio que diseñe las publicaciones de su blog de manera diferente? Algunos sitios tienen publicaciones fijas resaltadas con un fondo personalizado, mientras que otros pueden tener cada publicación de categoría con un estilo único. Si alguna vez quisiste aprender a diseñar cada publicación de WordPress de manera diferente, estás en el 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 algunos conocimientos básicos de CSS y HTML.
Diseñar publicaciones individuales en WordPress
WordPress agrega clases CSS predeterminadas a varios elementos en su sitio web. Un tema de WordPress compatible con el estándar debe tener el código requerido por WordPress para agregar clases CSS para el cuerpo, publicaciones, páginas, widgets, menús y más.
Una función central de WordPress llamada post_class()
es utilizado por temas para decirle a WordPress dónde agregar esas clases CSS predeterminadas para publicaciones.
Si visita su sitio web y utiliza la herramienta Inspeccionar en su navegador, podrá ver esas clases agregadas para cada publicación.
A continuación se muestran las clases de CSS agregadas de forma predeterminada en función de la página que está viendo un usuario.
- .ID del mensaje
- .correo
- .adjunto
- .pegajoso
- .hentry (páginas de microformato hAtom)
- .categoria ID
- .nombre de la categoría
- .tag-name
- .format- {nombre-formato}
- .type- {post-type-name}
- .has-post-thumbnail
- .post-password-required
- .post-protegido por contraseña
Un resultado de ejemplo se vería así:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
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 { background-color: #FF0303; color:#FFFFFF; }
No olvide cambiar el ID de la publicación para que coincida con el suyo.
Echemos un vistazo a otro ejemplo.
Esta vez, aplicaremos estilo a todas las publicaciones archivadas en una categoría específica llamada noticias.
Podemos hacer esto agregando el siguiente CSS personalizado a nuestro tema »
.category-news { font-size: 18px; font-style: italic; }
Este CSS afectará a todas las publicaciones archivadas en la categoría de noticias.
La función de clase posterior
Los desarrolladores de temas usan la función post_class para decirle a WordPress dónde agregar las clases de publicación. Por lo general, está en el <article>
etiqueta.
La función de clase de publicación no solo carga las clases CSS predeterminadas generadas por WordPress, 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í:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Puede agregar su propia clase CSS personalizada con un atributo como este:
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>
La post_class imprimirá las respectivas clases de CSS predeterminadas junto con su clase de CSS personalizada.
Si desea agregar varias clases de CSS, puede definirlas como una matriz y luego llamarlas en la función post_class.
<?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', ); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>
Publicaciones de estilo 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 según el autor, primero deberá agregar el nombre del autor como una clase CSS.
Puede hacer esto usando el siguiente fragmento:
<?php $author = get_the_author_meta('user_nicename'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>
Este código agregará el nombre de usuario del usuario como una clase CSS. Nicename es un nombre descriptivo de URL utilizado por WordPress. No tiene espacios y todos los caracteres están en minúsculas, lo que lo hace perfecto para usar como clase CSS.
El código anterior le dará un resultado como este:
<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">
Ahora puede usar .peter en su CSS personalizado para diseñar todas las publicaciones de este autor en particular para que se vean diferentes.
.peter { background-color:#EEE; border:1px solid #CCC; }
Publicaciones de estilo según la popularidad usando el recuento de comentarios
Es posible que haya visto sitios con widgets de publicaciones populares que a veces se basan en el recuento de comentarios. En este ejemplo, le mostraremos cómo diseñar publicaciones de manera diferente usando el recuento de comentarios.
Primero, necesitamos obtener el recuento de comentarios y asociarle una clase.
Para obtener el recuento de comentarios, deberá agregar el siguiente código en sus archivos de tema. Este código va dentro del bucle de WordPress, por lo que también puede agregarlo justo antes de la etiqueta
<?php $postid = get_the_ID(); $total_comment_count = wp_count_comments($postid); $my_comment_count = $total_comment_count->approved; if ($my_comment_count <10) { $my_comment_count="new"; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count="emerging"; } elseif ($my_comment_count >= 20) { $my_comment_count="popular"; } ?>
Este código verifica el recuento de comentarios de la publicación que se muestra y les asigna un valor en función del recuento. Por ejemplo, las publicaciones con menos de 10 comentarios obtienen una clase llamada nueva, menos de 20 se denominan emergentes y cualquier cosa con más de 20 comentarios es popular.
A continuación, debe agregar la clase CSS de recuento de comentarios a la función post_class.
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Esto agregará clases CSS nuevas, emergentes y populares a todas las publicaciones según la cantidad de comentarios que tenga cada publicación.
Puede agregar CSS personalizado a las publicaciones de estilo según la popularidad:
.new {border: 1px solid #FFFF00;} .emerging {border: 1px dashed #FF9933;} .popular {border: 1px dashed #CC0000;}
Solo estamos agregando bordes, puede agregar las reglas CSS que desee.
Publicaciones de estilo basadas en campos personalizados
La codificación de clases de CSS en su archivo de tema lo limita solo a esas clases de CSS específicas. ¿Qué pasaría si quisiera decidir qué clase de CSS agregar a un artículo mientras lo escribe?
Con los campos personalizados, puede agregar clases CSS sobre la marcha.
Primero debe agregar un campo personalizado a una publicación, para que pueda probarlo. Edite una publicación y desplácese hacia abajo hasta la sección de campos personalizados.
Agregue post-class como el nombre del campo personalizado y cualquier cosa que desee usar como clase CSS en el campo de valor.
No olvide hacer clic en el botón ‘Agregar campo personalizado’ para almacenarlo y luego guardar su publicación.
A continuación, edite sus archivos de tema para mostrar su campo personalizado como la clase de publicación.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>
Generará el siguiente HTML:
<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">
Ahora puede agregar CSS personalizado para la post_class que agregó usando un campo personalizado.
.trending{ background-color:##ff0000; }
Los campos personalizados pueden tener varios valores, por lo que puede agregar varias clases de CSS con el mismo nombre.
Hay muchas más formas de diseñar publicaciones de WordPress individualmente. A medida que aumenten sus habilidades, seguirá descubriendo nuevas formas de diseñar publicaciones con diferentes condiciones.
Esperamos que este artículo le haya ayudado a aprender a diseñar cada publicación de WordPress de manera diferente. Es posible que también desee ver nuestra lista definitiva de los consejos, trucos y trucos de WordPress más buscados.