web-dev-qa-db-ja.com

Wordpressは私のカスタムメニューにマージンとパディングを追加していますか？

私は自分のコンピュータにwordpressをインストールしたので、カスタムテーマを作成してそれらをローカルでテストする方法を学ぶことができます。現在私はチュートリアルからいくつかの既製のコードで遊んでいるので、私はワードプレスコーデックスにもっと慣れることができます。

しかし、ナビゲーション/メニューのカスタマイズに問題があります。リンクを追加するのにwp_nav_menuを使用していますが、何らかの理由でページを更新すると、バーの下部（水平メニュー）とリンクのすぐ左側に追加のスペースが追加されます。私がグーグルクロムの上の要素を調べたとき、それはwordpressが追加したようである追加のIDとクラスでulタグを参照します。

問題を解決するためにちょっとグーグルをしましたが、ワードプレスがメニューに追加するすべての追加のクラスとIDがスタイルに影響を与えるべきではなく、必要に応じてそこにあるというコンセンサスのようです。それらをカスタマイズします。

problem menu

これが私のheader.phpファイルのメニューのコードです。

<div class="blog-masthead">
  <div class="container">
    <nav class="blog-nav">
        <?php wp_nav_menu( array( 'menu' => 'empty menu', 'container_class' => '', 'walker' => new CSS_Menu_Walker() ) ); ?>
      </nav>
        </div>
</div>

これはCSSコードです：

.blog-masthead {
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */

.blog-nav li {
    position: relative;
    display: inline-block;
    padding: 10px;
    font-weight: 500;   
}
.blog-nav li a {
    color: #fff;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;

}

これは、私がクロムでそれを調べたときにコードがどのように見えるかです：

   <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
            <div class="menu-empty-menu-container"><ul id="menu-empty-menu" class="menu"><li id="menu-item-1798" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active"><a href="http://localhost/wordpress"><span>Home</span></a></li>
<li id="menu-item-1799" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/blog/"><span>Blog</span></a></li>
<li id="menu-item-1800" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/front-page/"><span>Front Page</span></a></li>
<li id="menu-item-1801" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/about/"><span>About The Tests</span></a></li>
<li id="menu-item-1802" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://localhost/wordpress/category/foo-parent/"><span>Foo Parent</span></a></li>
<li id="menu-item-1803" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://localhost/wordpress/category/foo-a/"><span>Foo A</span></a></li>
</ul></div>          </nav>
            </div>
    </div>

私が気づいたもう一つのことは私がメニューのためのPHPを取り替えるならば

<?php wp_list_pages( '&title_li='); ?>

アクティブなリンクの下に表示されるはずのキャレットがないことを除いて、すべてが本来の状態に見えます（これが解決された後に発生する別の問題）。

proper menu

何か案は？

theme-developmentmenusnavigationcodex
1
reg

左側のパディングは、ブラウザによってulに追加されるデフォルトの40ピクセルになります。 WPメニューをスタイルするとき、私はこれを使ってすべてのブラウザが幸せであることを確認します。

.blog-nav li,
.blog-nav ul {
    padding: 0;
    margin: 0;
}
1
Andy Macaulay-Brook