Мой сайт www.rosstheexplorer.com
В зависимости от ширины браузера плагин, H1 и другие элементы на странице могут перекрывать пользовательский заголовок. Как я могу предотвратить это? Я хочу, чтобы все остальные элементы на странице всегда были ниже заголовка клиента.
Код для моего настраиваемого заголовка
@media screen and (min-width: 601px) { .custom-header { background: url("http://img.ruphp.com/php/Cover-Photo-6-2.jpg") no-repeat; width: 100% ; height: 40%; background-size: 100%; position: absolute; top: 0px; left: 0px; display: block } } Код для моего header.php (перед моими изменениями, которые я объясняю ниже) является
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="content"> * * @package Penscratch */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php wp_title( 'A|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a> <img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""> <header id="masthead" class="site-header" role="banner"> <div class="site-branding"> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </div> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #site-navigation --> </header><!-- #masthead --> <div id="content" class="site-content"> <?php if ( get_header_image() ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> </a> <?php endif; // End header image check. ?>
Чтобы поместить собственный заголовок в свою собственную строку, я попытался использовать следующий код
<div class="row"> <div class="col-sm-12" style="background-color:lavender;"><img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></div> </div>
Это, кажется, не имеет никакого эффекта.
Я правильно установил Bootstrap?
Я попытался использовать следующий код. Я добавил код в файл functions.php. Я использовал инструкции, найденные здесь https://www.zenwebthemes.com/blog/how-to-add-bootstrap-to-your-wordpress-theme/ .
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css' ); wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
Я добавил следующий комментарий, основанный на совете Pratys. Я использовал инструмент моделирования, найденный по адресу https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_basic&stacked=h .
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <tbody> <tr> <td><img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></td> </tr> <tr> <td>Mary</td> </tr> </tbody> </table> </div> </body> </html>
Где текст «Мэри» в настоящее время, вы бы поместили код в строку меню?