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 algunas clases e ID de CSS generadas por WordPress. Si usted es alguien que busca diseñar un tema o desea crear un tema para su lanzamiento público, estos son algunos elementos de estilo que puede considerar agregar a su tema.

El objetivo de esta hoja de trucos es ayudar a los principiantes que buscan entrar en el estilo de los temas de WordPress. Si eres un principiante que no quiere molestarse con la codificación, querrás obtener un marco temático como Headway que lo haga todo por ti con arrastrar y soltar. Para el resto de ustedes, repasaremos uno por uno algunos de los estilos predeterminados de WordPress más importantes.

Si no le gusta el video o necesita más instrucciones, siga leyendo.

Estilos de clases corporales predefinidos

Una de las mejores cosas de WordPress es su personalización. Le permite apuntar a aspectos muy específicos de su sitio con CSS. Una de las formas en que lo hace es agregando clases personalizadas a varios elementos de su blog. El más importante de ellos 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-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Por ejemplo, si desea diseñar su página de resultados de búsqueda de una manera específica, puede usar la clase "resultados de búsqueda" para agregar el estilo. WordPress agrega esta clase a la etiqueta del cuerpo solo cuando la página de resultados de búsqueda está activa, por lo que no afecta a otras páginas.

Estilos de publicación predefinidos

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 algunos 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 con los formatos de publicación en WordPress 3.1, entonces hablará sobre los formatos de publicación y cómo puede mostrar sus publicaciones de manera diferente según 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 ha elegido, por ejemplo. galería, imagen, etc.

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

Estilos de menú predefinidos

En nuestro artículo llamado cómo diseñar los menús de navegación de WordPress, discutimos cómo puede agregar su clase a su menú. Asumiremos que lo ha leído y que le ha dado a su menú de navegación el nombre de clase de "menú principal".

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

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 (elegimos "menú principal"). A partir de ahí, simplemente está dibujando los diversos elementos de la lista.

Estilos de editor WISIWYG predefinidos

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 citas en bloque. El siguiente CSS muestra qué clases agrega 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 {}
.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. Por ejemplo, si el usuario decide incluir una imagen alineada a la izquierda, WordPress agregará la clase "alignleft".

Estilos de widget predeterminados de WordPress

Los widgets son otro aspecto popular de WordPress. Como desarrollador, usted tiene control sobre qué widgets se mostrarán, por lo que normalmente sabrá exactamente qué estilos agregar. Sin embargo, WordPress viene con un puñado de widgets predefinidos 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 {}
.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 {}

Al dibujar widgets, probablemente terminará usando los mismos estilos una y otra vez. Por esta razón, es una buena idea combinar clases en la 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 predefinidos

Por mucho que los comentarios de estilo puedan obtener comentarios de estilo, WordPress lo hace mucho más fácil con sus clases integradas. Sin embargo, si no está tratando con comentarios encadenados, muchos de ellos pueden ignorarse.


/*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


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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir