Добавить атрибут Data-Page в меню Wordpress

Question

Что я хочу сделать, это когда я нажимаю на элемент меню, веб-сайт должен прокрутить вниз до того раздела, который я передаю в атрибуте Data-page этого элемента меню. Пример приведен ниже.

$("a").click(function(){
  var pageId = $(this).attr("data-page");
  $("html, body").animate({ scrollTop: $("#"+pageId).offset().top }, 1000);
});

div.page {
  min-height:1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="navbar">
  <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
       <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">company name</a>
    </div>
    <ul class="nav navbar-nav navbar-right ">
      <li><a href="#" style="color:blue;" data-page="about">About</a></li>
      <li><a href="#" style="color:blue;" data-page="portfolio">Portfolio</a></li>
      <li><a class="portfolio-scroll" href="#" style="color:blue;" id="contact-nav" data-page="contact">Contact</a></li>
    </ul>
</div>
    
    <div class="page" id="about"><h1>About</h1></div>
    <div class="page" id="portfolio"><h1>Portfolio</h1></div>
    <div class="page" id="contact"><h1>Contact</h1></div>
</nav>

Но в WordPress мне трудно добавить атрибут data-page в список меню WordPress.- Интеграция меню WordPress

<?php
 function theme_setup()
 {

     //featured image add
     add_theme_support('post-thumbnails');

     //register navigation menus
     register_nav_menus(
       array(
           'primary' => __('Primary Menu'),
           'overlay' => __('Overlay Menu')
       ));
 }
 add_action('after_setup_theme','theme_setup');

- Меню навигации

<div class="navigation">
        <?php
    // Check if there's a menu assigned to the 'primary' location.

        if ( ! has_nav_menu( 'primary' ) ) {
            return;
        }
        ?>
        <?php wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'start_depth' => 1,
                'fallback_cb'     => ''
            )
        );
        ?>
    </div>

Это структура меню:

Может кто угодноПомоги мне, пожалуйста.Я искал в сети и нашел кое-что о классе Уокера.Но я не могу этого понять.