Hoja de trucos de CSS generada por defecto por WordPress para principiantes

¿Alguna vez te has preguntado cómo puedes estilizar diferentes elementos del tema de WordPress? Bueno, varía de un tema a otro, pero hay ciertas clases CSS e IDs que son generadas por WordPress. Si usted es alguien que está tratando de diseñar un tema, o que está buscando crear un tema para su publicación, entonces estos son algunos elementos de estilo que usted podría considerar agregar en su tema.

El objetivo de esta hoja de trucos es ayudar a los principiantes que buscan entrar en el estilo de temas de WordPress. Si eres un principiante que no quiere ocuparse de los códigos, entonces te recomendamos que obtengas un marco de trabajo temático como Headway, que lo hace todo por ti con la función de arrastrar y soltar. Para el resto de ustedes, vamos a repasar algunos de los estilos por defecto más importantes de WordPress uno por uno.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Estilos de clase de carrocería por defecto

Una de las grandes cosas de WordPress es su personalización. Le permite dirigir aspectos muy específicos de su sitio con CSS. Una de las formas en que lo hace es añadiendo clases personalizadas a varios elementos de su blog. La más importante de ellas es la etiqueta . Aquí hay algunos ejemplos de clases comunes que WordPress podría añadir a este elemento:

.rtl {}.inicio {}.blog {}.archivo {}.fecha {}.buscar {}.paged {}.archivo adjunto {}.error404 {}.single postid-(id) {}.attachmentid-(id) {}.archivo adjunto-(tipo mime-) {}.author {}.author-(nombre_de_usuario) {}.categoría {}.categoría-(babosa) {}.tag {}.tag-(slug) {}.page-parent {}.page-child parent-pageid-(id) {}.page-template page-template-(nombre de archivo de plantilla) {}.resultados de búsqueda {}.búsqueda-sin-resultados {}.logueado {}.paged-(número de página) {}.página simple-(número de página) {}.page-paged-(número de página) {}.category-paged-(número de página) {}.tag-paged-(número de página) {}.fecha-página-(número de página) {}.author-paged-(número de página) {}.página de búsqueda-(número de página) {}

>

Si, por ejemplo, desea cambiar el estilo de su página de resultados de búsqueda de una manera específica, puede utilizar la clase «resultados de búsqueda» para añadir su estilo. WordPress sólo añade esta clase a la etiqueta body cuando la página de resultados de búsqueda está activa, por lo que no afecta a ninguna otra página.

Estilos de mensajes predeterminados

Al igual que con el elemento de cuerpo, WordPress también añade clases dinámicas a los elementos del post. Aquí hay una lista de algunos de los más populares:

.post-id {}.post {}.página {}.archivo adjunto {}.pegajoso {}.hentry {}.category-misc {}.categoría-ejemplo {}.tag-news {}.tag-wordpress {}.tag-markup {}

>

Si has leído nuestro artículo Qué, por qué y cómo de los formatos de publicación en WordPress 3.1, entonces usted acerca de los formatos de publicación y cómo puede mostrar sus mensajes de manera diferente según el formato que elija. Una vez más, WordPress añade clases dinámicas a tu post usando la función post_class () que te permitirá crear tus propios estilos para cada formato. La función post_class () añadirá una clase en forma de «.format-foo» donde foo es cualquier formato de post que haya elegido, es decir, galería, imagen, etc.

.format-image {}.format-gallery {}.format-chat {}.format-link {}.format-quote {}.format-status {}.format-video {}

>

Estilos de menú predeterminados

En nuestro artículo llamado cómo estilizar los menús de navegación de WordPress discutimos cómo puedes añadir tu propia clase a tu menú. Vamos a suponer que lo ha leído y que ha dado a su menú de navegación su propio nombre de clase de «menú principal».

#header.main-menu{} // Clase de contenedor#header .main-menu ul {} // Primera lista no ordenada de la clase de contenedor#header .main-menu ul {} //Lista no ordenada dentro de una lista no ordenada#header .main-menu li {} // cada elemento de navegación#header .main-menu li a {} // cada elemento de navegación ancla#header .main-menu li ul {} // Lista no ordenada si hay elementos desplegables#header .main-menu li li {} // cada elemento de navegación desplegable#header .main-menu li li a {} // cada uno de los elementos de navegación anclados en el ancla.current_page_item{} // Clase para la página actual.current-cat{} // Clase para la categoría actual.current-menu-item{} // Clase para cualquier otro elemento de menú actual.menu-item-type-taxonomy{} // Clase para una categoría.menu-item-type-post_type{} // Clase para Páginas.menu-item-type-custom{} // Clase para cualquier artículo personalizado que haya añadido.menu-item-home{} // Clase para el Enlace de Inicio>

Note que cada vez que usted crea un menú en WordPress es automáticamente envuelto en un div. Este div sólo tiene un nombre de clase si lo especifica (elegimos «main-menu»). A partir de ahí, sólo tienes que cambiar el estilo de los distintos elementos de la lista.

