質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

wordpress テーマstinger5のナビゲーションをカスタマイズしたい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,378

harukiadachi

score 11

wordpressテーマstinger5を使ってサイト構築中です。

ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。

                          (やりたい事)
                              ↓

イメージ説明
このようにメニュー項目一つ一つに画像を設定してリンクにした
、wordpressはPHPだらけで、よくわかりません。

(ナビゲーションのcss)
        ↓
/*-------------------
メニュー
---------------------------------*/
nav li {
    position: relative;
    float: left;
    font-size: 13px;
    padding-left: 10px;
    display: inline;
    padding-right: 10px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCC;
    padding-top: 5px;
    padding-bottom: 5px;
}


nav li li {
    float: left;
    font-size: 13px;
    padding-left: 10px;
    display: inline;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
}

nav li a {
    float: left;
    
    text-decoration: none;
}


.menu-navigation-container {
    overflow: hidden;
}
nav li a:hover {
    text-decoration: underline;

}

コード
(ヘッダーPHP)


<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<?php if(is_category()): ?>
<?php elseif(is_archive()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_search()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_tag()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_paged()): ?>
<meta name="robots" content="noindex,follow">
<?php endif; ?>
<title>
<?php
global $page, $paged;
if(is_front_page()):
elseif(is_single()):
wp_title('|',true,'right');
elseif(is_page()):
wp_title('|',true,'right');
elseif(is_archive()):
wp_title('|',true,'right');
elseif(is_search()):
wp_title('|',true,'right');
elseif(is_404()):
echo'404 |';
endif;
bloginfo('name');
if($paged >= 2 || $page >= 2):
echo'-'.sprintf('%sページ',
max($paged,$page));
endif;
?>
</title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<?php } else { ?>
<?php } ?>
</head>
<body <?php body_class(); ?>>
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger">
      <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p>
    </dt>
    <dd class="acordion_tree">
      <ul>
        <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
      </ul>
      <div class="clear"></div>
    </dd>
  </dl>
</nav>
<!-- /アコーディオン -->
<div id="wrapper">
<header> 
  <!-- ロゴ又はブログ名 -->
  <p class="sitename"><a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a></p>
  <!-- キャプション -->
  <?php if (is_home()) { ?>
  <h1 class="descr">
    <?php bloginfo('description'); ?>
  </h1>
  <?php } else { ?>
  <p class="descr">
    <?php bloginfo('description'); ?>
  </p>
  <?php } ?>
  
  <!--
カスタムヘッダー画像
-->
  <div id="gazou">
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
  </div>
  <!-- /gazou --> 
  <!--
メニュー
-->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
    'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

どうかよろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • takutok

    2015/06/25 11:09

    ちょっと丸投げしすぎじゃないでしょうか。
    どこをどのように修正したらうまくいかなかったのか教えていただけますか?

    キャンセル

  • harukiadachi

    2015/06/25 11:17

    すいません。確かにそうかもしれません。。。
    もう少し色々試してみて、改めて質問さしていただきます。

    キャンセル

回答 2

check解決した方法

0

もう少し勉強してから出直します。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

//wp_nav_menu( $defaults );
?>
<style type="text/css">
.nav_box{float:left;width:32%;border-width:0px;margin:0px;padding:0px;}
</style>
<div>
  <div class="nav_box" style="margin-right:2%;"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box"><a href=""><img src="" width=100% height="auto" ></a></div><div class="nav_box" style="float:right"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div style="clear:both"></div>
</div>
<div style="margin-top:10px;">
  <div class="nav_box" style="margin-right:2%;"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box" style="float:right"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div style="clear:both"></div>
</div>
  </nav>

</header>

header.phpのwp_nav_menu( $defaults );(から下全部)を上記のように変えたら、いけると思います。
但し、確認は余りしてませんので、ミスっているかもしれません。
imgのsrcには、一番上の階層からのパスをいれる必要があるようです。
なぜかはわかりません。ややこしかったら、絶対パスを入れたらいいと思います。
画像幅は、調整され、元の画像の比率を保って、高さも調整されるようです。
nav_boxのwidthと、一番左端のdivのmargin-rightをいじれば、微調整できます。
本当は、wp_nav_menuをいじりたいところですが、
かなりややこしそうだったので、

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/27 15:53

    す、すごいです。
    できました。
    ありがとうございました!
    やはりPHPも勉強しないといけなそうですね。

    キャンセル

  • 2015/06/28 19:33

    報告有難うございます。
    余談ですが、
    wp_nav_menu( $defaults );ですが、
    $defaults['menu']='menuの名前';
    wp_nav_menu( $defaults );
    とすると、adminページで設定されたメニューではない、他のメニューを表示できます。
    なので、2段以上のメニューを表示させたい場合は、
    $defaults['menu']='menuの名前';
    wp_nav_menu( $defaults );
    を2つ以上かけば、2段以上メニューを表示させれます。
    ただし、imgタグは、adminページで、カスタムリンクにそのままimgタグを
    書けば登録されるようですが、width=100%と書いても、表示は、
    元の画像の幅でしか表示されません。
    恐らく、liの下にあるからだと思うのですが、
    その場合は、javascriptで、調整すればいいとおもいます。
    一応、ちょっとだけ、確認しましたが、下を貼り付けてもらえたら、
    多分いけると思います。
    設定するところはstyleタグ内の、nav ul liのところと、function fu_me2のなかの
    var wariai=32;//設定したいパーセントを指定(サイト全体の幅に対し)
    var kurasumei="m1";//設定したいクラス名を指定
    のところです。
    adminページのメニュー編集画面で、imgをクラス名を指定して登録してください。
    多分、ページの幅に対して、指定したパーセントの横幅で表示されると思います。
    その際は、親要素のliの幅以内にしかなりませんので、styleタグ内で、親要素のwidthも
    同じ割合で設定してください。
    バグってたら申し訳ないなかったです。


    <style type="text/css">
    /*nav ul liのwidthも調整、必要に応じmargin-right等も調整してください*/
    nav ul{display:block;}
    nav ul li{width:32%;border-width:0px;margin:0px;padding:0px;display:block;}
    </style>
    <script type="text/javascript">

    $( window ).resize(function(){
    fu_me2();
    });
    $(document).ready(function(){
    fu_me2();
    });
    function fu_me2(){
    var wariai=32;//設定したいパーセントを指定(サイト全体の幅に対し)
    var kurasumei="m1";//設定したいクラス名を指定
    var r=$("body").css("width");
    var r_n=parseInt(r);
    r_n=r_n/wariai*100;
    r_n=Math.floor(r_n);//少数以下繰り下げ
    $("."+kurasumei).css("width",r_n);
    }
    </script>

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる