it-swarm.com.de

So ändern Sie die WordPress-Navigationsleiste UL auf OL in Twenty Twelve ähnliches Thema

Ich versuche, eine WordPress-Website barrierefrei zu gestalten, habe jedoch ein Problem mit der Menüleiste. Es verwendet eine modifizierte Version, die auf Twenty_Twelve basiert.

Ich muss das "ul" -Tag in "ol" ändern, damit es kompatibel ist. (Ich habe versucht HTML der Wordpress-Navigationsleiste zu bearbeiten , aber ich konnte die darin enthaltenen Walker-Lösungen wirklich nicht verstehen). Vielen Dank

So sieht die Datei header.php aus:

<?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">
1
rajiaguna

Ändern Sie in der Kopfzeile den Code wp_nav_menu so, dass er Folgendes enthält:

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

Vollständiger Menücode

<?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' (string): Wie die Listenelemente umgebrochen werden sollen. Standard ist ein ul> mit einer ID und einer Klasse. Verwendet das printf () -Format mit nummerierten Platzhaltern.

Die Standardeinstellung für items_wrap ist <ul id="%1$s" class="%2$s">%3$s</ul>. Sie können das Argument items_wrap an den wp_nav_menu wie folgt übergeben.

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

'container' (string) Gibt an, ob und womit die ul umhüllt werden soll. Standard 'div'.

Wenn Sie die ul mit einem anderen Tag als div umschließen möchten, können Sie dies verwenden

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