web-dev-qa-db-fra.com

La feuille de style dynamique se charge mais ne se termine pas

Je crée un site Web pour un architecte avec de grandes images étant une caractéristique principale du site. Compte tenu de la taille potentielle des images, je souhaitais avoir un moyen de créer un dimensionnement d'image réactif (et bien sûr, je pensais aux images css et d'arrière-plan. Je pensais pouvoir utiliser CSS pour construire la petite image par défaut et à mesure que la largeur de l'écran augmentait, utilisez demandes des médias pour ajouter des images d’arrière-plan plus grandes).

Je pensais utiliser une feuille de style dynamique distincte (sliders.php) et écrire un script qui parcourait les images en boucle pour créer un diaporama.

Quelques notes: J'utilise flexslider en tant que curseur d'image et Champs personnalisés avancés et types de publication personnalisés pour créer des "projets architecturaux" avec des images en vedette pour créer le diaporama et utiliser mon fichier functions.php pour créer automatiquement plusieurs tailles pour les images d'arrière-plan. .

Mon curseur d'image wordpress sur le front-end est créé avec la boucle suivante:

 <section class="slider slider-major" id="slider-major">

    <?php   
       $the_query = new WP_Query(array(
        'post_type' => 'projects'
       ));
    ?>

    <div class="RMA-slider slider-main slider-<?php echo the_ID(); ?>">

        <ul class="slides">

            <?php
                $slideNumber = 0;     // Set Slide numbering to 0

                while (has_sub_field('project_slider_images')) :

                $slideNumber++;
            ?>

            <li>
                <div class="slider-image slide-<?php echo $slideNumber ?>">
                </div>
            </li>

            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </ul>
    </div>
</section>

Après avoir effectué quelques tests, je suis à peu près certain que le problème vient du fichier sliders.php qui n’est utilisé que pour configurer les curseurs. J'ai deux stylesheets:

  1. screen.css (ma feuille de style non dynamique)
  2. style.php - Une feuille de style dynamique qui extrait des images de la base de données wordpress et les place dans la feuille de style dynamique en tant qu'images d'arrière-plan.

Le problème est que la boucle ne fonctionne pas pour chaque projet et je ne comprends pas pourquoi?

J'ai mis en file d'attente les feuilles de style, la feuille de style dynamique obtenant un précédent, mais aucun changement. La feuille de style dynamique entière est ci-dessous. J'ai 3 curseurs différents en cours d'exécution et donc il y a 3 boucles de curseur créées:

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 100;
$ExpStr = "Expires" . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
$url = $parse_uri[0];

require_once($url . 'wp-load.php' );
require_once($url . 'wp-includes/post.php');
require_once($url . 'wp-content/plugins/advanced-custom-fields/acf.php');
require_once($url . 'wp-content/plugins/custom-post-type-ui/custom-post-type-ui.php');

?>


/* ___________MAIN SLIDER IMAGE SET-UP______________________________________________ */

//THIS WORKS AS IT SHOULD

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'slides',
    'posts_per_page' => -1
    ));

   $sliderTitle = get_the_title();

  $slideNumber = 0;

  while ($the_query->have_posts()) :
    $the_query->the_post();

  $slideNumber++;

  $attachment_id = get_field('slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}

@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}

<?php wp_reset_postdata(); ?>
<?php endwhile; ?>






/* ___________PROJECT SLIDER IMAGE SET-UP________________________________________ */

 //THIS IS THE PROBLEM. ONLY LOOPS THROUGH A FEW PROJECTS. THERE WILL BE UPWARDS OF 15 PROJECTS ON THE SITE AND ONLY 4-5 OF THEM WORK TO SHOW IMAGES

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'projects'
  ));


  while ( $the_query->have_posts() ) :
    $the_query->the_post();


  $slideNumber = 0;

  while (has_sub_field('project_slider_images')) :

  $slideNumber++;

  $attachment_id = get_sub_field('project_slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}

@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}

<?php wp_reset_postdata(); ?>
<?php endwhile; ?>
<?php endwhile; ?>





/* ___________PRACTICE SLIDER IMAGE SET-UP____________________________________ */




 //THIS WORKS AS IT SHOULD

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'practice_slides',
    'posts_per_page' => -1
    ));

   $sliderTitle = get_the_title();

  $slideNumber = 0;

  while ($the_query->have_posts()) :
    $the_query->the_post();

  $slideNumber++;

  $attachment_id = get_field('practice_slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}
@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}
<?php wp_reset_postdata(); ?>
<?php endwhile; ?>
phploopcsscachestylesheet
1
pappley

C'était juste une ligne de code manquée puisqu'il s'agissait d'un nouveau WP_Query:

Nécessaire pour ajouter 'posts_per_page' => -1 à

$the_query = new WP_Query(array(
    'post_type' => 'projects'
  ));
1
pappley