web-dev-qa-db-fra.com

Le menu mobile de TwentyTwelve thème enfant ne fonctionne pas

J'ai un thème enfant assez simple de Twenty Twelve actif, mais le menu du mobile ne se développe pas lorsqu'il est pressé.

Voici 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" />
<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(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
  <?php $header_image = get_header_image();             if ( ! empty( $header_image ) ) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
  <?php endif; ?>
  <nav id="site-navigation" class="main-navigation" role="navigation">
    <h3 class="menu-toggle">
      <?php _e( 'Menu', 'twentytwelve' ); ?>
    </h3>
    <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>">
    <?php _e( 'Skip to content', 'twentytwelve' ); ?>
    </a>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
  </nav>
  <!-- #site-navigation --> <!--<hgroup>                        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>                        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>           </hgroup>--> </header>
<!-- #masthead -->
<div id="main" class="wrapper">

Voici style.css:

/*
Theme Name: Vincent Men's Shed
Description: Custom theme
Author: Steve Doig
Template: twentytwelve
version: 0.1
*/

@import url("../twentytwelve/style.css");

@media screen and (min-width: 600px) {
  body .site {
    padding: 0;
    max-width: 1000px;
    max-width: 71.42857142rem;
  }
  .site-header {
    padding: 0;
  }
  .header-image {
    margin-top: 0;
  }
  header > a {
    background-color: #EC3607;
  }
  header hgroup, header nav {
    padding: 0 2em;
  }
  header nav {
    background: #2f2f2f; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJmMmYyZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYjBiMGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #2f2f2f 0%, #0b0b0b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(100%,#0b0b0b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2f2f2f 0%,#0b0b0b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2f2f2f 0%,#0b0b0b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2f2f2f 0%,#0b0b0b 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2f2f2f 0%,#0b0b0b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-8 */
  }
  .main-navigation {
    margin-top: 0;
  }
  .main-navigation li a {
    color: #eee;
  }
  .main-navigation li a:hover {
    color: #fff;
  }
  .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
    color: #fff;
  }
  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border: none;
  }
  .main-navigation ul li ul li a {
    color: #000;
  }
  .main-navigation li.current-menu-item {
    background-color: #fff;
  }
  .main-navigation li.current-menu-item a {
    color: #000;
  }
  #main {
    padding: 2em;
  }
  .entry-header .entry-title {
    font-weight: bold;
  }
  .site-content {
    margin: 0;
  }
  .site-content article {
    margin-bottom: 28px;
    margin-bottom: 2rem;
  }
  footer[role="contentinfo"] {
    margin-top: 0;
  }
  .main-navigation li {
    padding: 0 1.5rem;
    margin: 0;
    position: relative;
  }
}

Voici functions.php:

<?php

function add_require_scripts_files() {
 wp_enqueue_style('layout', get_stylesheet_directory_uri().'/style.css', array(), '1.0.0', "all");        
}

add_action( 'wp_enqueue_scripts', 'add_require_scripts_files' );

function wpse_filter_child_cats( $query ) {

if ( $query->is_category ) {
    $queried_object = get_queried_object();
    $child_cats = (array) get_term_children( $queried_object->term_id, 'category' );

    if ( ! $query->is_admin )
        //exclude the posts in child categories
        $query->set( 'category__not_in', array_merge( $child_cats ) );
    }

    return $query;
}
add_filter( 'pre_get_posts', 'wpse_filter_child_cats' );

add_filter('body_class','twentytwelvechild_body_class_adapt',20);
function twentytwelvechild_body_class_adapt( $classes ) {

        if ( is_category( 'newsletter' ) )
                $classes[] = 'full-width';

        return $classes;
}

Je ne vois pas ce qui interfère avec le menu du portable.

Aucune suggestion?

menuschild-thememobiletheme-twenty-twelve
1
Steve

J'ai eu exactement le même problème. Dans le thème de base TwentyTwelve, le code a été modifié de sorte que la navigation sur le site soit passée de h3 à button.

Vous devez mettre à jour le fichier header.php dans le thème de l'enfant pour pouvoir l'utiliser.

<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>

Voir WordPress TRAC # 28824 commentaire 13

Le problème se produit lorsque vous mettez à niveau le thème de base de v1.4 à v1.5. Ce n'est pas limité aux appareils mobiles - vous pouvez recréer le problème avec une largeur de fenêtre inférieure à 600 pixels.

5
bobbingwide
wp_nav_menu(
 array(
 'theme_location' => 'primary',
 'menu_class' => 'nav-menu' ,
 'container'  =>FALSE
) 
)

Essayez ceci, ajoutez simplement 'container' =>FALSE à votre tableau de menus de navigation

1
Mithun Sarker Shuvro