Question

我正在建立一个Wordpress和Woocommerce网站，并且遇到了一些障碍。我制作了一个看起来很棒的自定义页面模板，然而，它崩溃了Google Chrome。我已在多个Google Chrome实例上尝试过它，但它适用于某些实际上，但不适用于其他实例。它不会在Firefox，Edge，Safari甚至Chrome Canary中引起任何问题。我已经检查了正在使用的webkit，但是，它也在其他页面中使用，并且不会导致任何问题。任何帮助都会很棒！

Page：www.solidwoodnc.com/bedroom-home

<?php /* Template Name: Landing Page */ ?>
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package UFOWTHEME
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>
<div id="page" class=""> 
<body <?php body_class(); ?> >
<nav class="nav navbar navbar-custom navbar-toggleable-md bgimage menucontainer">
  <button class="navbar-toggler navbar-toggler-right align-middle" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span><i class="material-icons">menu</i></span>
  </button>
    <button class="navbar-toggler navbar-toggler-left align-middle" type="button" data-toggle="collapse" data-target="#searchCollapse" aria-controls="searchCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="align-middle"><i class="material-icons">search</i></span>
  </button>
  <a class="navbar-brand" href="#"><img class="logo"  height="20%" src="<?php echo get_template_directory_uri() ?>/imgs/logo.gif" style="padding-bottom: 0%; opacity: 1"/></a>
 <span class="align-middle hidden-sm-down" >
     <h7>Give us a call at:</h7><br /> 910.399.2276
    </span>
     <span class="align-middle mx-auto hidden-md-up" >
     <h7>Give us a call at:</h7> 910.399.2276
    </span>

    <div class="ml-auto" style="padding-top: 0; margin-top: 0">
        <div style="margin-right: 0;">


        <form id="searchCollapse" role="search" method="get" class="form-inline collapse navbar-collapse col-12 " style="padding-bottom: 9%" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
                 <div class="pr-md-2">
             <?php if ( is_user_logged_in() ) { ?>
    <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','woothemes'); ?>"><?php _e('My Account','woothemes'); ?></a>
 <?php } 
        else { ?>
    <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','woothemes'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
 <?php } ?> </div>
            <div class="form-group">
        <label class="screen-reader-text sr-only" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
        <input type="search" class="form-control form-control-md" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
        <button type="submit" class="btn btn-md newbtn mx-sm-auto mp-top-sm-2" style="background-color: rgb(117, 76, 36); color: #FFF; "><?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?></button>
        <input type="hidden" name="post_type" value="product" />
            </div>
        </form>     </div>
        <?php
            wp_nav_menu( array(
                'menu'              => 'main',
                'theme_location'    => 'main',
                'depth'             => 0,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'navbarNavDropdown',
                'menu_class'        => 'nav ml-auto',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker())
            );
            ?></div>
    </nav>
    <div id="content" class="col-12" style="width: 100vw; margin: 0; padding: 0">

    <div id="banner" class="row align-items-center justify-content-center">
        <div class=" center-align col-2 col-md-4 col-sm-12">
        <div class="center-align overlaytext" style=" text-align: center">
            <?php the_title('<h1 style="color: #FFF">', '</h1>'); ?>
        </div><hl /></div>
    </div>
    <div id="primary" class="container content-area col-12" style="text-align: center; font-family: 'Quicksand', sans-serif">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'landingpage' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>
            <?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?>
<style>
  #banner {
     font-family: 'Quicksand', sans-serif;
    font-weight: bolder;
    background-image: url('<?php echo $image[0]; ?>');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 50vh;
    margin: 0;
    padding: 0;
  }
</style>
<?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_footer();

Wordpress页面导致谷歌Chrome崩溃

0 个答案: