ワードプレスのナビゲーションメニューを複製する

Question

私は最初のステップでコードを学習しています。私はhtml、php、css、javascript、MySqlのいくつかのコースを作った。今私はWordpressの子供のテーマを構築しながら、練習から学び続けることに決めました。

私は同じdivに2つの異なるフォントファミリをオーバーレイする方法を学ぼうとしています。今、私の大きな問題は、私はということです

.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> 

：私はそれは例えばcontent: attr(data-title);

使用してCSSで行うことが可能なものだということを発見

：私はこのような何かを意味しますWordpressとphpを使って作業するのは少し複雑です。私がしたいのは、各メニュー項目に2つの異なるフォントを持たせることです。たとえば、次のように

これは私のメニューのコードを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; 
} 

私はこれを作ってみましたが、それはdoesnの私が期待しているとおりに働く。その後、CSS

<?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; ?> 

：：それは動作しません

.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; 
} 

多分、構文に問題があるようです。コンソールのエラーだけを表示します。いくつかお勧めしますか？

メニュー項目のフォントを複製してオーバーレイするのが最も簡単な方法がありますか？

その他の問題は、私のメニューがアコーディオンメニューだということです。だから私がコピーしたメニューの1つのセクションを開くと、他のメニューも自動的に開くはずです。

Answer 1

OMG、これは間違っています。

タイトルのみをデータ属性にコピーする必要があります。 SO例えば：

$('.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>