web-dev-qa-db-fra.com

Comment changer la barre de navigation wordpress UL en OL dans Twenty Twelve thème similaire

Je suis en train d'essayer de rendre un site Wordpress conforme à l'accessibilité, mais j'ai rencontré un problème avec la barre de menus. Il utilise une version modifiée basée sur Twenty_Twelve.

Je dois changer la balise "ul" en "ol", ce qui est nécessaire pour la rendre conforme. (J'ai essayé Modifier le code HTML de la barre de navigation de Wordpress comme solution suivante, mais je ne comprenais vraiment pas les solutions proposées pour le randonneur). Je vous remercie

Voici à quoi ressemble le fichier 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

Dans l'en-tête, modifiez le code wp_nav_menu pour inclure:

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

Code de menu complet 

<?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' (chaîne): Comment les éléments de la liste doivent être encapsulés. La valeur par défaut est un ul> avec un identifiant et une classe. Utilise le format printf () avec des espaces réservés numérotés.

Le items_wrap par défaut est <ul id="%1$s" class="%2$s">%3$s</ul> Vous pouvez passer l'argument items_wrap au wp_nav_menu comme ceci.

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

'conteneur' (chaîne) Indique s'il faut emballer le paquet, et avec quel contenu. Par défaut 'div'.

Si vous souhaitez envelopper la ul avec une autre balise que div, vous pouvez utiliser

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