php - 如何将图像标题放在菜单和部分上?

标签 php html css wordpress

首先,我使用了 wordpress 的子主题 ( TwentyThirteen Parent Theme )。我有一个图像用作标题有这样的东西: Model of what I want to do

因此,黑色是我的标题图片(白色部分是透明的),灰色是我的菜单栏,红色是内容网站上的第一部分。

我的问题是...我怎样才能像这样设置(使用 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">

最佳答案

在二十三个主题网站中,标题/描述和菜单位于标题部分下方,因此您可以在其上方添加标题图像部分。请引用下面的示例代码。

<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">

关于php - 如何将图像标题放在菜单和部分上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43235484/

相关文章:

css - 禁用表格单元格大小调整

javascript - 表单不使用 Ajax,直接发布到 PHP

php - 为什么执行 PHP mysql_query 失败

php - 如何在不删除标签的情况下替换 HTML 标签内的空格

html - Ruby/Rails/HTML/HAML - 创建一个两列表,其中第一列单元格跨越动态行数

html - 使用悬停时内联显示 div

html - 使用过渡高度移动 div

php - MySQL(或 PHP?)按字段数据对结果进行分组

php - 使用php仅将txt文件中的某些行加载到mysql表中

html - 提交表单时未设置内容类型