web-dev-qa-db-ja.com

動的スタイルシートはロードされるが完了しない

私は建築家のためのウェブサイトを作成しています。大きな画像がサイトの主な特徴です。レスポンシブイメージサイズを作成する方法が欲しいと思うイメージの潜在的なサイズを考えて（そしてもちろんCSSと背景イメージを考えました。デフォルトとして、そしてスクリーン幅が広がるにつれてCSSを使って小さいイメージを作ることができると思いました）より大きな背景画像を追加するためのメディアクエリ）。

私の考えは、別の動的スタイルシート（sliders.php）を使用し、スライドショーを作成するために画像をループ処理するスクリプトを書くことでした。

ちょっとしたメモ：私はflexsliderをイメージスライダーとして使い、Advanced Custom FieldsとCustom Post Typesを使ってスライドショーを作るための「建築プロジェクト」を作成し、私のfunctions.phpファイルを使って背景画像用の複数サイズを自動作成します。 。

フロントエンドの私のワードプレスのイメージスライダーは次のループで作成されます。

 <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>

いくつかのテストを実行しましたが、問題はsliders.phpファイルにあることを確信しています。これはスライダの設定にのみ使用されます。私は2つのスタイルシートを持っています：

  1. screen.css（私の非動的スタイルシート）
  2. style.php - ワードプレスデータベースから画像を引き出し、それらを背景画像として動的スタイルシートに入れる動的スタイルシート。

問題は、ループがすべてのプロジェクトで実行されるわけではないということです。その理由がわかりません。

動的スタイルシートを優先してスタイルシートをエンキューしましたが、変更はありません。動的スタイルシート全体は以下の通りです。私は3つの異なるスライダーを動かしているので、3つのスライダーループが作成されます。

<?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

新しいWP_Queryであるため、見逃したコード行にすぎません。

に'posts_per_page' => -1を追加する必要があります

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