Дублирование меню навигации Wordpress

Question

Я делаю первые шаги, изучая код. Я сделал несколько курсов html, php, css, javascript и MySql. Теперь я решил продолжить обучение на практике, пока я создаю тему для Wordpress.

Дело в том, что я пытаюсь узнать, как наложить два разных семейства шрифтов в один и тот же div. Я имею в виду что-то вроде этого:

я обнаружил, что это то, что можно сделать с помощью CSS, используя content: attr(data-title);

Например:

.button { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: transparent; 
    display: inline-block; 
    height: 42px; 
    padding: 0 1.5em; 
    position: relative; 
    border: none; 
    outline: 0; 
    text-align: center; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 40px; 
    line-height: 44px; 
    color: #000000; 
    font-weight: 800; 
    letter-spacing: 1.5px; 
    text-transform: uppercase; 
} 
.button:after { 
    content: attr(data-title); 
    z-index: 1; 
    font-size: 30px; 
    color: #f00; 
    font-weight: 100; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet"> 
<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a> 

Теперь моя большая проблема в том, что я работа с Wordpress и php немного сложнее. Мне бы хотелось сделать два разных шрифта для каждого пункта меню. Например:

Это код PHP моего меню:

<?php if (has_nav_menu('primary')) : ?> 
     <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e('Primary Menu', 'twentysixteen'); ?>"> 

      <?php 
       wp_nav_menu(array(
        'theme_location' => 'primary', 
        'menu_class'  => 'primary-menu', 
       )); 
      ?> 
     </nav> 
<?php endif; ?> 

И это CSS:

.main-navigation { 
    font-family: pcablack; 
    font-size: 30px; 
    word-spacing: -5px; 
    /*position: relative;*/ 
    position: absolute; 
    z-index: 1000; 
    padding-bottom: 20px; 
    margin-top: 48px; 
    margin-left: 40px; 
} 

Я попытался сделать это, но это Безразлично» как я ожидаю. Кажется, что может быть, есть проблема синтаксиса:

<?php if (has_nav_menu('primary')) : ?> 
     <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e('Primary Menu', 'twentysixteen'); ?>" 

     data-title= ' 

      <?php 
       wp_nav_menu(array(
        'theme_location' => 'primary', 
        'menu_class'  => 'primary-menu', 
      )); 
      ?>' 
     > 

      <?php 
       wp_nav_menu(array(
        'theme_location' => 'primary', 
        'menu_class'  => 'primary-menu', 
       )); 
      ?> 
     </nav> 
<?php endif; ?> 

тогда CSS:

.main-navigation { 
    font-family: pcablack; 
    font-size: 30px; 
    word-spacing: -5px; 
    /*position: relative;*/ 
    position: absolute; 
    z-index: 1000; 
    padding-bottom: 20px; 
    margin-top: 48px; 
    margin-left: 40px; 
} 

.main-navigation:after { 
    content: attr(data-title); 
    font-family: pcabold; 
    color: green; 
    font-size: 30px; 
    word-spacing: -5px; 
    /*position: relative;*/ 
    position: absolute; 
    z-index: 1100; 
    padding-bottom: 20px; 
    margin-top: 48px; 
    margin-left: 40px; 
} 

Это не работает. Это показывает только консольные ошибки. Есть ли у вас рекомендации?

Возможно, есть самый простой способ дублировать шрифт элемента меню и наложить его?

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

Answer 1

OMG, вы делаете это неправильно.

Вам нужно копировать только пункты меню в атрибуты данных. Так, например:

$('.main-menu ul a').each(function() { 
 
    var text = $(this).html(); 
 
    $(this).attr('data-title', text); 
 
});

.main-menu li a { 
 
    position:relative; 
 
    font-family: "Arial Black"; 
 
    font-size: 15px; 
 
} 
 

 
.main-menu li a:after { 
 
    content: attr(data-title); 
 
    position:absolute; 
 
    font-family: "Arial Black"; 
 
    display:block; 
 
    font-size: 14px; 
 
    z-index:1; 
 
    left:0; 
 
    top:0; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="main-menu"> 
 
\t <ul class="menu"> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">About</a></li> 
 
\t \t <li><a href="#">Why</a></li> 
 
\t \t <li><a href="#">Contacts</a></li> 
 
\t </ul> 
 
</nav>