Estilos predeterminados del editor WISIWYG

El editor WISWYG es uno de los aspectos más populares y utilizados de WordPress. Por esta razón es una buena idea tener estilos preparados para cualquier cosa que el usuario pueda añadir a su blog, como imágenes o citas en bloque. El siguiente CSS muestra qué clases añade WordPress automáticamente a estos elementos:

.entry-content img {}.alignleft, img.alignleft {}.alignright, img.alignright {}.aligncenter, img.aligncenter {}.alignnone, img.alignnone {}.wp-caption {}.wp-caption img {}.wp-caption p.wp-caption-text {}.wp-smiley {}blockquote.left {}blockquote.right {}.gallery dl {}.gallery dt {}.galería dd {}.gallery dl a {}.gallery dl img {}.gallery-caption {}.size-full {}.size-large {}.size-medium {}.size-magnail {}

>

Usted puede ver que hay varias clases que pertenecen sólo a las imágenes. Si, por ejemplo, el usuario decide incluir una imagen alineada a la izquierda, WordPress añadirá la clase «alignleft».

Estilos predeterminados del widget de WordPress

Los widgets son otro aspecto popular de WordPress. Como desarrollador, usted tiene el control sobre los widgets que se van a mostrar, por lo que normalmente sabrá exactamente qué estilos añadir. WordPress viene con un puñado de widgets por defecto, sin embargo, y a menos que los elimines es recomendable añadir estilo a sus clases.

.widget {}#searchform {}.widget_search {}.texto-lector de pantalla {}.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 seleccionar {}.widget_archive opción {}.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:después de {}.widget_tag_cloud a:antes {}.widget_calendario {}#calendario_wrap {}#calendario_wrap th {}#calendario_wrap td {}#wp-calendar tr td {}# wp-calendar caption {}#wp-calendario a {}#wp-calendario #hoy {}#wp-calendario #prev {}#wp-calendario #siguiente {}#wp-calendario #siguiente a {}#wp-calendario #prev a {}.widget_categorías {}.widget_categorías ul {}.widget_categorías ul li {}.widget_categorías ul ul.children {}.widget_categorías a {}.widget_categorías seleccionar{}.widget_categorías select#cat {}.widget_categorías select.postform {}.widget_categorías opción {}.widget_categorías .nivel-0 {}.widget_categorías .nivel-1 {}.widget_categorías .nivel-2 {}.widget_categorías .nivel-3 {}.recentcomments {}#comentarios recientes {}#recentcomments li {}#recentcomments li a {}.widget_comentarios_recientes {}.widget_entradas recientes {}.widget_recent_entries ul {}.widget_recent_entries ul li {}.widget_recent_entries ul li a {}.textwidget {}.widget_text {}.textwidget p {}

>

Al diseñar widgets, es probable que acabes usando los mismos estilos una y otra vez. Por esta razón es una buena idea combinar clases en su hoja de estilo usando comas. Por ejemplo, podría combinar .widget_pages ul y .widget_archive ul haciendo algo como esto:

.widget_pages ul, .widget_archive ul {}

>

Estilos de formularios de comentarios predeterminados

Tan feo como el estilo de los comentarios puede obtener WordPress hace que sea mucho más fácil con sus clases por defecto. Sin embargo, si no se trata de comentarios enhebrados, es posible ignorar muchos de ellos.

/*Salida de comentarios*//.lista de inicio .respuesta {}.lista de inicio .responder a {}.commentlist .alt {}.lista de inicio.odd {}.lista de inicio .incluso {}.commentlist .thread-alt {}.lista de inicio .thread-odd {}.lista de inicio .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 {}.lista de inicio .padre {}.lista de inicio .comentario {}.lista de inicio .niños {}.lista de inicio .pingback {}.commentlist .bypostauthor {}.commentlist .comment-author {}.lista de inicio.commentlist .comment-author-admin {}.lista de inicio {}.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} {id} {}.commentlist li li.ul.children li.bypostauthor {}.commentlist li ul.children li.comment-author-admin {}#cancelación-comunicación-respuesta {}#cancelación-comunicación-respuesta a {}/*Formulario de comentarios *//#responde { }#reply-title { }#cancelación-comunicación-respuesta-enlace { }# formulario de comentario { }#author { }#email { }#url { }#comentario#submit.notas iniciales { }.requerido { }.inicio-formularios-autor { }.formulario de inicio-email { }.comment-form-url { }.comentario sobre el formulario de inicio { }.etiquetas permitidas en el formulario { }.form-submit

>

Ya que esto es sólo una hoja de trucos, todavía hay muchas otras clases e identificaciones que tal vez no hayamos cubierto. Si usted siente que algo más es importante y que pertenece a esta lista, por favor siéntase libre de dejar un comentario a continuación.

Deja un comentario