wordpressテーマstinger5を使ってサイト構築中です。
ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。
(やりたい事) ↓
![イメージ説明]WIDTH:600
このようにメニュー項目一つ一つに画像を設定してリンクにした
、wordpressはPHPだらけで、よくわかりません。
(ナビゲーションのcss)
↓
lang
1/*------------------- 2メニュー 3---------------------------------*/ 4nav li { 5 position: relative; 6 float: left; 7 font-size: 13px; 8 padding-left: 10px; 9 display: inline; 10 padding-right: 10px; 11 border-left-width: 1px; 12 border-left-style: dotted; 13 border-left-color: #CCC; 14 padding-top: 5px; 15 padding-bottom: 5px; 16} 17 18 19nav li li { 20 float: left; 21 font-size: 13px; 22 padding-left: 10px; 23 display: inline; 24 padding-right: 10px; 25 padding-top: 5px; 26 padding-bottom: 5px; 27 border: none; 28} 29 30nav li a { 31 float: left; 32 33 text-decoration: none; 34} 35 36 37.menu-navigation-container { 38 overflow: hidden; 39} 40nav li a:hover { 41 text-decoration: underline; 42 43} 44 45コード
(ヘッダーPHP)
↓
lang
1<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]--> 2<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]--> 3<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]--> 4<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> 5<head> 6<meta charset="<?php bloginfo('charset'); ?>" /> 7<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 8<meta name="format-detection" content="telephone=no" /> 9<?php if(is_category()): ?> 10<?php elseif(is_archive()): ?> 11<meta name="robots" content="noindex,follow"> 12<?php elseif(is_search()): ?> 13<meta name="robots" content="noindex,follow"> 14<?php elseif(is_tag()): ?> 15<meta name="robots" content="noindex,follow"> 16<?php elseif(is_paged()): ?> 17<meta name="robots" content="noindex,follow"> 18<?php endif; ?> 19<title> 20<?php 21global $page, $paged; 22if(is_front_page()): 23elseif(is_single()): 24wp_title('|',true,'right'); 25elseif(is_page()): 26wp_title('|',true,'right'); 27elseif(is_archive()): 28wp_title('|',true,'right'); 29elseif(is_search()): 30wp_title('|',true,'right'); 31elseif(is_404()): 32echo'404 |'; 33endif; 34bloginfo('name'); 35if($paged >= 2 || $page >= 2): 36echo'-'.sprintf('%sページ', 37max($paged,$page)); 38endif; 39?> 40</title> 41<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css"> 42<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" /> 43<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> 44<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 45<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" /> 46<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 47<!--[if lt IE 9]> 48<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 49<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script> 50<![endif]--> 51<?php wp_head(); ?> 52<?php if(is_mobile()) { ?> 53<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> 54<?php } else { ?> 55<?php } ?> 56</head> 57<body <?php body_class(); ?>> 58<!-- アコーディオン --> 59<nav id="s-navi" class="pcnone"> 60 <dl class="acordion"> 61 <dt class="trigger"> 62 <p><span class="op"><i class="fa fa-bars"></i> MENU</span></p> 63 </dt> 64 <dd class="acordion_tree"> 65 <ul> 66 <?php wp_nav_menu(array('theme_location' => 'navbar'));?> 67 </ul> 68 <div class="clear"></div> 69 </dd> 70 </dl> 71</nav> 72<!-- /アコーディオン --> 73<div id="wrapper"> 74<header> 75 <!-- ロゴ又はブログ名 --> 76 <p class="sitename"><a href="<?php echo home_url(); ?>/"> 77 <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?> 78 <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" /> 79 <?php else: //ロゴ画像が無い時 ?> 80 <?php bloginfo( 'name' ); ?> 81 <?php endif; ?> 82 </a></p> 83 <!-- キャプション --> 84 <?php if (is_home()) { ?> 85 <h1 class="descr"> 86 <?php bloginfo('description'); ?> 87 </h1> 88 <?php } else { ?> 89 <p class="descr"> 90 <?php bloginfo('description'); ?> 91 </p> 92 <?php } ?> 93 94 <!-- 95カスタムヘッダー画像 96--> 97 <div id="gazou"> 98 <?php if(get_header_image()): ?> 99 <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p> 100 <?php endif; ?> 101 </div> 102 <!-- /gazou --> 103 <!-- 104メニュー 105--> 106 <nav class="smanone clearfix"> 107 <?php 108$defaults = array( 109 'theme_location' => 'navbar', 110); 111wp_nav_menu( $defaults ); 112?> 113 </nav> 114</header> 115 116
どうかよろしくお願いします。
回答2件
あなたの回答
tips
プレビュー