¿Está buscando una hoja de referencia CSS predeterminada generada por WordPress?
WordPress agrega automáticamente algunas clases de CSS a diferentes elementos en la mayorÃa de los temas. Estas clases CSS predefinidas se pueden utilizar para diseñar dichos elementos en su tema de WordPress.
En este artÃculo, le mostraremos la hoja de referencia CSS predeterminada generada por WordPress. También hablaremos sobre cómo encontrar fácilmente clases de CSS y cómo agregar clases de CSS personalizadas cuando las necesite.
¿Por qué conocer el CSS predeterminado generado por WordPress?
WordPress genera y agrega automáticamente clases CSS predefinidas a diferentes elementos de su sitio web de WordPress.
Los desarrolladores de temas de WordPress pueden usar estas clases CSS para definir áreas comunes en todos los sitios de WordPress. Esto puede incluir el área de contenido, barras laterales, widgets, menús de navegación y más.
Conocer estas clases de CSS es útil si estás aprendiendo a desarrollar temas de WordPress o simplemente buscas crear un tema secundario para tu sitio web.
También le ayuda a diseñar rápidamente ciertos elementos en su tema de WordPress agregando CSS personalizado sin crear su propio tema.
Dicho esto, echemos un vistazo a las clases CSS predeterminadas generadas por WordPress.
Estilos de clases de cuerpo predeterminados
Etiqueta corporal
en HTML contiene toda la estructura de diseño de cualquier página web, lo que la hace muy importante en el diseño de cualquier tema de WordPress.WordPress agrega varias clases de CSS al área del cuerpo que los diseñadores de temas pueden usar para diseñar el contenedor del cuerpo.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Como puede ver, estas clases incluyen una amplia variedad de condiciones a las que puede apuntar en sus estilos CSS.
Por ejemplo, si desea que la página de la categorÃa “Noticias” tenga un color de fondo diferente, puede agregar el siguiente CSS personalizado.
.category-news {
background-color:#f7f7f7;
}
Clases de estilo de publicación predeterminadas
Al igual que con el elemento del cuerpo, WordPress también agrega clases dinámicas para publicar elementos.
Este elemento suele ser el
>
Aquà hay una lista de algunas de las clases CSS más comunes generadas por la función post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Las clases de publicaciones le permiten diseñar publicaciones de blogs y páginas que cumplan con diferentes condiciones. Por ejemplo, puede aplicar estilos diferentes a las publicaciones de blog archivadas en una categorÃa especÃfica utilizando el siguiente CSS personalizado:
.category-news {
background-color:#EFEFEF;
}
Si no ve el editor CSS en su panel de WordPress, siga nuestro tutorial sobre cómo solucionar el personalizador de temas de WordPress que falta.
Clases de menú de navegación predeterminadas
WordPress también agrega clases de CSS a los menús de navegación. A continuación se muestran las clases predefinidas agregadas a los menús de navegación de forma predeterminada.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Su tema de WordPress también agregará una clase CSS a cada ubicación del menú de navegación.
Digamos que su tema asigna la clase de menú principal a una ubicación de menú dentro del área del encabezado, luego puede orientarlo en su CSS usando las siguientes clases de CSS.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Para obtener más detalles, consulte nuestra guÃa sobre cómo diseñar menús de navegación en WordPress.
Clases de widgets de WordPress predeterminadas
Los widgets son una manera fácil de mostrar bloques sin contenido en su tema de WordPress. Por lo general, aparecen en áreas dedicadas o barras laterales listas para widgets en su tema de WordPress.
WordPress agrega las siguientes clases a los widgets heredados.
.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 {}
Sin embargo, a medida que WordPress avanza hacia áreas de widgets basadas en bloques, ahora puede agregar diferentes bloques a las áreas de widgets y cada uno de ellos genera clases CSS dinámicamente.
Le mostraremos cómo encontrar estas clases de CSS más adelante en este artÃculo.
Clases de formulario de comentarios predeterminado
Los comentarios son el centro de participación de muchos sitios web de WordPress. Diseñarlos le ayuda a brindar a los usuarios una experiencia más limpia y atractiva.
WordPress agrega las siguientes clases CSS predeterminadas para ayudar a los desarrolladores de temas a definir el área de comentarios.
/*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
Para obtener más detalles, consulte nuestra guÃa sobre cómo diseñar comentarios en WordPress.
Encontrar clases de bloques de WordPress
El editor de bloques de WordPress genera dinámicamente clases CSS para bloques.
Para encontrar estas clases de CSS, deberá agregar ese bloque en particular a una publicación o página. A continuación, debe hacer clic en el botón Vista previa para ver el bloque en acción.
En la pestaña de vista previa, pase el mouse sobre el bloque que acaba de agregar y seleccione la herramienta Inspeccionar haciendo clic derecho.
En la consola del desarrollador, verá el HTML generado por el bloque. Desde aquà puedes ver las clases CSS agregadas por el bloque.
En la captura de pantalla anterior, vemos las clases CSS del bloque GalerÃa. Luego puedes usar estas clases CSS para diseñar el bloque de galerÃa en tu tema de WordPress.
Agregar sus clases CSS personalizadas en WordPress
Ahora, las clases CSS predeterminadas de WordPress son bastante completas. Sin embargo, su propósito es principalmente proporcionar a los desarrolladores de temas un marco estandarizado para construir.
Para su sitio web individual, es posible que necesite agregar CSS personalizado para áreas donde es posible que no pueda encontrar una clase CSS predeterminada a la que dirigirse.
Del mismo modo, a veces es posible que desees realizar solo un pequeño cambio en una publicación o página especÃfica sin aplicarlo a todo el tema.
Afortunadamente, WordPress te ofrece varias formas sencillas de agregar clases de CSS en diferentes áreas.
Agregue clases CSS personalizadas a un bloque dentro del editor de bloques
Si desea agregar rápidamente una clase CSS personalizada a una publicación o página especÃfica, la forma más sencilla de hacerlo es utilizar el editor de bloques.
Simplemente edite la publicación o página, luego seleccione el bloque donde desea agregar una clase CSS personalizada. En la configuración del bloque, haga clic en el panel avanzado y agregue el nombre de su clase CSS.
No olvide guardar los cambios haciendo clic en el botón Actualizar.
Ahora puedes usar esta clase para agregar código CSS personalizado que solo afectará a este bloque en particular en esta publicación o página en particular.
En los menús de navegación de WordPress
También puede agregar CSS personalizado a los elementos del menú de navegación de WordPress. Supongamos que desea convertir un elemento del menú en un botón, entonces este método le resultará útil.
solo ve a Apariencia » Menú página y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.
Desde aquÃ, debe marcar la casilla junto a la opción Clases CSS.
A continuación, debe desplazarse hacia abajo y hacer clic para expandir el elemento del menú donde desea agregar la clase CSS personalizada.
Notarás un campo llamado Clases CSS. Continúe y agregue su clase CSS personalizada aquÃ.
No olvide hacer clic en el botón Guardar menú para almacenar sus cambios.
Ahora puedes usar esta clase CSS personalizada para aplicar un estilo diferente a ese elemento del menú en particular.
Bonificación: diseñe fácilmente un tema de WordPress sin escribir código CSS
Aprender a diseñar tu tema de WordPress con CSS personalizado es una habilidad muy útil. Sin embargo, es posible que algunos usuarios simplemente quieran una solución para diseñar su propio tema de WordPress sin siquiera escribir código CSS.
Para esto necesitarás SemillaProd. Es la mejor herramienta de creación de páginas de WordPress del mercado que le permite crear fácilmente temas personalizados sin escribir ningún código.
SeedProd viene con temas listos para usar que puedes usar como punto de partida.
También puedes crear un tema desde cero creando plantillas manualmente.
Luego puede editar su tema personalizado utilizando una interfaz intuitiva de creación de sitios de arrastrar y soltar.
Simplemente inserte bloques en su diseño para crear sus diseños.
También puedes editar fácilmente cualquier elemento con solo apuntar y hacer clic. Puedes usar tus propios colores, fondo, fuentes y más.
Para obtener más detalles, consulte nuestro tutorial paso a paso sobre cómo crear fácilmente un tema personalizado de WordPress sin escribir ningún código.
Esperamos que este artÃculo te haya ayudado a encontrar la hoja de referencia CSS predeterminada generada por WordPress. Es posible que también desee consultar nuestra guÃa para corregir los errores más comunes de WordPress o ver nuestra comparación de expertos del mejor software de chat en vivo para pequeñas empresas.
