Agregar atributo de datos personalizado al menú de navegación de WordPress

He visto algunas preguntas similares aquí en stackoverflow, pero la mía es un poco diferente.

Necesito poder agregar atributos de datos personalizados al menú de wordpress. El problema que tengo es que todas las soluciones que encontré, como las siguientes, por ejemplo:

add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attribs', 10, 3 );
function my_nav_menu_attribs( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 365;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-reveal-id'] = 'myModal';
  }
  return $atts;
}

le permite agregar el mismo atributo a todos los elementos del menú. Lo que necesito es en realidad una forma de agregar el mismo atributo de datos, pero con diferentes valores en cada elemento de la lista.

esto es más o menos lo que necesito lograr:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

porque necesito usar este complemento aquí: https://github.com/alvarotrigo/fullPage.js#fullpagejs

¿algún consejo?

Gracias

Supongo que la solución sería ampliar los elementos de navegación. Hice esto antes para agregar íconos a los elementos del menú.

Eche un vistazo aquí: en lugar de un subtítulo, no puede nombrar el campo “objetivo de anclaje” (o cualquier otra cosa) y llamarlo en su menú…
http://www.wpexplorer.com/agregando-atributos-personalizados-a-los-menús-de-wordpress/

Si necesita más sugerencias, debe buscar en Google “wordpress + menú + campo personalizado”.

Espero que esto te ayude. Mis mejores deseos

Al final, logré resolver esto usando javascript.

Esto es lo que hice:

(function() {
  var arrayList, key, val;

  arrayList = ['first', 'second', 'third', 'fourth'];

  for (key in arrayList) {if (window.CP.shouldStopExecution(1)){break;}
    val = arrayList[key];
    console.log("key is " + key + " and val is " + val);
    $('li').each(function(index) {
      if (parseInt(index) === parseInt(key)) {
        return $(this).attr('data-anchor', val);
      }
    });
  }
window.CP.exitedLoop(1);


}).call(this);

• Crea una matriz con los datos que necesitas
• Bucle Foreach para iterar a través de la matriz
• Dentro de ese ciclo, recorre los elementos del menú
• Si el índice del menú es el mismo que el índice de la matriz, agregue el valor de la matriz como un atributo.

Aquí hay un ejemplo de codepen también: http://codepen.io/NickHG/pen/GmKqqE

Ok, muy mal, lo siento. Publicaría el código que he escrito para mis íconos, pero el código es como 400 líneas con el andador y esas cosas. Pero como parece que estás usando base, deberías dirigirte aquí -> https://www.smashingmagazine.com/2015/10/customize-tree-like-data-structures-wordpress-walker-class/

Incluso si no sabe acerca de php o wordpress hooks, este tutorial explicará absolutamente todos los pasos necesarios para codificarlo a mano. Funciona, lo acabo de probar con mi sitio copiándolo/pegándolo.

Si se desplaza hacia abajo, verá capturas de pantalla: agregaron un campo de ícono (casi como lo hice yo) cómo lo hicieron y cómo lo usan. Después de ver este truco, sinceramente, me arrepiento de haberlo hecho yo solo. Fue doloroso, este truco funciona a las mil maravillas….