WordPress中的视差

Posted 2023-02-25

【中文标题】WordPress中的视差

【英文标题】：Parallax in WordPress

【发布时间】：2016-01-07 08:57:10

【问题描述】：

我的 page-parralax.php 文件中有以下视差代码：

get_header(); ?>

<?php
    $args = array(
        'post_type' => 'parallax',
        'order' => 'ASC',
        'orderby' => 'menu_order'
        );
    $parallax = new WP_Query($args);
        while($parallax->have_posts()) : $parallax->the_post();

        $parallaxImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
        $breakUrl = str_replace('http://localhost/themes', '', $parallaxImage[0]); ?>

        <div class="wrapper">

    <div class="container">
        <div id="clearfix">
            <section class="parallax" id="section_<?php echo the_ID(); ?>" style="background: url('../<?php echo $breakUrl; ?>') fixed;"></section>
            <section id="section_<?php echo the_ID();?>" class="parallax" style="background: url('../<?php echo $breakUrl; ?>') fixed;"></section>

        <div class="parralax-container">
            <h2><?php the_title(); ?></h2>
            <div class="page-content">
                <?php the_content();?>
            </div>
        </div>
        </div>
    </div>

    </div>
<?php 
    endwhile;
    wp_reset_postdata();
    get_footer(); 
?>

但是当我尝试查看它时，它返回以下错误：

为每个图像获取http://localhost/themes/index.php/wp-content/uploads/2015/10/macbook_overview_og-700x700.jpg 404（未找到）。

如果我之后在控制台中将其更改为：

http://localhost/themes/wp-content/uploads/2015/10/macbook_overview_og-700x700.jpg 显示正确。

是不是因为我使用的是 localhost 导致这个错误？

【问题讨论】：

你能var_dump($breakUrl) 看看吗？

当然。它返回： string(57) "/wp-content/uploads/2015/10/16GyTew-1024x6781-700x463.jpg"

那你在问题中提到的url是怎么创建的？

如果我正确理解了您的问题，我会像这样在 css 中调用图像：style="background: url('../')

$breakUrl 中的macbook_overview_og-700x700.jpg 或16GyTew-1024x6781-700x463.jpg？

【参考方案1】：

你必须去更深上层：

background: url('../..<?= $breakUrl; ?>')

我已删除尾部斜杠，因为您的网址以它开头。您也可以考虑设置 <base> URL 并从一开始就使用相对 URL。

【讨论】：

这修复了它。谢谢！