WordPress

niestandardowe tło — Jumbotron nie wyświetla się w przeglądarce Firefox ani Safari

  • 13 listopada, 2016
  • 3 min read
niestandardowe tło — Jumbotron nie wyświetla się w przeglądarce Firefox ani Safari


Chcę tylko zacząć od stwierdzenia, że ​​próbowałem wielu rzeczy, zanim zdecydowałem się napisać ten wpis. Jesteście moją jedyną nadzieją.

Moja witryna działa w przeglądarce Chrome, ale znika w przeglądarce Firefox lub Safari.

Rzeczy, których próbowałem:

  • Dodano skrypt rejestru, a następnie kolejkę; W nadziei, że mój grid-12.css zostanie załadowany przed frontstyle.css (grid-12.css ma kod jumbotron; bootstrap.css ma tylko mój modal.)
    • Przesuwanie końca mojego while/endif; wp_reset_postdata na dole mojego jumbotronu.
    • Umieść mój jumbotron jako wbudowane css zamiast w arkuszu stylów. (obecnie); Dzielenie css z jakiegoś powodu nie działa.
    • Umieść jumbotron w front-style.css (główny arkusz stylów)
    • Tworzenie zależności grid-12.css od mojego front-style.css (obecnie)
    • I kilka innych rzeczy….

funkcja.php:

function _cc_scripts() {

  wp_register_style('grid_12', get_template_directory_uri() .  '/inc/css/grid12.css');
  wp_register_style('normalize_css', get_template_directory_uri() . '/inc/css/normalize.css');
  wp_register_style('bootstrap_css', get_template_directory_uri() . '/inc/css/bootstrap.css');
  wp_register_style('front_css', get_template_directory_uri() . '/inc/css/front-style.css', 'grid_12');
  wp_register_style( 'main_style', get_template_directory_uri() . '/style.css');
  wp_register_style('animate_css', get_template_directory_uri() . '/inc/css/animate.css');
  wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css', array(), '4.6.1' );
  wp_register_style( '_cc-style', get_stylesheet_uri() );
  wp_register_style( '_cc-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

  wp_enqueue_style('grid_12');
  wp_enqueue_style('normalize_css');
  wp_enqueue_style('bootstrap_css');
  wp_enqueue_style('front_css');
  wp_enqueue_style('main_style');
  wp_enqueue_style('animate_css');
  wp_enqueue_style('font-awesome');
  wp_enqueue_style('_cc-style');
  wp_enqueue_style('_cc-skip-link-focus-fix');


  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
} // End of _cc_scripts()
add_action( 'wp_enqueue_scripts', '_cc_scripts' );

nagłówek.php:

<?php
$args = array(
'category_name' => 'jumbotron',
);
$the_query = new WP_Query( $args );
?>

<?php 
if ( have_posts() ): 
  while ( $the_query->have_posts() ):   
    $the_query->the_post(); ?>

    <?php
    $thumbnail_jumbo  = get_post_thumbnail_id($post->ID);
    $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , 'full');
    $thumbnail_jumbo = $featuredImage[0];
    list($width, $height) = getimagesize($thumbnail_jumbo); 
    ?>

    <div class="jumbotron">
      <style type="text/css">
        .jumbotron {
      background: no-repeat center right fixed  url('<?php echo $thumbnail_jumbo ?>');
     padding:0;
     margin-bottom: 0px;
     max-width:100%;
     min-height: 500px;

     background-size: 100%;
     box-shadow:0px 0px 10px #000;
       -webkit-background-size: 100%;
         -moz-background-size: 100%;
           -o-background-size: 100%;
     background-size: cover;
       -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;

        }
        </style>


        <div class="scroll-down text-center  hidden-sm hidden-md hidden-lg">
        <a href="#" class="about"><span class="icon-down">
          <i class="fa  fa-chevron-down fa-3x"></i></span>
        </a>
      </div>
    </div>
    <?php 
  endwhile; 
endif; 
wp_reset_postdata(); 
?>

Inne rzeczy do odnotowania

  • Próbuję uniknąć wbudowanego CSS.
  • Niestandardowy CSS musi zostać załadowany po Bootstrap.css (w tym przypadku grid-12.css)
Warto przeczytać!  Jak dodać niestandardowe typy postów do głównego kanału RSS WordPress

W tej chwili w Safari/Firefox widzę kolor obrazu/jumbotronu za moim paskiem nawigacyjnym, ale nie rozciąga się i nie zajmuje miejsca, które chcę.

Dzięki, każda rada w tej sprawie byłaby świetna.


Źródło