我在将php代码集成到HTML代码中时遇到了一些问题！有人能帮我或给我指正确的方向吗？
这是我的HTML代码：
<!-- Slider -->
<div class="carousel-inner cont-slider">
<div class="item active">
<img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
<img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
<img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
<img alt="" title="" src="http://placehold.it/600x400">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="1" data-target="#article-photo-carousel">
<img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="2" data-target="#article-photo-carousel">
<img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="3" data-target="#article-photo-carousel">
<img alt="" src="http://placehold.it/250x180">
</li>
</ol>
</div>
我的PHP代码是
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<div class="item"><img src="' . $image['image']['sizes']['large'] . '" /></div>';
}
}
?>
上面的代码是一个带有缩略图的滑块，可以作为不同幻灯片的导航。
我尝试过以下方法：
<!--Slider-->
<div class="carousel-inner cont-slider">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<div class="item"><img src="' . $image['image']['sizes']['large'] . '" /></div>';
}
}
?>
</div>
上面的工作原理很好，但它没有添加活动类
然后，对于导航指示器，我进行了以下
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
</li>
<li class="" data-slide-to="1" data-target="#article-photo-carousel">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
</li>
<li class="" data-slide-to="2" data-target="#article-photo-carousel">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
</li>
<li class="" data-slide-to="3" data-target="#article-photo-carousel">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
</li>
上面的问题是，到="…"的数据幻灯片无法添加。
如果有人能帮忙，我们将不胜感激！感谢
您需要计算循环中的位置，以便将活动类添加到第一个元素中。指标也是如此。此外，您还需要更改data-slide-to属性以匹配正确的幻灯片。
最后，使用php模板语法（if endif / foreach endforeach）并回显php而不是html通常更容易阅读：
<!-- only show slider markup if we have images-->
<?php if ($images = get_field('images', $design_id)) :?>
<!--Slider-->
<div class="carousel-inner cont-slider">
<?php
$counter=0;
foreach ($images as $image) :?>
<div class="item<?php echo $counter==0?' active':'';?>"><img src="<?php echo $image['image']['sizes']['large'];?>" /></div>
<?php
$counter++;
endforeach;
?>
</div>
<ol class="carousel-indicators">
<?php
$counter = 0;
foreach ($images as $image):?>
<li<?php echo $counter==0?' class="active"':'';?> data-slide-to="<?php echo $counter;?>" data-target="#article-photo-carousel">
<img src="<?php echo $image['image']['sizes']['large'];?>" />
</li>
<?php
$counter++;
endforeach;?>
</ol>
<?php endif;?>
尝试以下操作：
+++HTML主文件内容+++
some html ...
{MYTAG:1}
some html ...
{MYTAG:2}
some html ...
+++HTML其他文件内容+++
<!-- some comment -->
This is {MYTAG:2.1}
+++PHP代码+++
$HTML = file_get_contents($filename); // filename = location main file
$tpls['mytag:1'] = "this is tag 1";
$tpls['mytag:2'] = file_get_contents($another_htmlfile); // another_htmlfile = location html to put in mytag:1
$tpls['mytag:2.1'] = "tag 2";
foreach ($tpls as $tag => $value) {
$HTML = str_replace("{".strtoupper($tag)."}",$value,$HTML);
}
echo $HTML;
+++输出+++
some html ...
This is tag 1
some html ...
This is tag 2
some html ...
一旦你掌握了窍门，它会让你的生活变得更轻松，并将HTML从PHP中分离出来，使一切都更可读。