web-dev-qa-db-ja.com

TwentyTwelve子テーマのモバイルメニューが機能しない

私はTwenty Twelveのアクティブなとてもシンプルな子テーマを持っていますが、モバイルメニューは押されても拡大しません。

これが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">

これが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;
  }
}

これは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;
}

何がモバイルメニューに干渉しているのかわかりません。

助言がありますか？

menuschild-thememobiletheme-twenty-twelve
1
Steve

私は全く同じ問題を抱えていました。基本のTwentyTwelveテーマでは、サイトナビゲーションがh3からbuttonに変更されるようにコードが変更されました。

使用するには、子テーマのheader.phpファイルを更新する必要があります。

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

WordPressを参照してください TRAC＃28824コメント13

この問題は、基本テーマをv1.4からv1.5にアップグレードすると発生します。それはモバイルデバイスに限定されません - あなたは600ピクセル未満のウィンドウ幅で問題を再現することができます。

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

試してみてください。ナビゲーションメニューの配列に'container' =>FALSEを追加するだけです。

1
Mithun Sarker Shuvro