WordPressグローバルナビゲーション

  • fukui

    (@fukui)


    12年前

    ●質問の主旨

    グロバールナビゲーションの位置がずれるのは、どうしてでしょうか？
    意図する位置に変えるためには、コード（header.phpとnav.css)
    をどのように書き換えればよいでしょうか？
    ご存知のかたよろしくお願いします。

    （意図する位置）

    左から
    「トップページ」→「会社概要」→「モール開発実績」→「コラム」→「お問い合わせ」

    （現状の位置）

    左から
    「お問い合わせ」→「トップページ」→「会社概要」→「モール開発実績」→「コラム」

    ●質問の補足

    この質問は、OKWaveにも投稿しています。
    そこにグローバルナビゲーションの
    現状の画像を添付しております。
    WordPressグローバルナビゲーション

    ●開発環境

    windows8
    xammp1.8.1

    ●参考文献

    本格ビジネスサイトを作りながら学ぶWordPressの教科書P96～97

    ●コード

    (header.php)

    <!DOCTYPE HTML>
    <html dir=”ltr” lang=”ja”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <title><?php bloginfo(‘name’); ?></title>
    <link rel=”apple-touch-icon” href=”<?php bloginfo(‘template_url’); ?>/images/touch-icon.png” />
    <link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>/images/favicon.ico” />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
    <!–[if lt IE 9]>
    <meta http-equiv=”Imagetoolbar” content=”no” />
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
    <![endif]–>
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div id=”wrap”>
    <section id=”description”>
    <h1><?php bloginfo(‘description’); ?></h1>
    </section><!– #description end –>
    <div id=”container”>
    <header id=”header”>
    <h1 id=”site-id”>
    “><img src=”<?php bloginfo(‘template_directory’); ?>/images/header/site_id.png” alt=”<?php bloginfo(‘name’); ?>” />
    </h1><!– #site-id end –>
    <div id=”utility-group”>
    <?php
    wp_nav_menu(array(
    ‘container’ => ‘nav’,
    ‘container_id’ => ‘utility-nav’,
    ‘theme_location’ => ‘place_utility’,
    ));
    ?>
    <div id=”header-widget-area”>
    <aside class=”widget_search”>
    <form role=”search” id=”searchform”>
    <div>
    <input type=”text” id=”s” />
    <input type=”submit” id=”searchsubmit”/>
    </div>
    </form><!– #searchform end –>
    </aside><!– .widget_search end –>
    </div><!– #header-widget-area end –>
    </div><!– #utility-group end –>
    </header><!– #header end –>
    <?php wp_nav_menu(array(
    ‘container’ => ‘nav’,
    ‘container_id’ => ‘global-nav’,
    ‘theme_location’ => ‘place_global’,
    ));
    ?>
    <?php
    if (is_front_page()):
    ?>
    <section id=”branding”>
    <img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />
    </section><!– #branding end –>
    <?php
    endif;
    ?>
    <section id=”contents-body”>

    (nav.css)

    @charset “UTF-8”;

    #global-nav ul {
    margin: 0;
    position: absolute;
    z-index: 10;
    }

    #global-nav ul li {
    float: left;
    }

    #global-nav ul li li {
    float: none;
    }

    #global-nav a {
    display: block;
    width: 190px;
    height: 52px;
    text-indent: -9999px;
    outline: 0;
    }

    #global-nav li ul {
    display: none;
    }

    #global-nav #menu-item-121 {
    background-image: url(../images/nav/menu_home.png);
    width: 194px;
    }
    #global-nav #menu-item-122 {
    background-image: url(../images/nav/menu_about.png);
    }
    #global-nav #menu-item-126 {
    background-image: url(../images/nav/menu_mall.png);
    }
    #global-nav #menu-item-132 {
    background-image: url(../images/nav/menu_column.png);
    }
    #global-nav #menu-item-131 {
    background-image: url(../images/nav/menu_inquiry.png);
    width: 194px;
    }

    #global-nav .current-menu-item,
    #global-nav .current-post-ancestor,
    #global-nav .current-page-ancestor,
    #global-nav .menu-item:hover {
    background-position: 0 -52px;
    }

    #global-nav ul ul {
    border-bottom: 3px solid #fff;
    border-radius: 0 0 3px 3px;
    display: none;
    position: absolute;
    top: 41px;
    z-index: 100;
    width: auto;
    }

    #global-nav ul .menu-item ul a {
    width: 170px;
    color: #333;
    background: none;
    text-indent: 0;
    height: 22px;
    padding: 10px 5px;
    border-top: dotted 1px #ddd;
    }

    #global-nav ul .menu-item ul a:hover {
    color: #f00;
    }

    #global-nav ul .menu-item ul li {
    background: #fff;
    float: none;
    padding: 0 5px;
    }

    #global-nav ul .menu-item ul li:first-child a {
    border-top: none;
    }

    #global-nav ul li:hover > ul, div.menu ul li:hover > ul {
    display: block;
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • nekomimiTaicho

    (@nekomimitaicho)

    12年前

    WordPressの教科書FAQはごらんになりましたか？

    トピック投稿者 fukui

    (@fukui)

    12年前

    nekomimiTaicho様
    アドバイスありがとうございます！

    >WordPressの教科書FAQ
    読んでませんでした！
    こちらにも質問してみます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「WordPressグローバルナビゲーション」には新たに返信することはできません。