Question

首先，我正在使用wordpress（TwentyThirteen Parent Theme）的子主题。我有一个图像用作标题有这样的东西：

所以，黑色将是我的标题图像（白色部分是透明的），灰色我有我的菜单栏，红色是我内容网站上的第一部分。

我的问题是......我如何设置（使用css / bootstrap）到图像标题是这样的？那是什么基本结构？

我的header.php代码是这样的：

?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <div class="header">
                <?php echo '<img class="img-responsive" src="' . get_stylesheet_directory_uri() . '/img/header.png">';?>
            </div>


            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <div class="navbar-header">

                </div>
                <ul class="nav navbar-nav">
                  <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>

    </header><!-- #masthead -->

    <div id="main" class="site-main">

Answer 1

在二十三个主题网站标题/描述＆amp;菜单位于标题部分下方，因此您可以在其上方添加标题图像部分。请参考下面的示例代码。

<body <?php body_class(); ?>>
<!-- Here you can add custom header image section outside page div  -->
<div class="headerImg1"><img src=""></div> <!-- postion one -->

    <div id="page" class="hfeed site">
<!-- or you can also add here inside page div. -->
<div class="headerImg2"><img src=""></div> <!-- postion two -->
        <header id="masthead" class="site-header" role="banner">
        <!-- site title/description code -->
            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <!-- Nav code -->
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">

如何将图像标题放在菜单和部分上？

1 个答案: