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

我发现了这个网站：

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

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

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

谢谢

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

要获取用作上一篇和下一篇文章分页的图像，您只需使用。您可以使用下面的代码将其设置为链接图像。将其粘贴在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; ?>

它作用于主题生成的以下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上方，但它的样式为

显示：none

，因此您无法看到它

当触发mouseenter事件时，将通过

show（）

显示

.article over

div，并且

.preview

中的图像将淡出为0.3的不透明度，允许您查看其后面的

.preview

div的黑色背景。当鼠标离开时，

.article over

被隐藏，并且

.preview

图像淡入完全不透明状态

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

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