如何在WordPress header.php中獲得一個透明的Bootstrap導航欄，下面有一個圖像？

Question

我有一個Bootstrap和WordPress的代碼布局問題。 所以基本上我想完成這個Bootstrap透明導航外觀但在WordPress模板層次結構中。

Header.php包含每個頁面在WordPress主題中將具有的導航。 現在為了看看這個，我有一個Bootstrap jumbotron類div包裹在導航器上，非常適合常規網站。

問題是我認為這不會在WordPress中起作用，因為導航代碼需要在header.php文件中分開，而jumbotron圖像只需要在主頁上。 有關如何做到這一點的任何建議？

 .jumbotron { position: relative; background: url("http://kriswhitewrites.com/wp-content/uploads/2013/06/landscape-mountains-snow-sky.jpg") center center; background-size: cover; width: 100%; min-height: 550px; overflow: hidden; } .navbar { background-color: transparent; background: transparent; } 

 <div class="jumbotron"> <nav class="navbar navbar-customnav"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-custom"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h3>Search for jobs</h3> </div> </div><!--End of Jumbotron--> 

Answer 1

你正在尋找讓你指的頭部，使其.navbar中的代碼只能在你的WordPress網站的主頁看起來不同。

首先，您不需要向header.php文件添加任何特定樣式，您可以使用style.css文件。

為此，您只需使用Wordpress提供的功能。

基本上Wordpress將自定義class添加到它輸出的每個頁面的body 。

因此，為了讓您選擇導航並僅在主頁中以不同方式設置樣式，您可以使用以下選擇器：

body.home .navbar

請注意，wordpress為不同的頁面輸出各種類，因此使用各種body.specificPageClass將有助於編寫優雅和非冗余的CSS。

Answer 2

你好PandaNinja（很棒的名字，順便說一句）。

聽起來你正試圖在你的Wordpress網站上放置一個Jumbotron Bootstrap模板。 這是可行的，但它需要幾個步驟（並且它因模板而異，需要做什么（因為不同的Wordpress模板處理導航'和東西'不同。例如， - 這里是代碼來自Wordpress Twenty-14導航（取自header.php文件，在此路徑中：/wp-content/themes/twenty-fourteen/header.php）：

<div class="header-main">
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
  <div class="search-toggle">
   <a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
  </div>
 <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
   <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
   <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
 </nav>
</div>

在這種情況下，您可以將一些類和ID添加到該代碼的不同部分，因此它顯示在頁面上。

因此，您可以編輯帖子，了解它現在在您網站上的顯示方式，並發布您的代碼和您使用的模板，然后更容易提供幫助。

正如安德烈在評論中所說的那樣 - 那么當Wordpress（和PHP）完成了他們的工作時，那么一切都會以HTML，CSS和JavaScript的形式輸出。

Edit1 - 加法（回答評論）

有很多方法可以做到這一點。 你可以用純CSS制作那個漸變，但我想如果是我，那么我會使用一個圖像，就像我在這里做的那樣： https ： //jsfiddle.net/5xhv1sLt/3/你可以下載圖像我在這里使用過（右鍵單擊鏈接並選擇“將目標另存為......”）： http ： //imgh.us/bgrepeat.png

這不是世界上最漂亮的東西 - 但它表明了這個想法。

現在 - 挑戰是將它融入你的Wordpress主題。 有兩種方法可以做到：

1）要查看當前Wordpress主題在導航中添加哪些樣式，然后調整和調整，以使其按照您的需要進行操作。 您也許可以將源代碼中的代碼復制到您的問題中，然后我可以幫助您獲得正確的樣式。

2）要進入主題中的header.php文件，請刪除最有可能是這樣的行

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>

...然后接受您無法通過Wordpress儀表板中的“外觀>>菜單”部分控制Wordpress菜單。 然后插入您自己手動編寫的導航（使用正確的格式）。

我不知道我會推薦你​​什么，因為它取決於，事情發生變化的頻率以及誰必須控制網站。 例如 - 如果是我母親不得不使用該網站，那么我可能會選擇選項1，但如果是我自己的在線簡歷網站（每兩年更換一次），那么我會選擇2 。

:-)