WordPress agrega sus propias clases CSS a diferentes elementos en la mayoría de los temas. Estas clases predeterminadas ayudan a dar estilo a varias partes de su sitio automáticamente.
Conocer estas clases CSS predeterminadas puede ser muy útil. Hacen que sea más fácil personalizar la apariencia de su sitio sin empezar desde cero.
Por ejemplo, una vez que comenzamos a usar CSS en nuestros sitios, nos resultó mucho más fácil dar estilo al contenido de nuestro blog para que destacara.
En este artículo, encontrará una hoja de trucos de estas clases CSS generadas por WordPress de forma predeterminada. También le mostraremos cómo encontrar más clases CSS y agregar las suyas propias cuando las necesite.
¿Por qué aprender sobre el CSS predeterminado generado por WordPress?
WordPress genera y agrega automáticamente clases CSS predeterminadas a diferentes elementos en su sitio web de WordPress.
Los desarrolladores de temas pueden jugar con estas clases CSS predeterminadas para dar estilo a las áreas comunes de los sitios de WordPress, como las áreas de contenido, las barras laterales, los widgets, los menús de navegación y más.
Por lo tanto, conocer esas clases CSS es útil si está aprendiendo desarrollo de temas de WordPress o simplemente intentando crear un tema hijo para su propio sitio web.
También te ayuda a estilizar rápidamente ciertos elementos en tu tema de WordPress agregando CSS personalizado sin crear tu propio tema.
Nota: No tienes que aprender CSS para cambiar los estilos de tu tema o crear un tema personalizado. Si prefieres no aprender a codificar, puedes usar un constructor de arrastrar y soltar como SeedProd. Hablaremos más sobre él más adelante en el artículo.
En las siguientes secciones, compartiremos las clases CSS predeterminadas generadas por WordPress. Aquí tienes un resumen rápido de todas las cosas que cubriremos en este artículo:
- Estilos de clase predeterminados del cuerpo
- Clases de estilo de publicación predeterminadas
- Clases de menú de navegación predeterminadas
- Clases de widgets predeterminados de WordPress
- Clases de formulario de comentarios predeterminadas
- Búsqueda de clases de bloques de WordPress
- Agregar tus propias clases CSS personalizadas en WordPress
- Extra: Diseña fácilmente un tema de WordPress sin escribir código CSS
Sin más preámbulos, ¡vamos a sumergirnos y aprender a hacer que tu sitio de WordPress se vea exactamente como quieres!
Estilos de clase predeterminados del cuerpo
En HTML, la etiqueta <body> contiene la estructura del diseño de cualquier página web, lo que la hace muy importante en el diseño de temas de WordPress.
WordPress agrega varias clases CSS a la etiqueta body. Los diseñadores de temas pueden usar estas clases para estilizar el contenedor del cuerpo de manera efectiva.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Como puedes ver, estas clases incluyen una amplia variedad de condiciones que puedes apuntar en tus estilos CSS.
Por ejemplo, si quisieras que la página de la categoría 'Noticias' tuviera un color de fondo diferente, entonces puedes agregar el siguiente CSS personalizado.
.category-news {
background-color:#f7f7f7;
}
Consejo de experto: ¿Necesitas una forma fácil de agregar fragmentos de CSS y código en WordPress? Prueba el plugin gratuito WPCode para asegurar la compatibilidad futura de tus fragmentos de código.
Clases de estilo de publicación predeterminadas
Al igual que con el elemento body, WordPress también agrega clases dinámicas a los elementos de las publicaciones.
Este elemento suele ser la etiqueta <article> en la plantilla de tu tema. Sin embargo, podría ser cualquier otra etiqueta, dependiendo de tu tema de WordPress. Las clases CSS de las publicaciones se muestran en tu tema al agregar la etiqueta de plantilla post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Aquí tienes una lista de algunas de las clases CSS más comunes generadas por la función post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Las clases de publicación te permiten estilizar publicaciones y páginas de blog que coinciden con diferentes condiciones. Por ejemplo, puedes estilizar las publicaciones de blog archivadas en una categoría específica de manera diferente usando el siguiente CSS personalizado:
.category-news {
background-color:#EFEFEF;
}
Si no ves el editor de CSS en tu panel de WordPress, sigue nuestro tutorial sobre cómo solucionar la falta del personalizador de temas en WordPress.
Clases de menú de navegación predeterminadas
WordPress también agrega clases CSS a los menús de navegación. Las siguientes son las clases predeterminadas que se agregan a los menús de navegación.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Tu tema de WordPress también agregará una clase CSS a cada ubicación de menú de navegación.
Digamos que tu tema asigna la clase de menú principal a una ubicación de menú dentro del área del encabezado, y luego puedes apuntarla en tu CSS usando las siguientes clases CSS.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Para más detalles, puedes ver nuestra guía sobre cómo estilizar menús de navegación en WordPress.
Clases de widgets predeterminados de WordPress
Los widgets son una forma fácil de mostrar bloques que no son de contenido en tu tema de WordPress. Típicamente se muestran en áreas listas para widgets o barras laterales dedicadas.
WordPress agrega las siguientes clases a los widgets heredados.
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
Sin embargo, a medida que WordPress avanza hacia áreas de widgets basadas en bloques, ahora puedes agregar diferentes bloques a tus áreas de widgets, y cada uno genera clases CSS dinámicamente.
Te mostraremos cómo encontrar estas clases CSS más adelante en este artículo.
Clases de formulario de comentarios predeterminadas
Los comentarios son el centro de interacción para muchos sitios web de WordPress. Estilizarlos te ayuda a brindar a los usuarios una experiencia más limpia y atractiva.
WordPress agrega las siguientes clases CSS predeterminadas para ayudar a los desarrolladores de temas a estilizar las áreas de comentarios.
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
Para más detalles, consulta nuestra guía sobre cómo estilizar comentarios en WordPress.
Búsqueda de clases de bloques de WordPress
El editor de bloques de WordPress genera dinámicamente clases CSS para los bloques.
Para encontrar estas clases CSS, primero deberás agregar un bloque en particular a una publicación o página. Luego, querrás hacer clic en el botón 'Vista previa' para ver el bloque en acción.
En la pestaña de vista previa, simplemente mueve el mouse sobre el bloque que acabas de agregar y haz clic derecho para seleccionar la herramienta Inspeccionar.
En la consola de desarrollador, verás el HTML generado por el bloque y las clases CSS que agregó.
En la captura de pantalla anterior, estamos viendo las clases CSS del bloque Galería. Luego puedes usar estas clases CSS para estilizar el bloque de galería en tu tema de WordPress.
Agregar tus propias clases CSS personalizadas en WordPress
Ahora, las clases CSS predeterminadas de WordPress son bastante completas. Sin embargo, su propósito es principalmente proporcionar a los desarrolladores de temas un marco estandarizado con el que construir.
Para tu sitio web, podrías necesitar agregar CSS personalizado en áreas donde las clases CSS predeterminadas no estén disponibles.
De manera similar, es posible que desees hacer pequeños cambios en una publicación o página específica sin afectar todo tu tema.
Afortunadamente, WordPress te proporciona varias formas sencillas de agregar clases CSS a diferentes áreas. Aquí hay varios métodos:
Agregar clases CSS personalizadas a un bloque dentro del editor de bloques
Si deseas agregar rápidamente una clase CSS personalizada a una publicación o página específica, la forma más fácil de hacerlo es usando el editor de bloques.
Simplemente edita la publicación o página y selecciona el bloque al que deseas agregar una clase CSS personalizada. Debajo de la configuración del bloque, simplemente haz clic en el panel 'Avanzado' y agrega el nombre de tu clase CSS.
No olvides guardar tus cambios haciendo clic en el botón 'Actualizar'.
Ahora puedes usar esta clase para agregar código CSS personalizado que solo afectará a este bloque en particular dentro de esta publicación o página específica.
En los menús de navegación de WordPress
También puedes agregar CSS personalizado a los elementos de tu menú de navegación de WordPress. Digamos que quieres convertir un elemento del menú en un botón, entonces este método es muy útil.
Simplemente ve a la página Apariencia » Menús y haz clic en el botón ‘Opciones de pantalla’ en la esquina superior derecha de la pantalla.
Desde aquí, querrás marcar la casilla junto a la opción ‘Clases CSS’.
A continuación, desplázate hacia abajo y expande el elemento del menú donde deseas agregar la clase CSS personalizada.
Notarás entonces un campo etiquetado como Clases CSS. Continúa y agrega tu clase CSS personalizada aquí.
No olvides hacer clic en el botón ‘Guardar Menú’ para conservar tus cambios.
Ahora puedes usar esta clase CSS personalizada para estilizar ese elemento de menú en particular de manera diferente.
Extra: Diseña fácilmente un tema de WordPress sin escribir código CSS
Aprender a estilizar tu tema de WordPress con CSS personalizado es una habilidad muy útil. Sin embargo, algunos usuarios simplemente pueden querer una solución para diseñar su tema de WordPress sin escribir código CSS.
Para esto, necesitarás SeedProd. Es la mejor herramienta de constructor de páginas de WordPress del mercado para crear fácilmente temas personalizados sin escribir ningún código.
SeedProd viene con temas listos para usar que puedes usar como punto de partida.
Si lo deseas, también puedes crear un tema desde cero.
Después de elegir una plantilla, estás listo para editar tu tema personalizado usando un editor intuitivo de arrastrar y soltar.
Simplemente arrastra bloques a tu diseño para crear tus propios diseños.
También puedes cambiar fácilmente cualquier elemento con un simple clic. Además, puedes usar tus propios colores, fondo, fuentes y más.
Para más detalles, consulta nuestro tutorial paso a paso sobre cómo crear fácilmente un tema personalizado de WordPress sin escribir ningún código.
Esperamos que este artículo te haya ayudado a encontrar la hoja de trucos CSS generada por defecto en WordPress. A continuación, también te puede interesar nuestra guía sobre cómo minificar archivos CSS o JavaScript en WordPress y cómo eliminar CSS no utilizado en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Gwyneth Llewelyn
Una referencia realmente, realmente útil — especialmente cuando deseas agregar algo de estilo 'extra', y la forma más fácil de hacerlo es simplemente usar uno de los estilos incorporados (ya que todos los bloques permiten agregar clases adicionales — pero no todos los temas permiten agregar CSS adicional, a menos que crees tu propio tema secundario, etc.)
Me pregunto si, entre las clases CSS 'más nuevas', Automattic ha proporcionado algo para estilizar los separadores. Me encantan las notas al pie y las uso *muchísimo* (incluso antes de que fueran 'estándar' en WP, ¡en los días de la 6.3!), pero no me gusta el estilo minimalista que tienen. WordPress admite plenamente que esto es un 'trabajo en progreso' y hay poco más que se pueda cambiar que algunos atributos de fuente: https://wordpress.org/documentation/article/footnotes-block/
¡Por lo tanto, CSS al rescate! Solo necesito una clase básica que te dé un
width=30%. Esperaba obtener algo así de tu extensa lista, pero me temo que no, al menos no para el otoño de 2025.Gracias de todos modos. ¡Tu lista es, sin embargo, bastante útil!
Moinuddin Waheed
Hoja de trucos muy útil para aquellos que tienen un poco de experiencia como desarrolladores y han trabajado con CSS.
Esto será de gran ayuda para realizar cambios en la apariencia visual y hacerla hermosa.
Gracias por crear esta hoja de trucos.
Mrteesurez
Bien hecho, has creado hojas de trucos CSS útiles. Estas facilitarán el manejo adecuado del estilo una vez dominadas. Gracias por tomarte el tiempo de combinar estas hojas de trucos CSS para nosotros.
Rodrigo Vieira Eufrasio da Silva
Te felicito por este maravilloso contenido. Solo recomendaría actualizar este artículo y decirnos qué clases genera Gutenberg y la última versión de WordPress, porque esta publicación está desactualizada. Pero me ayudó mucho.
Un abrazo para todos.
Soporte de WPBeginner
Thank you for letting us know, we’ll be sure to take a look
Administrador
Alison Westall
¿Hay alguna clase CSS para cambiar el relleno (padding) de un elemento? ¡Gracias!
Soporte de WPBeginner
Una vez que encuentres el objeto al que quieres agregarle relleno, usarías:
padding, padding-top, padding-right, padding-bottom, padding-left
dependiendo del tipo de relleno que quieras agregar
Administrador
Matt Cauley
Gracias por la información. ¡Acabo de guardar la página en marcadores aunque tiene algunos años!
Soporte de WPBeginner
Thank you, while the article is older, it should still be useful
Administrador
MS Shohan
Gran trabajo, hermano. Gracias por hacer una lista de todas las clases predeterminadas de WP
Hannah Steele
Hola, estoy teniendo muchos problemas para formatear la página de eventos generada automáticamente.
¿Me pueden ayudar?
Arunjith RS
Muy útil... Gracias.
Shai
¿Puedes (si aún no lo has hecho en otro lugar) enumerar las clases del panel de administración y los widgets de administración.
Parece que el administrador está utilizando un cargador (wp-admin/load-styles.php) para incluir su CSS, pero ese CSS está comprimido y es difícil de leer. Sería bueno ver una lista de los elementos en uso. Por ejemplo, si deseas crear tu propio widget con pestañas; inspeccioné el CSS y puedo ver una larga lista de CSS relacionados con la clase .nav-tab.
.
Ari Susanto
¡y el "entry-content" en sí!
Ari Susanto
Quiero agregar este:
"status-publish"
luroch
Una pregunta: al crear un tema de bootstrap a partir de underscores, ¿debo conservar las clases e IDs que vienen con este framework, solo agregando los de Bootstrap, o puedo usar solo clases e IDs de Bootstrap?
Ari Susanto
¿Cómo los encontraste? ¿Hay alguna forma automatizada como usar una función de php, quizás?
Stephen Clark
Publicación fantástica y muy informativa. Me pregunto si podrías agregar a esta publicación detalles similares sobre el pie de página de WP. He estado luchando con el estilo y formato del pie de página con el tema que estoy usando, y con otros sitios que he creado.
También sería útil tener un archivo de hoja de estilos CSS descargable que contenga todos estos estilos. ¡Gracias!
Kevin Pryce
Cuando inspecciono el elemento solo de mi tema de WordPress, no veo estos estilos, especialmente los aplicados a la clase del cuerpo. ¿Tienes que ponerlos en la plantilla?
Joel Bladt
Buena compilación de todas las clases estándar de WordPress. ¿Eran realmente todas las clases que WordPress agrega automáticamente? Si las clases se vuelven obsoletas y desaparecen, o si han llegado otras nuevas, espero actualizar la lista.
– Blogger alemán y traducido con Google Translator.
Soporte de WPBeginner
Está actualizado hasta donde sabemos, si encuentra alguna clase obsoleta, por favor háganoslo saber.
Administrador
loreto
time saver! now let me mess those styles
Amba Junior
Tutorial muy útil. Al igual que la guía de hooks visuales de Genesis, esto resume muy bien Genesis
MalcolmOwen
¿Sabes qué sería útil? Una versión PDF imprimible de esta guía...
Pete
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
¡Gracias Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
¡@smashingmag Felicidades por tu tweet de 50★! http://t.co/r78Ao3Sm
bobHankin
@photoassassin No, no lo había hecho. ¡Eso es genial! ¡Práctico también!
eugenebicyclist
Apenas estoy aprendiendo a trabajar con WP y esto es muy útil. Gracias.