homefinance blog
Un menú personalizado en el sitio web de WISDMLABS
Una de las USPS de WordPress es que es una plataforma de publicación web de código abierto. Como cualquier programa de código abierto, es gratuito que cambie y personalice cómo cree que es apropiado. Y una de las muchas posibilidades al personalizar su sitio de WordPress es que puede cambiar la forma en que muestra los elementos del menú en el sitio. Eche un vistazo al mega menú en nuestro sitio y observe cómo se rediseñó el menú para que coincida con el aspecto del sitio. Dichas personalizaciones se pueden implementar utilizando la clase Walker. Una vez que crea un menú en el fondo de WordPress, significa> menús, wp_nav_menu () función en archivos de plantilla muestra esos menús. La salida básica de wp_nav_menu () es algo así como:
blog
sobre mí
contactos
Aunque es posible personalizar un wp_nav_mnu () pasando una matriz de argumentos, la personalización de esta manera se limita al mejor caso y no es lo que estamos buscando aquí. La clase Walker WordPress utiliza una clase especial, llamada Clase Walker, diseñada para ayudar a cruzar y mostrar elementos de estructura jerárquica. WordPress pasa por las páginas del menú para mostrar elementos con un objeto Walker.
La función de clase Walker_Nav_Menu se encuentra en WP-Includes/Nav-Meni-Template.php. Puede navegar a través de Walker_Nav_Menu desde el archivo PHP mencionado y puede ver cómo se construyen los enlaces y la estructura del menú. Aquí hay algunas funciones útiles en esta clase relevantes para nuestro tema de discusión. Start_lvl (): una función que devuelve el código HTML para el comienzo de un nuevo nivel. En el caso de las listas, este sería el comienzo de un nuevo sublista y sería responsable de devolver la etiqueta
.
End_lvl (): llame cuando terminemos un nivel. En el ejemplo del menú de navegación, esta función es responsable de la conclusión de las sub-listas con una etiqueta de cierre de la lista
Start_el (): la función responsable de mostrar el elemento actual en el que estamos. En el caso de los menús, esto involucraría la etiqueta
y el enlace del artículo.
End_el (): la función apelada después de un elemento y todos sus hijos se han mostrado. Para nuestro ejemplo de menú, esto significaría devolver una etiqueta de cierre
.
Pasemos a la parte sobre el conocimiento de la personalización de los menús de la manera que desee. Los pasos para lo mismo serían:
En el archivo Functions.php, cree una clase que expanda la clase Walker_Nav_Men.
Copie las funciones necesarias o todas en walker_nav_menu con su código fuente e inserte en su clase.
Cambie el código fuente de funciones según sus requisitos.
Recuerde enviar un objeto de clase personalizado a wp_nav_menu () al llamarlo.
Finalmente, deberá instalar wdm_custom_walker_nav_men y transmitirlo como argumento a wp_nav_men () a través de una matriz.
¿Confundido? Simplifiquemos las cosas con un ejemplo. Eche un vistazo a la imagen a continuación, es un menú de navegación que personalicé usando walker_nav_men. Como se explicó anteriormente, esto se puede lograr expandiendo la clase Walker_Nav_Menu. Aquí está el código para Walker_Nav_Menu que creé. <? Php
La clase wdm_custom_nav_walker extiende walker_nav_menu {
Función pública start_el (& $ output, $ item, $ profundidad = 0, $ args = matrix (), $ id = 0) {
$ indent = ($ profundidad)? str_repeat (“”, $ profundidad): ”;
$ classes = vacía ($ item -> classes)? Array (): (matriz) $ item -> classes;
/ * -Modificaciones wdm- */
// Obtener la identificación de publicar la página actual
$ wdm_postid = url_to_postid ($ artículo -> url);
// $ have_children var mantiene los registros de los niños en la página actual
$ has_children = false;
// La función wdm_has_children () es una función que escribí en Functions.php, que verifica a los niños de una publicación desde la identificación posterior.
If (wdm_has_children ($ wdm_postid)) {
$ au_copii = true;
}
// Si la página actual tiene un hijo, asigna mi propia clase CSS-WDM-HAS-Child.
If ($ have_children) {
$ class [] = ‘wdm-ha-child-element-menu-‘. $ Artículo -> ID;
} de lo contrario {
$ class [] = ‘Artículo-Menu-‘. $ Artículo -> ID;
}
/ * -Sit de los cambios wdm- */
$ class_names = Join (”, Apply_filters (‘Nav_men_css_class’, array_filter ($ classes), $ item, $ args, $ profundidad));
$ class_names = $ class_names? ‘class = “‘. Esc_attr ($ class_names). ‘”‘: ”;
$ id = Apply_filters (‘Nav_menu_item_id’, ‘Menu -Item-‘. $ item-> id, $ itm, $ args, $ profundidad); ”: ”;
$ salida. = $ sangr. ‘
$ Atts = matrix ();
$ atts [‘title’] =! Vacío ($ item -> attr_title)? $ Artículo -> attr_title: ”;
$ ATTS [‘Target’] =! vacía ($ item -> objetivo)? $ Artículo -> Target: ”;
$ Atts [‘rel’] =! ¿Vacío ($ Artículo -> XFN)? $ Artículo -> xfn: ”;
$ Page_name = Aplicte_filters (‘the_itle’, $ itm -> title, $ itm -> id);
$ ATTS = APLICE_FILTERS (‘NAV_MENU_LINK_ATTRIBUTES’, $ ATTS, $ ITM, $ args, $ profundidad);
$ attribute = ”;
foreach ($ atts como $ attr => $ valor) {
If (! Vacía ($ valor)) {
$ valor = (‘href’ === $ attr)? Esc_url ($ valor): esc_attr ($ valor);
$ atributo. = ”. $ ATR. ‘= “‘. $ valor. ‘”‘;
}
}
/ * -Modificaciones wdm- */
// iconos de arranque: flecha derecha y flecha hacia abajo.
$ wdm_right_arrow = ‘ ‘;
$ wdm_down_arrow = ‘ ‘;
/ * -Sit de los cambios wdm- */
$ Item_output = $ args -> adelante;
$ Item_output. = ‘‘;
/** Este filtro está documentado en WP-Includes/Post-Template.php*/
/ * -Modificaciones wdm- */
if ($ has_children && “home”! = $ page_name) {
// Si el título de la página es arquitectónico, asigne una flecha a la derecha.
if (‘arquitectural’ == $ name_pagina) {
$ Item_output. = $ Args -> link_before. APLICE_FILTERS (‘the_itle’, $ item -> title, $ itm -> id). $ wdm_right_arrow. $ args -> link_after;} de lo contrario {
$ Item_output. = $ Args -> link_before. APLICE_FILTERS (‘the_itle’, $ item -> title, $ itm -> id). $ wdm_down_arrow. $ args -> link_after;
}
} de lo contrario {
$ Item_output. = $ Args -> link_before. APLICE_FILTERS (‘the_itle’, $ item -> title, $ itm -> id). $ args -> link_after;
}
/ * -Sit de los cambios wdm- */
$ Item_output. = ‘‘;
$ Item_output. = $ Args -> después;
$ output. = Aplicar_filters (‘walker_nav_men_start_el’, $ item_output, $ item, $ profundidad, $ args);
}
Función pública End_EL (& $ Output, $ Artículo, $ profundidad = 0, $ args = matrix ()) {
$ EXIT. = ”
“;
}
}
Alternativamente, también puede pegar todo el contenido de la clase Walker_Nav_Menu en WP-Includes/Nav-Meni-Template.php y editarlo de acuerdo con sus requisitos.
Y eso es. WordPress utilizará nuestra clase personalizada para obtener su menú de navegación como desee. Siéntase libre de experimentar las características. Con el conocimiento correcto y las herramientas adecuadas, WordPress puede ser muy bueno para su propio terreno de publicación web personal. Preguntas y sugerencias? ¡La sección de comentarios a continuación es todo tuyo! Una excelente lectura posterior sería la creación de un menú de navegación simple y dinámico. Manténgase en la fase para obtener más consejos y trucos de WP.
