Wordpress style.php无法完全加载

时间：2014-02-21 05:10:17

标签： php jquery html css wordpress

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

该网站正在建立在wordpress上 - 我的想法是使用一个单独的style.php并编写一个环绕图像的脚本来创建幻灯片。

一些注意事项：我使用flexslider作为图像滑块和高级自定义字段和自定义帖子类型来创建具有特色图像的“建筑项目”以创建幻灯片，并使用我的functions.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>

所有这些都有效，我在style.php中使用的代码循环遍历图像数据如下：

 <?php
  $temp_post = $post;
  $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";// (thumbnail, medium, large, full or custom size)
  $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 );

?>


.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 endwhile; ?>
<?php endwhile; ?>

同样，这完美无缺。我遍历项目图像并吐出多个尺寸，为幻灯片放映创建响应式背景图像。

问题在于：整个css文件无法加载。它似乎只能在style.php中加载前30到35个图像，然后才能停止在循环中运行并吐出css来创建幻灯片。因此，创建的前几个项目工作得很好，但是最近的任何项目都只显示空白幻灯片，而没有任何图像在要创建的style.php中循环。

现在，我知道我已经通过使用style.php放弃了一些控制，因为我无法缓存文件。但据我估计，加载缓存更有利于快速移动加载时间。但是，如果整个CSS文件无法加载，那么这是一个没有实际意义的点。

我需要使用特定的加载顺序吗？或者，我可以在加载任何其他内容之前强制加载整个style.php文件吗？我还在学习WordPress，但在我所有的阅读中，我都没有听说过任何stlye.php加载问题（当然我从来没有看到它像这样使用过。）

A link to a page that doesn't fully load the style.php file

A link to a page that does load the style.php early enough to show the images

的更新 的 *

经过更多测试后，我现在知道问题肯定在style.php文件中，该文件仅用于设置滑块。我有两个样式表：1）normal-styles.css和2）style.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____________________________________ */

//这应该是它的工作 

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

0 个答案:

没有答案
相关问题
最新问题