【发布时间】：2020-08-15 20:33:21
【问题描述】：
如果这个问题已经得到回答，我提前道歉。
我是php和css的新手（可以和html相处）。在 Google 和各种论坛上花费了相当多的时间之后，到目前为止，我一直在努力尝试让它工作，但没有运气。
我的目标是让主页滑块 (http://etractorimplements.com/) 上的背景图片可点击链接。
代码如下：
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<?php
$args = array('posts_per_page' => '-1','category' =>22, 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'post');
$recent = get_posts($args);
$count = 0;
$i=1;
foreach( $recent as $post ){
$image_url= wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="item lazy slide<?php echo $i;?> <?php echo ($count == 0) ? 'active' : ''; ?>" role="list">
<div class="row">
<div class="container">
<div class="col-md-7 text-left my_res1">
<h3 data-animation="animated fadeIn"> <?php echo $post->post_title;?></h3>
<h4 data-animation="animated fadeInUp"> <?php echo $post->post_content;?></h4> </div>
<div class="col-md-5 text-right my_res2">
<!--<img data-animation="animated bounceInUp" src="img/a.png"> --></div>
</div>
</div>
</div>
<style>
#first-slider .slide<?php echo $i;
?> {
background-image: url(<?php echo $image_url;?>);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>\
我希望四个滑块中的每一个都链接到相应的类别页面（即幻灯片：1 - Ditch Flail Mower 链接到“Flail Mowers”类别页面）
当我检查页面源时，我可以看到相应的 html 代码：
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item lazy slide1 active" role="list">
<div class="row">
<div class="container">
<div class="col-md-7 text-left my_res1">
<h3 data-animation="animated fadeIn"> Ditch Flail Mower</h3>
<h4 data-animation="animated fadeInUp"> Ideal for your small to mid-sized tractor
providing maximum flexibility</h4> </div>
<div class="col-md-5 text-right my_res2">
<!--<img data-animation="animated bounceInUp" src="img/a.png"> --></div>
</div>
</div>
</div>
<style>
#first-slider .slide1 {
background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/flailmower.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
<div class="item lazy slide2 " role="list">
<div class="row">
<div class="container">
<div class="col-md-7 text-left my_res1">
<h3 data-animation="animated fadeIn"> Wood Chipper</h3>
<h4 data-animation="animated fadeInUp"> Powerful & Reliable
Easy to Use</h4> </div>
<div class="col-md-5 text-right my_res2">
<!--<img data-animation="animated bounceInUp" src="img/a.png"> --></div>
</div>
</div>
</div>
<style>
#first-slider .slide2 {
background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl2-compressor.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
<div class="item lazy slide3 " role="list">
<div class="row">
<div class="container">
<div class="col-md-7 text-left my_res1">
<h3 data-animation="animated fadeIn"> Rotary Tiller</h3>
<h4 data-animation="animated fadeInUp"> To make your work easy,
the right size to fit your tractor.</h4> </div>
<div class="col-md-5 text-right my_res2">
<!--<img data-animation="animated bounceInUp" src="img/a.png"> --></div>
</div>
</div>
</div>
<style>
#first-slider .slide3 {
background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl4-compressor.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
<div class="item lazy slide4 " role="list">
<div class="row">
<div class="container">
<div class="col-md-7 text-left my_res1">
<h3 data-animation="animated fadeIn"> Snow Plow</h3>
<h4 data-animation="animated fadeInUp"> Innovative & reliable plow that removes
snow even in the worst conditions</h4> </div>
<div class="col-md-5 text-right my_res2">
<!--<img data-animation="animated bounceInUp" src="img/a.png"> --></div>
</div>
</div>
</div>
<style>
#first-slider .slide4 {
background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/snow-banner.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
</div>
<!-- End Wrapper for slides-->
- slide1 应该链接到https://etractorimplements.com/product-category/flail-mowers/
- slide2 应该链接到https://etractorimplements.com/product-category/wood-chippers/
- slide3 应该链接到https://etractorimplements.com/product-category/rotary-tillers/
- slide4 应该链接到https://etractorimplements.com/product-category/winter-equipments/snowplow/
谁能帮我找出插入“frontpage.php”文件的正确代码？
提前致谢！
拉比安锥
【问题讨论】：
-
请点击编辑。然后
[<>]sn-p 编辑器并发布一个 minimal reproducible example 的 JUST 相关 HTML、CSS 和脚本。无需 PHP -
您的代码中没有要重定向的 href 或脚本
-
如果您需要我们的帮助，您需要提供minimal reproducible example。您的网站已缩小，因此找不到有用的 HTML 或脚本
-
@mplungjan 首先，我要感谢您帮助我解决这个问题。据我所知，我用来缩小的插件是 WP Rocket。我试图通过取消选中插件设置中的框来消除缩小，但我所知道的代码中没有任何变化。看来我只能访问 .php 和 .css 文件，但不能访问 .html。
标签： javascript php html jquery css