Question

我在将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 =＆＃34; ...＆＃34;没有添加。

如果有人可以提供帮助，我们将不胜感激！感谢

Answer 1

尝试类似：

+++ HTML MAIN FILE CONTENT +++

some html ...
{MYTAG:1}
some html ...
{MYTAG:2}
some html ...

+++ HTML其他文件内容+++

<!-- some comment -->
This is {MYTAG:2.1}

+++ PHP CODE +++

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

+++ OUTPUTS +++

some html ...
This is tag 1
some html ...
This is tag 2
some html ...

一旦掌握了它并将PHP中的HTML分离，使一切更具可读性，它将使您的生活变得更加轻松。

Answer 2

您需要计算循环中的位置，以便将活动类添加到第1个元素。这同样适用于指标。此外，您需要更改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;?>

任何人都可以帮我整合PHP与HTML？

2 个答案: