web-dev-qa-db-ja.com

WordpressのナビゲーションバーULをに変更する方法 OL 類似のテーマで

私はワードプレスのWebサイトのアクセシビリティを準拠させようとしていますが、メニューバーに問題があります。それはTwenty_Twelveに基づいて修正されたそれらを使用します。

私はそれを準拠させるために必要とされる "ol"に "ul"タグを変更する必要があります。 （私は Wordpressのナビゲーションバーの編集HTML 解決策を試してみましたが、私は本当にその中のウォーカー解決策を理解できませんでした）。ありがとうございました

これはheader.phpファイルの外観です。

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).Push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57162369-1', 'auto');
  ga('send', 'pageview');

</script>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>



<script>
     // DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Menu"
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });
    </script>


</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <div id="masthead" class="site-header" >
        <div class="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
            </a>
        </div>

        <div class="nav-right">
            <div class="header-call"><a href="/contact-us/">Call us today on <span>02 6247 3611</span></a></div>
            <nav id="site-navigation" class="main-navigation" >

                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->
            <nav id="site-navigation2" class="main-navigation2" role="navigation">

                <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->

        </div>      

    </div><!-- #masthead -->

    <div id="main" class="wrapper">
menusaccessibility
1
rajiaguna

ヘッダー内で、wp_nav_menuコードを変更して以下を含めます。

'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>',

フルメニューコード

<?php wp_nav_menu( 
  array( 
    'theme_location' => 'primary', 
    'menu_class' => 'nav-menu', 
    'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>' 
  ) 
); ?>
1
Greg McMullen

'items_wrap'（文字列）：リストアイテムをどのように折り返すべきか。デフォルトは、idとクラスを持つul>です。番号付きのプレースホルダーとともにprintf（）形式を使用します。

デフォルトのitems_wrapは<ul id="%1$s" class="%2$s">%3$s</ul>です。items_wrap引数は wp_nav_menu に渡すことができます。

wp_nav_menu( 
   array( 'theme_location' => 'primary', 
          'menu_class' => 'nav-menu',
          'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>'
   ) 
);

'container'（文字列）ulをラップするかどうか、そして何をラップするか。デフォルトの 'div'.

ulをdiv以外のタグでラップしたい場合は、

wp_nav_menu( 
       array( 'theme_location' => 'primary', 
              'menu_class' => 'nav-menu',
              'container' => 'section' // default is div
       ) 
    );
1
bravokeyl