首页 文章

如何在WordPress header.php中获得一个透明的Bootstrap导航栏，下面有一个图像？

提问于
浏览 次
1

我有一个Bootstrap和WordPress的代码布局问题 . 所以基本上我想完成这个Bootstrap透明导航外观但在WordPress模板层次结构中 .

Screenshot

Header.php包含每个页面在WordPress主题中将具有的导航 . 现在为了看看这个，我有一个Bootstrap jumbotron类div包裹在导航器上，非常适合常规网站 .

issue 是我认为这不会在WordPress中工作，因为导航代码需要在header.php文件中分开，而jumbotron图像只需要在主页上 . Any suggestions on how I can do this?

.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-->
php css wordpress twitter-bootstrap-3

2 回答

  • 0

    你好PandaNinja（很棒的名字，顺便说一句） .

    这听起来像你're trying to put a Jumbotron Bootstrap-template on your Wordpress-site. That is do-able, but it requires a few steps (and it varies from template to template, what needs to be done (since different Wordpress-templates handles the navigation '和东西'不同 . 例如， - 这是来自Wordpress Twenty-14导航的代码（取自 header.php -file，在此路径中：/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 - Addition (answer to comment)

    有很多方法可以做到这一点 . 你可以用纯CSS制作那个渐变，但我想如果是我，那么我就会使用一个图像，就像我在这里做的那样：https://jsfiddle.net/5xhv1sLt/3/你可以下载图像我've used here (right-click the link and choose '将目标另存为......'）： 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 .

    :-)

    回复于
  • 0

    您希望将其设置为使您在wordpress网站的主页中在代码中引用为 .navbar 的 Headers 看起来不同 only .

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

    为此，您只需使用Wordpress提供的功能 .

    基本上Wordpress将自定义 class 添加到它输出的每个页面的 body .

    因此，为了让您选择导航并仅在主页中以不同方式设置样式，您可以使用以下选择器：

    body.home .navbar

    请注意，wordpress为不同的页面输出各种类，因此使用各种 body.specificPageClass 将有助于编写优雅和非冗余的CSS .

    回复于

相关问题