动态样式表加载但未完成

时间：2014-02-21 作者：pappley

我正在为建筑师创建一个网站，大型图像是该网站的主要功能。考虑到图像的潜在大小，我想有一种方法来创建响应性的图像大小（当然我想到了css和背景图像。我想我可以使用css来构建小图像作为默认值，随着屏幕宽度的增加，使用媒体查询来添加更大的背景图像）。

我的想法是使用一个单独的动态样式表（sliders.php），编写一个脚本，在图像中循环创建幻灯片。

注意：我正在使用flexslider作为图像滑块，使用高级自定义字段和自定义帖子类型创建“建筑项目”，使用特色图像创建幻灯片并使用我的功能。php文件为背景图像自动创建多个大小。

前端的我的wordpress图像滑块是通过以下循环创建的：

 <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>
运行了一些测试后，我很确定问题出在滑块上。php文件，仅用于设置滑块。我有两个样式表：

屏幕。css（我的非动态样式表）样式。php-一个动态样式表，从wordpress数据库中提取图像，并将其作为背景图像放入动态样式表中

我已经将样式表与动态样式表进行了排队，但没有更改。下面是整个动态样式表。我运行了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; ?>

1 个回复
最合适的回答,由SO网友:pappley 整理而成

因为这是一个新的WP\\U查询，所以它只是漏了一行代码：

需要添加\'posts_per_page\' => -1 到

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

结束
标签： php   loop   cache   css   小码农  

相关推荐

无法将自定义CSS应用于主题中的IE

对于2013年、2014年或Wordpress制作的任何主题，编辑ie.css 哪个在themefolder\\css\\ie.css 不会导致Internet Explorer中的任何更改。我实际上使用的是IE11，但无论我将文档模式或用户代理更改为什么，都不会导致任何更改。我还注意到Wordpress注入ie 类到<html> 从IE浏览时使用标签。因此，我应用了以下CSS代码：.ie body { display: none !important; padding: 100px; },