Hoja de trucos CSS predeterminada generada por WordPress para principiantes

¿Alguna vez se ha preguntado cómo podría diseñar diferentes elementos del tema de WordPress? Bueno, varía de un tema a otro, pero hay algunas clases de CSS e ID generadas por WordPress. Si está tratando de diseñar un tema o está buscando crear un tema para una publicación pública, aquí hay algunos elementos de estilo que puede considerar agregar a su tema. El propósito de esta hoja de trucos es ayudar a los novatos que buscan comenzar con el estilo del tema de WordPress. Si eres un principiante que no quiere lidiar con códigos, te recomendamos que te consigas un marco temático como Headway que lo haga todo por ti arrastrando y soltando. Para el resto de ustedes, veremos uno por uno algunos de los estilos predeterminados de WordPress más importantes.

Video tutorial

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Estilos de clase de cuerpo predeterminados

Una de las ventajas de WordPress es su personalización. Le permite apuntar a aspectos muy específicos de su sitio con CSS. Una forma de hacerlo es agregar clases personalizadas a varios elementos de su blog. El más importante de ellos es el 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- (plantilla de nombre de archivo ) {} .search -results {} .search-no-results {} .logged-in {} .paged- (número de página) {} .single-paged- (número de página) {} .page-paged- (página número) {}. 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- (página number) {} Si, por ejemplo, desea personalizar su página de resultados de búsqueda de una manera específica, puede usar la clase "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, por lo que no afecta 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 publicación. Aquí hay una lista de los más populares: .post-id {} .post {} .page {} .attachment {} .sticky {} .hentry {} .category-misc {} .category-example {} .tag- news {} .tag-wordpress {} .tag-markup {} Si ha leído nuestro artículo Qué, por qué y cómo hacer formatos de publicación en WordPress 3.1, entonces conoce los formatos de publicación y cómo puede mostrar sus publicaciones de manera diferente según en el formato que elija. Nuevamente, WordPress agrega clases dinámicas a su publicación usando la función post_class () que le permitirá crear sus propios estilos para cada formato. La función post_class () agregará una clase en forma de ".format-foo" donde foo es el formato de publicación que eligió, 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 diseñar los menús de navegación de WordPress, explicamos cómo puede agregar su propia clase a su menú. Asumiremos que lo ha leído y le ha dado a su menú de navegación su propio nombre de clase "menú principal". #header .main-menu {} // clase de contenedor #header .main-menu ul {} // clase de contenedor primera lista desordenada #header .main-menu ul ul {} // lista desordenada en lista desordenada # encabezado .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 desordenada s 'hay #header .main -menu li li {} dropdowns // cada #header .main-menu li li a {} // cada elemento de navegación drapeado anchor .current_page_item {} // Clase de 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 elemento personalizado que haya agregado .menu-item-home {} // Clase 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 especificas (hemos elegido "menú principal"). A partir de ahí, simplemente aplica estilo a los diferentes elementos de la lista.

Estilos predeterminados del editor WISIWYG

Uno de los aspectos más populares y ampliamente utilizados de WordPress es el editor WISWYG. 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 citas en bloque. El siguiente CSS le muestra las clases que 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-miniature {} Puede ver que hay varias clases que pertenecen solo a 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 el control de qué widgets se mostrarán, por lo que normalmente sabrá exactamente qué estilos agregar. Sin embargo, WordPress viene con un puñado de widgets de forma predeterminada y, a menos que los elimine, 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 {} opción .widget_archive {} .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.child ren {} .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 {}. widget_recent {} .widget_recent_entries ul {} .widget_recent_entries {} .widget_recent_entries ul li a {} .textwidget {} .widget_text {} .textwidget p {} Al diseñar 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, puede combinar .widget_pages ul y .widget_archive ul haciendo algo como esto: .widget_pages ul, .widget_archive ul {}

Estilos de formulario de comentarios predeterminados

Por más feos que puedan resultar los comentarios de estilo, WordPress lo hace mucho más fácil con sus clases predeterminadas. Sin embargo, si no se trata de comentarios encadenados, muchos pueden ignorarse. / * 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 ...