[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>y archivos [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Todos extienden una Walker<\/code>clase general. Ampliaremos el Walker_Nav_Menu<\/code>que se usa para los men\u00fas en WordPress.<\/p>\nDebido a que extendemos otra clase, solo necesitamos agregar las funciones que deseamos anular. Si una funci\u00f3n no existe en nuestra clase, WordPress ejecutar\u00e1 la funci\u00f3n de la clase principal (la clase que extendemos) en su lugar.<\/p>\n
Preparaci\u00f3n<\/h2>\n
Puede agregar su clase de caminante en sus archivos de complemento, temas function.php<\/code>o cualquier archivo PHP incluido por functions.php<\/code>(para un c\u00f3digo m\u00e1s limpio). Comienza definiendo tu clase con un nombre de tu elecci\u00f3n (\u00a1aseg\u00farate de que el nombre de la clase sea \u00fanico, y esto incluye posibles nombres de clase en el n\u00facleo de WordPress!) extendiendo Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nPara decirle a WordPress que use nuestro andador, lo definimos en nuestras [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>llamadas. Esta funci\u00f3n es responsable de generar un men\u00fa y probablemente tenga al menos uno en su tema para el men\u00fa principal.<\/p>\nEn la matriz de argumentos wp_nav_menu()<\/code>, agregue un nuevo elemento con la clave ‘walker’ y cree una nueva instancia de su clase walker de la siguiente manera:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nSi actualiza su sitio, no deber\u00eda ver ning\u00fan cambio. Esto se debe a que nuestra clase no anula ninguna de las funciones de los padres y, por lo tanto, WordPress simplemente ejecuta las funciones normales del caminante del men\u00fa cuando genera el men\u00fa, tal como antes le dijimos que usara nuestro caminante.<\/p>\n
Descripci\u00f3n general de las funciones que podemos anular enWalker_Nav_Menu<\/code><\/h2>\nLas siguientes son funciones que puede agregar a su clase de caminante personalizada para anular las funciones de la clase de crianza Walker_Nav_Menu<\/code>:<\/p>\nLas primeras cuatro son funciones que son simplemente responsables de la salida, y todas requieren que agregue una cadena: la primera variable de par\u00e1metro. Es importante saber que no haces echo<\/code>nada aqu\u00ed, se supone que todo debe construirse como una cadena.<\/p>\ninicio_lvl<\/h3>\n
La funci\u00f3n start_lvl<\/code>es responsable de generar el HTML para el inicio de un nuevo nivel. En resumen, deber\u00eda dar salida al archivo de inicio <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nEl primer par\u00e1metro, $output<\/code>pasado por referencia, es la cadena a la que agregar\u00e1 su salida. $depth<\/code>es un n\u00famero entero que indica en qu\u00e9 nivel se encuentra; 0 para el nivel superior, 1 para el hijo directo del nivel superior, y as\u00ed sucesivamente. $args<\/code>es un objeto de todos los argumentos proporcionados en wp_nav_menu()<\/code>.<\/p>\nfin_lvl<\/h3>\n
La end_lvl<\/code>funci\u00f3n es responsable de generar el HTML para el final de un nivel. Esto suele ser s\u00f3lo el cierre <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nLos par\u00e1metros son exactamente los mismos que los start_lvl<\/code>anteriores.<\/p>\nstart_el<\/h3>\n
Esta funci\u00f3n es responsable de generar el HTML de cada elemento. En resumen, deber\u00eda generar el inicio <li><\/code>y la <a><\/code>etiqueta con el t\u00edtulo del enlace dentro.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nEl primer argumento, $output<\/code>, es como de costumbre la cadena a la que agregar\u00e1 la salida. El segundo argumento, $item<\/code>, es el objeto del elemento del men\u00fa, y aqu\u00ed es donde obtendr\u00e1 la mayor\u00eda de los datos para generar el elemento del men\u00fa. Si el enlace del men\u00fa es un elemento del men\u00fa de publicaci\u00f3n, obtendr\u00e1 el objeto de publicaci\u00f3n aqu\u00ed. Independientemente del tipo de men\u00fa, tambi\u00e9n obtendr\u00e1 algunos elementos \u00fatiles adicionales; como classes<\/code>, url<\/code>, title<\/code>y description<\/code>.<\/p>\nEl tercer argumento, $depth<\/code>, es un n\u00famero entero que le dice en qu\u00e9 nivel estamos. El nivel 0 es el nivel superior, el 1 es hijo directo del nivel superior, y as\u00ed sucesivamente. El cuarto argumento, $args<\/code>, es un objeto de todos los argumentos proporcionados a wp_nav_menu()<\/code>. El quinto par\u00e1metro, $id<\/code>, es el ID del elemento de men\u00fa actual.<\/p>\nend_el<\/h3>\n
La end_el<\/code>funci\u00f3n es responsable de dar salida al cierre de un elemento. Por lo general, solo generar\u00eda la <\/li><\/code>etiqueta.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nLos argumentos para end_el<\/code>son los mismos que start_el<\/code>los anteriores, excepto que la funci\u00f3n no tiene el quinto par\u00e1metro, $id<\/code>.<\/p>\nmostrar_elemento<\/h3>\n
La funci\u00f3n display_element<\/code>es una funci\u00f3n heredada de la Walker<\/code>clase general y es la funci\u00f3n responsable de atravesar. Esta es la funci\u00f3n que llama a todas las funciones anteriores a su vez.<\/p>\nIncluyo esto aqu\u00ed porque en algunos casos, por ejemplo, si desea evitar atravesar una rama completa, usar\u00eda esta funci\u00f3n para eso.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nEl primer argumento, $element<\/code>, es el objeto del elemento de men\u00fa: esto es lo que se transmite como $item<\/code>en las funciones anteriores. El segundo argumento, $children_elements<\/code>pasado por referencia, contiene todos los elementos secundarios que atravesar\u00e1 esta funci\u00f3n. $max_depth<\/code>, el tercer argumento, es un n\u00famero entero que indica qu\u00e9 tan profundo debemos atravesar, y el cuarto argumento $depth<\/code>, es la profundidad a la que nos encontramos actualmente. El quinto argumento, $args<\/code>, son los argumentos pasados \u200b\u200ba la funci\u00f3n que llam\u00f3 al caminante (para los men\u00fas ser\u00edan los argumentos proporcionados a wp_nav_menu()<\/code>), y el argumento final, $output<\/code>pasado por referencia, es la salida que se pasa como primer argumento en todos de las funciones anteriores.<\/p>\nModificar la salida de cada elemento<\/h2>\n
En la descripci\u00f3n general anterior, deber\u00eda ver que la funci\u00f3n start_el()<\/code>es la responsable de generar el HTML para un solo elemento de men\u00fa. Comencemos reemplazando esta funci\u00f3n en nuestra clase walker con un ejemplo simple.<\/p>\nEjemplo: evitar agregar enlaces para elementos ‘#’<\/h3>\n
Asegur\u00e9monos de que cualquier #<\/code>enlace ‘ ‘ obtenga un <span><\/code>elemento en lugar de una etiqueta de enlace, para evitar actualizar la p\u00e1gina.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nComenzaremos el elemento agregando una <li><\/code>etiqueta a $output<\/code>. Queremos asegurarnos de que las clases predeterminadas de WordPress (por ejemplo, ‘menu-item’, ‘menu-item-has-child’, etc.), as\u00ed como las clases ingresadas manualmente en el editor de men\u00fa, se agreguen a nuestro elemento de lista. Pegamos las clases proporcionadas como una matriz $item->classes<\/code>usando la funci\u00f3n PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>separando cada elemento con un espacio.<\/p>\nEn las l\u00edneas #5-9 y #13-17 manejamos la salida condicional del elemento envolvente. Enviamos una <a><\/code>etiqueta, a menos que la URL del elemento sea ‘ #<\/code>‘, en cuyo caso proporcionamos una <span><\/code>etiqueta en su lugar. En la l\u00ednea #11 simplemente mostramos el texto del enlace, que reside en $item->title<\/code>.<\/p>\n\u00a1Esto es todo lo que necesitamos para asegurarnos de que #<\/code>no se pueda hacer clic en todos los elementos del men\u00fa que tienen ‘ ‘ como URL!<\/p>\nSi est\u00e1 haciendo esto en un tema con estilo, tenga en cuenta que podr\u00eda perder algo de estilo si el tema ha aplicado estilo a la <a><\/code>etiqueta directamente. Puede resolver esto cambiando el estilo y posiblemente agregando una clase al elemento span.<\/p>\nEjemplo: visualizaci\u00f3n de descripciones de elementos de men\u00fa<\/h3>\n
Como ejemplo, otra cosa que puede hacer aqu\u00ed es mostrar la descripci\u00f3n del men\u00fa. Esto existe, pero no est\u00e1 activado por defecto. En el editor de men\u00fa de WordPress, debe hacer clic en "Opciones de pantalla" en la parte superior derecha y marcar para mostrar "Descripci\u00f3n":<\/p>\n
![\"Aprenda](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nEsto permite al usuario ingresar una descripci\u00f3n para cada elemento. Puede generar esta descripci\u00f3n en su clase de caminante. Supongamos que solo desea mostrar la descripci\u00f3n de los elementos de nivel superior, ya que esto es parte del dise\u00f1o de su tema. Simplemente puede verificar si $item<\/code>tiene una descripci\u00f3n y si $depth<\/code>es 0, as\u00ed:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nEjemplo: Adici\u00f3n de s\u00edmbolos de intercalaci\u00f3n desplegables<\/h3>\n
Un ejemplo m\u00e1s com\u00fan y \u00fatil es agregar un "signo de intercalaci\u00f3n", un \u00edcono que indica que este elemento del men\u00fa tiene un men\u00fa desplegable (tiene elementos secundarios).<\/p>\n