• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Estilos CSS por defecto que genera WordPress

Estilos CSS por defecto que genera WordPress

Clases CSS por defecto WordPress

[ 19 septiembre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

WordPress genera estilos CSS base a nivel de algunas etiquetas HTML las cuales podemos usar para personalizar nuestro sitio web. En este artículo veremos algunos de estos estilos CSS por defecto que nos brinda WordPress.

Anteriormente vimos cómo Usar Firebug para Modificar un Theme, este artículo nos servirá de base para aprender a usar los ids y clases que se detallan a continuación.
 

1- Estilos por defecto para la etiqueta body

Estas clases posiblemente son las que más usaremos si queremos hacer personalizaciones a páginas específicas en nuestro sitio. El siguiente listado muestra los estilos generados para la etiqueta HTML body. Para usar alguna de estas clases, se debe reemplazar las mayúsculas por el valor adecuado, por ejemplo en .page-id-10, ver video para más detalle.


.home {} 		/* se muestra si estas en la página de inicio*/
.page{} 		/* estas viendo el detalle de una página*/
.page-id-ID{} 	/* estas viendo detalle de página específica */
.single{} 		/* estas viendo el detalle de una entrada */
.postid-ID {} 	/* estas viendo el detalle de entrada específica */
.logged-in {} 	/* indica si un usuario esta conectado */
.blog {} 		/* lista entradas formato blog */
.archive {} 	/* lista de entradas, usualmente va asociado con category*/
.search {} 		/* lista de entradas buscadas */
.paged {} 		/* lista entradas cuando hay paginación */
.attachment {} 	/* lista de entradas con adjuntos*/
.date {} 		/* lista entradas por fecha */
.error404 {} 	/* para el body de la página de error.php */
.author {} 		/* indica el detalle de una página de autor */
.tag {} 		/* lista de entradas por por tag*/
.category {} 	/* lista de entradas por categoría */
.category-SLUG {} 		/* lista de entradas por categoría específica */
.search-results {} 		/* lista de entradas de búsqueda */
.search-no-results {} 	/* no existen entradas para la búsqueda */
.attachmentid-ID {} 	/* página de adjunto específica */
.attachment-MIMETYPE {} /* Tipo de página de adjunto de acuerdo al tipo */
.author-USERNICENAME {} /* autor específico en base al nombre */
.tag-SLUG {} 			/* lista de entradas por tag específico */
.page-parent {} 		/* página padre */
.page-child{} 			/* detalle de alguna página hija */
.parent-pageid-ID {} 	/* página hija específica */
.rtl {} 				/* texto de derecha a izquierda, para algunos idiomas */

 

2- Estilos por defecto para contenido

Tenemos básicamente estilos de páginas y estilos de entradas, pero podrían ser extensibles a cualquier post-type, las clases aplicadas se detallan en el siguiente enlace, a diferencia del caso anterior estas clases podrían aplicarse en cualquier etiqueta contenedora del contenido, depende cómo lo usa el theme , sin embargo usualmente se suele usar la etiqueta HTML article. En el listado se detallan las clases, para algunas será necesario reemplazar las mayúsculas por un valor válido, por ejemplo .post-10.


.post-ID{} 	/* clase para una entrada o página específica*/
.page{} 	/* clase para una página */
.post{} 	/* clase para un post */
.has-post-thumbnail{} 	/* si el artículo tiene imagen destacada*/
.TAXONMIA-NOMBRE{} 		/* por ejemplo : categoria-noticias */
.type-TIPO{} 			/* por ejemplo type-post o type-page */
.sticky{} 				/* cuando un artículo es definido como sticky o fijo */
.tag-NOMBRE{} 			/* si el artículo tiene un tag*/
.hentry{} 				/* hAtom microformato */
.status-ESTADO{} 		/* define una clase para el estado, usualmente publish */
.format-FORMATO{} 		/* clase para formato defecto o estandard*/
.post-password-required{} 	/* clase para pagina de clave requerida*/
.post-password-protected{} 	/* clase para página de protegido por clave*/

 

3- Estilos por defecto para menús

Para una referencia completa de las clases que se generan para los menús revisar el siguiente enlace. En el siguiente listado se muestra los estilos más importantes


.menu-item{}             /* clase para un item de menú*/
.menu-item-ID{}         /* clase para un item de menú específico */
#menu-item-ID{}         /* id para un item de menú específico*/
.current-menu-item{}     /* menu activo actualmente */
.current-menu-parent{}     /* menu padre activo actualmente */
.menu-item-has-children{} /* el menú es un menú padre */

 

4- Estilos por defecto de los Widgets

La mayoría de los widgets crean sus propias clases, sin embargo de manera general el siguiente listado presenta las más importantes.


.widget{}		/* clase para un widget */
.widget_NOMBRE{}/* widget de un tipo específico */
#NOMBRE{}		/* id del nombre del widget */
.widget-title{}	/* título del widget */
.widget-wrap{}	/* usado usualmente para un widget de texto como contenedor*/

Tener en cuenta que el nombre del widget puede contener un número en caso existan más widgets del mismo tipo agregado, por ejemplo #text-4.

 

5- Estilo por defecto de comentarios

Depende mucho del tema que se use, sin embargo los estilos más importantes son los que se detallan en la siguiente lista.


.commentlist{}			/* lista de comentarios */
.odd{}					/* diferencia comentarios pares */
.even{}					/* diferencia comentarios impares */
.depth-NUMERO{}			/* profundidad de respuesta */
.comment-author{}		/* área de autor */
.comment-author-NOMBRE{}/* clase para autor específica */
.comment-reply{}		/* link para responder */
.comment-form{}			/* contenedor del formulario de comentarios*/
.comment-form-author{}	/* campo de nombre */
.comment-form-email{}	/* campo de correo */
.comment-form-url{}		/* campo de url */
.comment-form-comment{}	/*contenedor formulario */
#submit{}				/* clase para el boton de enviar */

 

6- Estilos por defecto Generales

Una referencia completa de estos estilos se encuentra en el siguiente enlace. Alguno de los más importantes se muestra en la siguiente lista.


.alignleft{}     /* alinear a la izquierda */
.alignright{}     /* alinear a la derecha */
.aligncenter{}     /* alinear al centro */
.alignnone{}     /* sin alineación */
.wp-caption{}     /* clase para un subtitulo */
.screen-reader-text{} /* clase para accesibilidad */

 

En el siguiente video se explica el uso de las clases que genera por defecto WordPress, se realizan dos modificaciones:

  • Cambio de color de fondo de una página específica.
  • Ocultar Widget para usuarios registrados.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Nombre de la categoría en las clases del body de una entradaNombre de la categoría en las clases del body de una entrada
  • Clases CSS basadas en el Rol de usuario en WordPressClases CSS basadas en el Rol de usuario en WordPress
  • Agregar CSS personalizado al área de administración de WordPressAgregar CSS personalizado al área de administración de WordPress
  • Tablas Responsive en WordPressTablas Responsive en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,80 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Tere

    30 marzo, 2018

    Me encanta tu blog. Creo que efectivamente es wordpress a otro nivel. Gracias

    • Jhon Marreros Guzmán

      30 marzo, 2018

      Gracias Tere, Saludos.

  2. Silvana

    5 julio, 2018

    Me a sido de mucha utilidad tu blog

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Google Fonts en WordPress sin usar plugins

Agregar login y logout en un menú de WordPress

Campos personalizados en productos de WooCommerce

Campo de texto para escribir en productos WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados