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

Question

我发现了这个网站：http://www.jfletcherdesign.com.

我想复制一下主页上显示他所有帖子的特色图片的方式，以及当你点击你在特定帖子中深入查看的图片时显示的方式。我还想复制一下你是如何在一个类别中点击“前进”和“下一步”并将一个图像添加到相应的帖子中的。

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

如果你能给我指出jQuery插件的话，我会得到额外的积分，该插件在他的分类页面上用于滚动效果。

谢谢

Answer 1

该网站是基于不平衡的主题由WP淋浴。这是一个免费的主题，所以你可以下载它，并检查出所有的源代码。这应该回答了你的第一个问题。

要获得作为上一篇和下一篇文章分页的图像，您所需要做的就是使用get_adjacent_post函数。您可以使用类似下面的代码来设置它以链接图像。把它放在你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>

因此，基本上，当您第一次访问该站点时，除了第一个项目之外，您看到的所有项目都是。预览保存类别图像的div。。文章在上div绝对位于上方。预览div，但样式为display:none，因此您无法看到它。

当触发mouseenter事件时，。通过show（）和中的图像显示文章上方的div。预览淡出为0.3的不透明度，允许您查看。预览它后面的div的黑色背景。当鼠标离开时，。文章上方的被隐藏，。预览图像淡入完全不透明状态。

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