Cómo agregar una clase CSS personalizada a los menús de WordPress










  • ¿Ha descubierto que con el tiempo le gusta agregar CSS personalizado a su sitio web de WordPress ? ¿Ha descubierto que agregar clases CSS personalizadas también se ha vuelto más fácil con el tiempo? CSS se puede utilizar para manipular todo tipo de funciones en todo un sitio web de WordPress . Hoy les mostraré cómo agregar una clase CSS personalizada a los menús de WordPress.

    Este tutorial es perfecto para aquellos de ustedes que han estado tratando de descubrir cómo agregar clases a sus menús, pero no están muy seguros de dónde o cómo hacerlo. Hay algunas clases de CSS diferentes que podría agregar a un menú de WordPress, pero concentrémonos en agregar clases personalizadas de CSS "primeras" y "últimas" a un menú de WordPress.

    Además de esta técnica, también hay otras formas de agregar estilos personalizados a WordPress .

    ¿Qué es una clase CSS personalizada?

    CSS, o "hojas de estilo en cascada", es una forma de aplicar reglas de estilo al contenido HTML . Cuando aplica reglas personalizadas, le da a su sitio web la capacidad de hacer diferentes cosas fuera de la configuración predeterminada que se ofrece.

    Puede agregar CSS personalizado a casi cualquier parte de un sitio, siempre que sepa cómo acceder a la hoja de estilo.

    Agregue .First y .Last Clase CSS personalizada a los menús

    A veces, mientras trabaja en un sitio web, se encuentra con un requisito de diseño que debe realizar de manera un poco diferente de lo normal.

    Supongamos que está trabajando en un sitio web para un cliente y necesita agregar una clase de CSS personalizada de WordPress de una manera diferente a la que normalmente lo haría porque va a manejar ese sitio web cuando termine y ya no tendrá acceso.

    Puede acceder fácilmente al área de administración de WordPress y agregar una clase de CSS personalizada al primer y último elemento del menú, pero dado que es muy probable que el cliente reorganice el menú de WordPress con el tiempo, esta probablemente no sea la mejor opción.

    Dicho esto, en este artículo te mostraré cómo agregar estas clases combinando filtros con la clase .first y .last de CSS.

    Puede completar esta tarea de un par de maneras diferentes, así que veamos ambas.

    Acceso al archivo Functions.php

    Su primera opción es abrir el archivo functions.php ubicado en el backend del sitio web de WordPress. No debe confundirse con el archivo de configuración de WordPress . Para acceder al archivo, simplemente haga clic en Apariencia > Editor.

    Haga clic en apariencia y luego en editor para acceder al archivo functions.php

    Una vez que esté en la sección de archivos del sitio web de WordPress, haga clic en el archivo Funciones del tema (functions.php) para abrirlo.

    Haga clic en el archivo de funciones de tema (functions.php) para editar y agregar código

    Con el archivo functions.php ahora abierto, simplemente agregue el siguiente código en el archivo [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    function wpb_first_and_last_menu_class($elementos) {

    $elementos[1]->clases[] = 'primero';

    $elementos[cuenta($elementos)]->clases[] = 'último';

    devolver $ artículos;

    }

    add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

    [/ht_mensaje]

    Usar selectores de CSS

    Otra opción para diseñar los menús y agregar clases de CSS de WordPress es usar selectores de CSS. Estos selectores funcionarán en la mayoría de los navegadores modernos (si no en todos). Agregue estos selectores si desea realizar la función de esta manera:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    ul#yourmenuid > li:primer hijo { }

    ul#yourmenuid > li:último hijo { }

    [/ht_mensaje]

    Simplemente reemplace "yourmenuid" con la identificación del menú real y ya está todo listo.

    Tenga en cuenta que si está utilizando Internet Explorer (especialmente una versión anterior), probablemente desee utilizar la primera opción, ya que la opción de selección de CSS probablemente no funcionará correctamente.

    Espero que este artículo le haya mostrado una manera de agregar fácilmente clases CSS personalizadas de WordPress a los menús.

    Debajo de esto, también encontrará una lista de clases CSS predeterminadas generadas por WordPress. Esta lista debería ser útil cuando esté diseñando su menú de WordPress , y también cuando esté diseñando o trabajando con clases de CSS de WordPress en general.

    Estilos de clase de cuerpo CSS predeterminados de WordPress

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    .rtl{}

    .casa {}

    .Blog {}

    .archivo {}

    .fecha {}

    .búsqueda {}

    .paginado {}

    .adjunto archivo {}

    .error 404 {}

    .postid único-(id) {}

    .adjuntoid-(id) {}

    .attachment-(tipo-mime) {}

    .autor {}

    .autor-(usuario_nicename) {}

    .categoría {}

    .categoría-(slug) {}

    .etiqueta {}

    .tag-(babosa) {}

    .página-padre {}

    .page-child parent-pageid-(id) {}

    .page-template page-template-(nombre de archivo de plantilla) {}

    .Resultados de la búsqueda {}

    .buscar-sin-resultados {}

    .conectado {}

    .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) {}

    .fecha-paginado-(número de página) {}

    .autor-paginado-(número de página) {}

    .search-paged-(número de página) {}

    [/ht_mensaje]

    Estilos de publicación CSS predeterminados de WordPress

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    .ID del mensaje {}

    .correo {}

    .página {}

    .adjunto archivo {}

    .pegajoso {}

    .entry {}

    .category-misc {}

    .categoría-ejemplo {}

    .tag-noticias {}

    .tag-wordpress {}

    .marca de etiqueta {}

    [/ht_mensaje]

    Formatos de publicación de WordPress CSS predeterminados

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    .formato-imagen {}

    .format-gallery {}

    .formato-chat {}

    .formato-enlace {}

    .formato-cita {}

    .formato-estado {}

    .formato-video {}

    [/ht_mensaje]

    Estilos de menú de WordPress CSS predeterminados

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    #header .main-menu{} // clase de contenedor

    #header .main-menu ul {} // clase de contenedor primera 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 {} // ancla de cada elemento de navegación desplegable

    .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 elemento personalizado que haya agregado

    .menu-item-home{} // Clase para el enlace de inicio

    [/ht_mensaje]

    Estilos predeterminados del editor CSS WordPress WYSIWYG

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    .entry-content img {}

    .alinear a la izquierda, img.alinear a la izquierda {}

    .alinear a la derecha, img.alinear a la derecha {}

    .aligncenter, img.aligncenter {}

    .alignnone, img.alignnone {}

    .wp-título {}

    .wp-caption img {}

    .wp-caption p.wp-caption-text {}

    .wp-smiley {}

    blockquote.izquierda {}

    blockquote.derecho {}

    .galería dl {}

    .galería dt {}

    .galería dd {}

    .gallery dl a {}

    .gallery dl img {}

    .gallery-caption {}

    .tamaño completo {}

    .talla larga {}

    .talla mediana {}

    .tamaño-miniatura {}

    [/ht_mensaje]

    Estilos de widget de WordPress CSS predeterminados

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    .widget {}

    #Formulario de búsqueda {}

    .widget_search {}

    .texto-lector-de-pantalla {}

    .widget_meta {}

    .widget_meta ul {}

    .widget_meta ul li {}

    .widget_meta ul li a {}

    .widget_enlaces {}

    .widget_links ul {}

    .widget_links ul li {}

    .widget_links ul li a {}

    .widget_archivo {}

    .widget_archive ul {}

    .widget_archive ul li {}

    .widget_archive ul li a {}

    .widget_archive seleccione {}

    opción .widget_archive {}

    .widget_pages {}

    .widget_pages ul {}

    .widget_pages ul li {}

    .widget_pages ul li a {}

    .widget_enlaces {}

    .widget_links li:después de {}

    .widget_links li:antes de {}

    .widget_tag_nube {}

    .widget_tag_cloud un {}

    .widget_tag_cloud a:después de {}

    .widget_tag_cloud a:antes de {}

    .widget_calendar {}

    #calendar_wrap {}

    #calendar_wrap el {}

    #calendario_envoltura td {}

    #wp-calendario tr td {}

    #wp-calendario subtítulo {}

    #wp-calendario un {}

    #wp-calendario #hoy {}

    #wp-calendario #prev {}

    #wp-calendario #siguiente {}

    #wp-calendar #siguiente a {}

    #wp-calendario #prev a {}

    .widget_categories {}

    .widget_categories ul {}

    .widget_categories ul li {}

    .widget_categories ul ul.niños {}

    .widget_categories un {}

    .widget_categories seleccionar{}

    .widget_categories seleccione#gato {}

    .widget_categories select.postform {}

    opción .widget_categories {}

    .widget_categories .level-0 {}

    .widget_categories .level-1 {}

    .widget_categories .level-2 {}

    .widget_categories .level-3 {}

    .Comentarios Recientes {}

    #Comentarios Recientes {}

    #comentariosrecientes li {}

    #comentariosrecientes en {}

    .widget_recent_comments {}

    .widget_recent_entries {}

    .widget_recent_entries ul {}

    .widget_recent_entries ul li {}

    .widget_recent_entries ul li a {}

    .widget de texto {}

    .widget_text {}

    .widget de texto p {}

    [/ht_mensaje]

    Estilos de formulario de WordPress CSS predeterminados

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

    /*Salida de comentario*/

    .lista de comentarios .respuesta {}

    .commentlist .responder a {}

    .lista de comentarios .alt {}

    .lista de comentarios .impar {}

    .lista de comentarios .incluso {}

    .lista de comentarios .hilo-alt {}

    .lista de comentarios .hilo impar {}

    .commentlist .thread-even {}

    .lista de comentarios li ul.niños .alt {}

    .lista de comentarios li ul.niños .odd {}

    .lista de comentarios li ul.niños .incluso {}

    .lista de comentarios .vcard {}

    .commentlist .vcard cite.fn {}

    .commentlist .vcard span.says {}

    .commentlist .vcard img.foto {}

    .commentlist .vcard img.avatar {}

    .commentlist .vcard cite.fn a.url {}

    .commentlist .comment-meta {}

    .commentlist .comment-meta a {}

    .lista de comentarios .metadatos de comentarios {}

    .lista de comentarios .metadatos de comentarios a {}

    .lista de comentarios .parent {}

    .lista de comentarios .comentario {}

    .lista de comentarios .niños {}

    .lista de comentarios .pingback {}

    .commentlist .bypostauthor {}

    .lista de comentarios .autor de comentarios {}

    .commentlist .comment-author-admin {}

    .lista de comentarios {}

    .lista de comentarios li {}

    .lista de comentarios li p {}

    .lista de comentarios li ul {}

    .lista de comentarios li ul.niños li {}

    .lista de comentarios li ul.niños li.alt {}

    .commentlist li ul.niños li.byuser {}

    .lista de comentarios li ul.niños li.comentario {}

    .lista de comentarios li ul.niños li.profundidad-{id} {}

    .commentlist li ul.niños li.bypostauthor {}

    .lista de comentarios li ul.niños li.comentario-autor-admin {}

    #cancelar-comentario-respuesta {}

    #cancelar-comentario-responder a {}

    /*Formulario de comentarios */

    #responder { }

    #título-de-respuesta { }

    #cancelar-comentario-responder-enlace { }

    #formulario de comentarios { }

    #autor { }

    #Email { }

    #url { }

    #comentario

    #entregar

    .notas-comentarios { }

    .requerido { }

    .comentario-formulario-autor { }

    .comment-form-email { }

    .url-formulario-comentario { }

    .comentario-formulario-comentario { }

    .form-permitido-etiquetas { }

    .formulario-enviar

    [/ht_mensaje]

    Pensamientos finales

    Agregar una clase CSS personalizada a los menús de WordPress no tiene por qué ser difícil. Todo es cuestión de saber a qué acceder y qué códigos de clase agregar a su hoja de estilo.

    Cambie los colores, estilos, texto, relleno, márgenes y casi cualquier otra cosa que desee en sus encabezados de WordPress agregando clases de CSS personalizadas.

    Espero que este tutorial haya sido fácil de seguir y le haya mostrado cuánto puede lograr cuando agrega una clase CSS personalizada a los menús de WordPress.

    ¿Alguna vez ha agregado clases CSS personalizadas a una hoja de estilo? ¿Te resultó difícil o las instrucciones fueron fáciles de seguir?










  • Subir