Hoja de trucos CSS predeterminada generada por WordPress para principiantes

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

El objetivo de esta hoja de trucos es ayudar a los principiantes que buscan ingresar al estilo de los temas de WordPress. Si usted es un principiante que no quiere lidiar con los códigos, le recomendamos que obtenga un marco de tema como Headway que hace todo esto por usted con solo arrastrar y soltar. Para el resto de ustedes, vamos a revisar uno por uno de los estilos de WordPress predeterminados más importantes..

Video Tutorial

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

Estilos de clase de cuerpo predeterminados

Una de las grandes cosas de WordPress es su personalización. Te permite dirigir aspectos muy específicos de tu sitio con CSS. Una de las formas en que lo hace es mediante la adición de clases personalizadas a varios elementos de su blog. El más importante de estos es la etiqueta. Aquí hay algunos ejemplos de clases comunes que WordPress podría agregar a este elemento:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (mime-type)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .page-child parent-pageid- (id)  ​​.page-template page-template- (nombre del archivo de plantilla)  .search-results  .search-no-results  .logged-in  .paged- (número de página)  .single-paged- (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)  .date-paged- (número de página)  .author-paged- (número de página)  .search-paged- (número de página)  

Si, por ejemplo, le gustaría aplicar un estilo a su página de resultados de búsqueda de una manera específica, puede usar la clase de "resultados de búsqueda" para agregar su estilo. WordPress solo agrega esta clase a la etiqueta del cuerpo cuando la página de resultados de búsqueda está activa para que no afecte a ninguna otra página..

Estilos de publicación predeterminados

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

 .post-id  .post  .page  .attachment  .sticky  .hentry  .category-misc  .category-example  .tag-news  .tag-wordpress . etiqueta de marcado  

Si ha leído nuestro artículo Qué, por qué y cómo de los formatos de publicación en WordPress 3.1, le informará sobre los formatos de publicación y cómo puede mostrar sus publicaciones de manera diferente según el formato que elija. Una vez más, WordPress agrega clases dinámicas a tu publicación usando la función post_class () que te permitirá crear tus propios estilos para cada formato. La función post_class () agregará una clase en la forma de ".format-foo" donde foo es el formato de publicación que hayas 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 titulado Cómo personalizar los menús de navegación de WordPress, analizamos cómo puede agregar su propia clase a su menú. Vamos a asumir que lo has leído y que le diste a tu menú de navegación su propio nombre de clase de "menú principal".

 #header .main-menu  // clase de contenedor #header .main-menu ul  // clase de contenedor primero lista desordenada #header .main-menu ul ul  // lista desordenada dentro de una lista desordenada #header .main -menu li  // cada elemento de navegación #header .main-menu li a  // ancla de cada elemento de navegación #header .main-menu li ul  // lista desordenada si hay elementos desplegables #header .main -menu li li  // cada elemento de navegación desplegable #header .main-menu li li a  // cada drap down anchor del elemento de navegación .current_page_item  // Class for Current Page .current-cat  // Clase para la categoría actual .current-menu-item  // Clase para cualquier otro elemento de menú actual .menu-item-type-type-taxonomy  // Class para una categoría .menu-item-type-post_type  // Class para Páginas .menu-item-type-custom  // Class para cualquier artículo personalizado que haya agregado .menu-item-home  // Class para el enlace de inicio 

Tenga en cuenta que cada vez que crea un menú en WordPress, se envuelve automáticamente en un div. Este div solo tiene un nombre de clase si lo especifica (elegimos "menú principal"). A partir de ahí usted está simplemente diseñando los diferentes 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 listos para cualquier cosa que el usuario pueda agregar a su blog, como imágenes o blockquotes. El siguiente CSS le muestra qué clases WordPress agrega 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  .gallery dd  .gallery dl a   .gallery dl img  .gallery-caption  .size-full  .size-large  .size-medium  .size-thumbnail  

Puedes ver que hay varias clases relacionadas solo con imágenes. Si, por ejemplo, el usuario decide incluir una imagen alineada a la izquierda, WordPress agregará la clase "alignleft".

Estilos de widget de WordPress predeterminados

Los widgets son otro aspecto popular de WordPress. Como desarrollador, usted tiene control sobre qué widgets se mostrarán, por lo que generalmente sabrá exactamente qué estilos agregar. Sin embargo, WordPress viene con un puñado de widgets predeterminados y, a menos que los elimines, es aconsejable agregar estilo a sus clases..

 .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 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  .widget_tag_cloud a: antes de  .widget_calendar  #calendar_wrap  #calendar_wrap th  #calendar_wrap td  # wp-calendar tr td  # wp-calendar caption  # wp-calendar a  # wp -calendario #today  # wp-calendar #prev  # wp-calendar #siguiente  # wp-calendar #siguiente a  # wp-calendar #prev a  .widget_categories  .widget_categories ul . widget_categories ul li  .widget_categories ul ul.childr en  .widget_categories a  .widget_categories seleccione  .widget_categories seleccione # cat  .widget_categories select.postform  .widget_categories opción  .widget_categories .level-0  .widget_categories. .level-2  .widget_categories .level-3  .recentcomments  #recentcomments  #recentcomments li  #recentcomments li a  .widget_recent_coment_incent.viv.viv.vidget_recent_entries .  .widget_recent_entries ul li a  .textwidget  .widget_text  .textwidget p  

Cuando estilice widgets, probablemente terminará usando los mismos estilos una y otra vez. Por esta razón, es una buena idea combinar las clases en su hoja de estilo usando comas. Por ejemplo, puedes combinar .widget_pages ul y .widget_archive ul haciendo algo como esto:

 .widget_pages ul, .widget_archive ul  

Estilos de formulario de comentarios predeterminados

Tan feo como los comentarios de estilo pueden obtener WordPress lo hace mucho más fácil con sus clases predeterminadas. Sin embargo, si no está tratando con comentarios subprocesos, es posible ignorar muchos de ellos..

 / * Salida de comentario * / .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  .co mmentlist 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.childrenes li.comment-author-admin  # cancel-comment-reply  # cancel-comment-reply a  / * Formulario de comentarios * / #respondió  # reply-title  # cancel-comment- responder-enlace  #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 

Ya que esto es solo una hoja de trucos, todavía hay muchas otras clases e identificaciones que es posible que no hayamos cubierto. Si siente que algo más es importante y pertenece a esta lista, no dude en dejar un comentario a continuación..