Как изменить панель навигации wordpress UL на OL в теме Twenty Twelve аналогичной
Я пытаюсь сделать сайт wordpress совместимым с доступностью, но я столкнулся с проблемой со строкой меню. Он использует модифицированный их на основе Twenty_Twelve.
Мне нужно изменить тег "ul" на "ol", который необходим для обеспечения его совместимости. (Я попытался Отредактировать HTML панели навигации Wordpress после решения, но я действительно не мог понять решения walker в нем). Спасибо
Вот как выглядит 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">
2 answers
В заголовке измените код 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>'
)
); ?>
'items_wrap' (строка): Как следует упаковывать элементы списка. По умолчанию используется 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>'
)
);
'контейнер' (строка) Нужно ли заворачивать ul и чем его заворачивать. По умолчанию 'div'.
Если вы хотите обернуть ul
любым другим тегом, кроме div
, вы можете использовать
wp_nav_menu(
array( 'theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => 'section' // default is div
)
);