2012-01-18 11 views
1

誰かが手動で出力されたWordpressメニューの実例を持っていますか? one on the Codexは動作していないようですが、私のmenu_nameの "Footer"のスラッグはそれほど複雑ではありません。アクセシビリティのために、外部メニューリンク内にオフスクリーンスパンを追加する必要があります。私はすでにCSSクラスを持っています。私が必要とするのは、functions.phpファイルを介して追加された特定のマークアップです。Wordpressのナビゲーションメニュー - 条件付きスパンの追加

基本的なコード私が探している(/「外部」クラスwのリスト項目を参照のhrefがコード簡潔にするため#に変更され、彼らは現実の生活の中でオフサイトにリンクします。):

<ul id="menu-footer" class="menu"> 
    <li class="menu-item"> 
     <a href="#">About Us</a> 
    </li> 
    <li class="external menu-item"> 
     <a title="Link opens in a new window." target="_blank" href="#">Terms &amp; Conditions <span class="offscreen">Opens in a new window</span></a> 
    </li> 
    <li class="menu-item"> 
     <a href="#">Comments Policy</a> 
    </li> 
    <li class="external menu-item"> 
     <a title="Link opens in a new window." target="_blank" href="#">Privacy Statement<span class="offscreen">Opens in a new window</span></a> 
    </li> 
    <li class="menu-item"> 
     <a href="#">Contact Us</a> 
    </li> 
</ul> 
+0

"...条件付きスパンを追加する" - どのリストアイテムに "外部"クラスが必要かをどのように決定しますか? –

+0

このクラスは、メニューインターフェースから追​​加されます。表示されていない場合は、「画面オプション」をクリックしてください。私はいくつかの場所でこれを使用して外部リンクアイコンも追加します –

答えて

0

回答:ナビゲーションメニューが動作するコーデックス例えばテーマに割り当てられ&を登録する必要があります。 DUH! functions.phpで

:バック機能で

assign a menu to your theme

// default register any navigation menus 
register_nav_menus(
    array(
     'footer' => 'Footer Menu', 
     'links' => 'Links Menu' 
    ) 
); 

テーマに割り当てメニュー(複数可)。PHP:

function accessibleAnchors($menu_name, $link_after = NULL){ 
    if (($locations = get_nav_menu_locations()) && isset($locations[ $menu_name ])) { 
     $menu = wp_get_nav_menu_object($locations[ $menu_name ]); 

     $menu_items = wp_get_nav_menu_items($menu->term_id); 

     $menu_list = '<ul id="menu-' . $menu_name . '" class="menu">'; 

     foreach ((array) $menu_items as $key => $menu_item) { 
      // uncomment next line to see all array values 
      // print_r($menu_item); 
      $linkText = $menu_item->title; 
      $url = $menu_item->url; 
      $target = $menu_item->target; 
      $titleAttr = $menu_item->attr_title; 
      // hard-coding the first & only CSS class here, you could loop through others 
      $cssClass = $menu_item->classes[0]; 

      if($target == '_blank'): 
       $titleAttr = " title=\"$titleAttr\""; 
       $span = "<span class=\"offscreen\"> Opens in a new window</span>"; 
      else: 
       $span = ""; 
      endif; 

      $menu_list .= '<li class="menu-item '.$cssClass.'"><a href="' . $url . '"'.$titleAttr. '>' . $linkText . $span . $link_after .'</a></li>'; 
     } 
     $menu_list .= '</ul>'; 
    } 
    return $menu_list; 
} 

今すぐあなたのテンプレートで関数を呼び出す:

<?php echo accessibleAnchors('footer'); ?> 

ブーム。

-1

あなたが持っているでしょうwp-includes/nav-menu-template.phpを起動して、テーマのfunctions.phpに関数をコピー&ペーストし、名前を変更するか、functions.phpのフィルタを使用してフックの選択したマークアップを変更します。おそらくwp-includes/nav-menu.phpも見てみましょう。

申し訳ありませんが詳細を提供できません。

+2

Wordpressのコアコードを変更するよう誰かに教えてください。これにより、更新時に多くの問題が発生します。そのような変更はテーマに加える必要があります。後者は、functions.phpと適切なフックを使用することで可能です。メニューの変更の例については、2011テーマを参照してください。 – feeela

+0

あなたは可能なものに対して私にプラスを与えて、純利益をゼロにするべきです! :) –

0

オプション1:あなたは外観使ってメニューを作成したと仮定すると、

- >メニューを、あなたは次のことを試すことができます。外観に

  1. 移動 - >メニュー
  2. 「CSSクラス」が選択されていることを確認画面の「画面のオプションを」(右上)、をクリックします。

上記の手順を完了すると、各メニュー項目に、CSSクラスを割り当てる場所(画面のグラブを見てください)を示す「CSS Classses」テキストボックスが表示されるようになりました。

オプション2:上記の2つのオプションは、使用しての第三のオプションを持って動作しません提供

またhttp://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

<?php 
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 
function special_nav_class($classes, $item){ 
    if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title 
      $classes[] = "special-class"; 
    } 
    return $classes; 
} 
?> 

オプション3を試みることができますjQuery。

HTH

enter image description here

+0

私はすでにCSSクラスを持っています。私が必要とするのは、アンカーリンク内の条件付きマークアップです。私はJSでこれをやるのではなく、それ以外の場合は私の質問を投稿していないだろう –

関連する問題