Question

我遇到过这个网站：http://www.jfletcherdesign.com。

我想复制主页如何显示所有帖子的精选图片，以及当您点击图片时，您会在特定帖子中深入查看。我还想复制一下如何使用图像向前和向下点击一个类别中的相应帖子。

有人可以指出我正确的方向来设置此功能吗？

如果您可以指向我在其类别页面上用于翻转效果的jQuery插件，则可获得奖励积分。

谢谢！

Answer 1

该网站基于WPShower的Imbalance主题。这是一个免费主题，因此您可以下载它并查看所有源代码。这应该回答你的第一个问题。

要获取充当上一篇和下一篇文章分页的图片，您只需使用get_adjacent_post function即可。您可以使用类似下面的代码来设置它以链接图像。将它粘贴在single.php的底部或任何你想要分页的地方。

<?php
    $prev_post = get_adjacent_post(true, '', true);
    $next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
    <a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
    <a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>

现在进行jQuery翻转，非常简单：

$(document).ready(function() {
    $('.article').mouseenter(function() {
        $(this).find('.article-over').show();
    });
    $('.article').mouseleave(function() {
        $(this).find('.article-over').hide();
    });
    $('.article').hover(
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 0.3);
        },
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 1);
        }
    );
});

对主题生成的以下HTML标记起作用：

<li class="article li_col1" id="post-1234">

    <div class="preview">
        <a href="http://www.site.com/2013/01/post/"><img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post"></a>
    </div>

    <div class="article-over">
        <h2><a href="http://www.site.com/2013/01/post/" title="Cool Post">Cool Post</a></h2>
        <div class="the-excerpt">
            <p>Blah blah blah this is a post excerpt...</p>
        </div>
    </div>

</li>

所以基本上当你第一次去网站时，除了第一个以外的所有项目，你看到的只是保存类别图像的.preview div。 .article-over div绝对位于.preview div上，但样式为display:none，因此您无法看到它。

当触发mouseenter事件时，.article-over div将通过show()显示，.preview内的图像淡出为0.3的不透明度，让您可以看到{{1} div背后的黑色背景。当鼠标离开时，隐藏.preview，.article-over图像淡化为完全不透明。

如果你仍然被卡住，请告诉我，我会尝试进一步解释。

WordPress：设置一个页面，使用帖子图像链接到帖子类别

1 个答案: