首先,我使用了 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">
最佳答案
在二十三个主题网站中,标题/描述和菜单位于标题部分下方,因此您可以在其上方添加标题图像部分。请引用下面的示例代码。
<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/