l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中为上一篇和下一篇文章链接添加缩略图

如何在 WordPress 中为上一篇和下一篇文章链接添加缩略图

Bug编译狮

Bug编译狮

在WordPress中为上一篇和下一篇文章的链接添加缩略图，可以通过以下步骤实现：

  1. 首先，在functions.php文件中添加如下代码：

    function add_post_thumbnail_to_previous_next_posts($atts) {
$atts = shortcode_atts(array(
    'post_type' => 'post',
    'post_id'   => '',
    'class'     => ''
), $atts, 'previous_next_posts');

if (empty($atts['post_id'])) {
    return '';
}

global $post;
$prev_id = get_previous_post($post->ID);
$next_id = get_next_post($post->ID);

if ($prev_id && !is_null($prev_id)) {
    echo '<a href="' . esc_url(get_permalink($prev_id)) . '" class="prev-post">';
    the_post_thumbnail('thumbnail', array('class' => 'post-thumbnail'));
    echo '</a>';
}

if ($next_id && !is_null($next_id)) {
    echo '<a href="' . esc_url(get_permalink($next_id)) . '" class="next-post">';
    the_post_thumbnail('thumbnail', array('class' => 'post-thumbnail'));
    echo '</a>';
}

return '';
}
add_shortcode('previous_next_posts', 'add_post_thumbnail_to_previous_next_posts');

  2. 然后，在您的页面或帖子内容区域插入短代码：

    [previous_next_posts]

  3. 为了使这个功能更直观，您可以将其添加到主题的模板文件（如single.php）中，这样它就会自动出现在每个单页中。

  4. 使用效果：当您访问某个帖子时，左侧会显示上一篇文章的标题、图片和摘要，右侧则显示下一篇文章的标题、图片和摘要。这不仅增加了网站的整体美观度，也方便用户快速找到相关的内容。

请注意，这段代码假设您已经安装了WordPress并熟悉基本的HTML和CSS知识。如果对这些概念不熟悉，建议您先学习一下基础教程。此外，由于这是一个简单的功能，如果您希望进一步自定义样式或添加更多的功能，请考虑使用第三方插件来扩展WordPress的功能。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中，要为上一篇和下一篇文章链接添加缩略图，你可以使用以下步骤：

步骤 1: 创建一个包含缩略图的页面

首先，在WordPress的后台管理界面中创建一个新的页面或模板文件。

步骤 2: 编辑页面布局

打开新创建的页面，找到并编辑<div class="entry-content">标签内的内容。在这个部分，你会看到一些默认设置，比如标题、作者等信息。在这里，你可以插入一张图片作为缩略图。

例如：

<div class="entry-content">
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
    <img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>" alt="<?php the_title(); ?>">
</div>

这段代码将显示文章的标题以及相应的缩略图。

步骤 3: 在文章内容区域添加链接

接下来，你需要在文章的内容部分添加一个链接到该文章的前一篇和后一篇。这可以通过使用嵌套列表或者自定义HTML来实现。

使用嵌套列表

<ul>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php endwhile; endif; ?>
</ul>

这个例子会在每个文章的标题后面添加一个链接，指向其对应的上一篇文章。

使用自定义HTML

如果你希望用户可以点击链接直接跳转到相关文章，可以使用以下方法：

<a href="<?php the_permalink(); ?>" class="prev-post"><i class="fa fa-chevron-left"></i></a>
<a href="<?php next_post_link(); ?>" class="next-post"><i class="fa fa-chevron-right"></i></a>

这里，the_permalink()函数获取当前文章的URL，next_post_link()则返回下一个文章的链接。

步骤 4: 添加自定义CSS样式

为了使链接看起来更加美观，可以在HTML头部添加自定义CSS样式。例如：

a {
    color: #007BFF;
}

.prev-post, .next-post {
    text-decoration: none;
}

这些样式可以使链接更具有吸引力，同时也符合SEO标准。

步骤 5: 验证功能

最后，确保你的链接能够正确地跳转到相关的文章。可以使用浏览器的开发者工具查看链接是否正常工作。

通过以上步骤，你应该能够在WordPress中成功为文章添加上一篇和下一篇的文章链接，并添加相应的缩略图了。

,

最新更新