Con este cambio, ya no es necesario obligar a los usuarios de temas o complementos a recordar y escribir los nombres de las clases para activar la "configuraci\u00f3n" de los elementos del men\u00fa. Hasta ahora, este ha sido un proceso com\u00fan para cosas como hacer que un elemento del men\u00fa parezca un bot\u00f3n o cambiar entre diferentes dise\u00f1os de men\u00fas desplegables. A menudo en combinaci\u00f3n con un caminante de men\u00fas personalizado.<\/p>\n
Tenga en cuenta que para que este c\u00f3digo funcione se requiere la versi\u00f3n m\u00ednima de WordPress 5.4.0.<\/p>\n
Lo que haremos en este tutorial<\/h2>\n
Con el nuevo enlace a los elementos del men\u00fa y el soporte de WordPress para agregar metadatos a los elementos del men\u00fa, realmente no hay l\u00edmite en cuanto a qu\u00e9 tipo de configuraci\u00f3n desea. El proceso depende de cu\u00e1l sea el resultado final. En la mayor\u00eda de los casos, basta con agregar una clase CSS personalizada al elemento del men\u00fa.<\/p>\n
Para mantenerlo simple, en esta publicaci\u00f3n agregaremos una casilla de verificaci\u00f3n etiquetada como "Mostrar como bot\u00f3n". En nuestro tema tenemos CSS que dise\u00f1ar\u00e1 un elemento de men\u00fa para que parezca un bot\u00f3n (llamada a la acci\u00f3n) si el elemento tiene una clase determinada. En lugar de obligar al usuario del tema a escribir la clase de CSS "men\u00fa-elemento-bot\u00f3n" en el campo de clase de CSS del elemento de men\u00fa en el administrador, les ofrecemos una casilla de verificaci\u00f3n f\u00e1cil de usar.<\/p>\n
Al final de esta publicaci\u00f3n, encontrar\u00e1 algunas ideas para otras acciones y filtros que puede usar si desea hacer algo m\u00e1s que agregar una clase CSS.<\/p>\n
\u00a1Empecemos!<\/p>\n
Agregar campos personalizados a los elementos del men\u00fa<\/h2>\n
El nuevo gancho agregado recientemente es El gancho viene con no menos de cinco par\u00e1metros. En este post haremos cosas que solo requieren las dos primeras.<\/p>\n Todas las entradas agregadas en este enlace deben tener un Comencemos con un ejemplo de agregar una casilla de verificaci\u00f3n para hacer que el elemento del men\u00fa se vea como un bot\u00f3n cuando el men\u00fa se coloca como el men\u00fa principal. Nos conectaremos En la l\u00ednea Entonces es cuesti\u00f3n de hacer eco de un buen HTML. El c\u00f3digo anterior usa algunas de las clases que ya se usan para los elementos del men\u00fa para que se vea bien sin agregar un estilo personalizado (una Las partes importantes suceden en l\u00ednea [wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. Es un gancho que se dispara justo encima de los botones de movimiento de un elemento del men\u00fa;<\/p>\n![\"Agregue](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\")
<\/a><\/p>\n\n
item_id<\/code>: El ID del elemento de men\u00fa actual<\/li>\nitem<\/code>: objeto de datos del elemento de men\u00fa<\/li>\ndepth<\/code>: La profundidad del elemento de men\u00fa dentro del men\u00fa, representada como un n\u00famero entero<\/li>\nargs<\/code>: un objeto de argumentos de elementos de men\u00fa<\/li>\nnav_id<\/code>: El ID del men\u00fa de navegaci\u00f3n<\/li>\n<\/ul>\nname<\/code>atributo (ya que el editor de men\u00fa es un formulario). El atributo de nombre puede tener el nombre que desee, pero debe ser \u00fanico y debe agregar el ID del elemento de men\u00fa (primer par\u00e1metro) entre corchetes. Por ejemplo name=\"my-custom-field[<item ID>]<\/code>, \u00ab. As\u00ed es como lo hacen las otras configuraciones de elementos de men\u00fa est\u00e1ndar.<\/p>\nwp_nav_menu_item_custom_fields<\/code>solo con los dos primeros par\u00e1metros y haremos lo siguiente:<\/p>\nadd_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {\n $show_as_button = get_post_meta($item_id, '_show-as-button', true);\n ?>\n <p class=\"awp-show-as-button description description-wide\">\n <label for=\"awp-menu-item-button-<?php echo $item_id; ?>\" >\n <input type=\"checkbox\" \n id=\"awp-menu-item-button-<?php echo $item_id; ?>\" \n name=\"awp-menu-item-button[<?php echo $item_id; ?>]\" \n <?php checked($show_as_button, true); ?> \n \/><?php _e('Show as a button', 'awp'); ?>\n <\/label>\n <\/p>\n <?php\n}, 10, 2);<\/code><\/pre>\n#2<\/code>buscamos el valor actual de nuestro elemento de men\u00fa meta. Los elementos del men\u00fa usan post meta, por lo que usamos [get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>los que probablemente ya est\u00e9 familiarizado. Almacenamos los metadatos del elemento del men\u00fa con la tecla ‘ _show-as-button<\/code>‘.<\/p>\np<\/code>etiqueta con las clases " description description-wide<\/code>").<\/p>\n#8<\/code>y #9<\/code>. Seguimos la regla del atributo de nombre, agregando $item_id<\/code>entre par\u00e9ntesis, y nos aseguramos de que el valor guardado actual se refleje en la casilla de verificaci\u00f3n. Puede agregar cualquier tipo de entradas, e incluso m\u00faltiples entradas aqu\u00ed. Solo recuerde proporcionar el name<\/code>atributo apropiado y establecer su valor actual correctamente.<\/p>\n
![\"Agregue](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\")
<\/a><\/p>\n![\"Agregue](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\")
<\/a><\/p>\n