Wordpress

Question

我尝试尽可能简单地编写我的 wordpress 主题代码，但我真的不明白为什么我无法使用 Featherlight.js（http://noelboss.github.io/featherlight/)

这是我的在线页面http://www.skuar.com

这是我的single.php代码，它只显示图像自定义字段

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

    <?php endwhile; ?>
    <?php endif; ?>

这是wp循环内容

<div id="post">
    <a href ="<?php the_permalink(); ?>">

    <div class="img" href="<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>" data-featherlight="image">
<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>
    </div>

    </a>

</div>

我只想在灯箱中打开图片... 这有意义吗？

谢谢！

Answer 1

在您的代码中使用无效的双引号。试试这个代码：

    <div id="post">
        <a href ="<?php the_permalink(); ?>">
            <div class="img" href="<?php  $image = get_field('image');
                if( !empty($image) ): ?>
                <?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
                <?php endif; ?>" data-featherlight="image">
            </div>
        </a>
    </div>

Wordpress - 使用 Featherlight.js 在模式框中打开高级自定义字段图像

Wordpress - Open an Advanced Custom Field image in modal box using Featherlight.js

lightbox

advanced-custom-fields

featherlight.js