Question

所以我目前正在使用以下脚本（效果3）： http://tympanus.net/codrops/2013/06/18/caption-hover-effects/

我正在尝试将这些框显示在我的博客内容列表中，该列表目前使用内容功能。我已经包含了对此效果的演示文件的CSS和JS的调用;

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>

我已将此添加到index.php文件而不是标题中，因为我只需要在此页面上。目前，我有这个，所以只有博客列表的特色图像/嵌入节目。我删除了任何wordpress标题和摘录标签，因为我想在添加内容之前专注于使其工作。因此，目前，它只是演示中使用的代码的副本，并结合了博客列表本身的代码。这里显示的是图片文章。

<ul class="grid cs-style-3">
  <li>
    <figure>        
    <?php
    }

    if ($format === 'image') { ?>

      <?php if (has_post_thumbnail()) : ?>

        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >                                  
          <?php the_post_thumbnail(); ?>
        </a>

        <figcaption>
          <h3>Settings</h3>
          <span>Jacob Cummings</span>
          <a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
        </figcaption>
    </figure>

这是我有点迷失的地方，也许这可归结为同一页面上的太多脚本，因为博客列表本身使用webkit编码来显示。但是我完全按照演示中的方式复制了所有代码，减去了图片部分，而不是我的博客代码。但无论我尝试什么，它只是显示没有效果和图像下。我完全迷失了在这里做什么以及出于什么想法。

我试过搜索，但没有任何帮助。所以我认为这更多的是我已经拥有的编码，因为主题不能很好地使用这段代码。我已经设法以相同的方式添加其他部分，但没有获得额外的代码来处理主题函数本身。

您可以在任何图片下看到我所指的页面以及它出错的位置：

http://outside.hobhob.uk/test/blog/

很高兴提供额外的其他内容。

完整代码：http://hostcode.sourceforge.net/view/6152

Answer 1

您发布的代码存在一些问题，请尝试将其替换为此。我刚刚删除了我在评论中讨论的brachet，并在块的末尾添加了endif; s。我仍然不知道$ format变量是否在代码中的其他位置正确填充，因此可能存在其他问题。

<figure>        
    <?php if ($format === 'image') : ?>
        <?php if (has_post_thumbnail()) : ?>

            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >                                  
                <?php the_post_thumbnail(); ?>
            </a>
            <figcaption>
                <h3>Settings</h3>
                <span>Jacob Cummings</span>
                <a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>

            </figcaption>
        <?php endif; ?>
    <?php endif; ?>    
</figure>

在wordpress主题的翱翔的盒与冲突的代码

1 个答案: