{"id":1959,"date":"2025-06-10T18:20:29","date_gmt":"2025-06-10T10:20:29","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/1959.html"},"modified":"2025-06-10T18:20:29","modified_gmt":"2025-06-10T10:20:29","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e4%b8%ba%e4%b8%8a%e4%b8%80%e7%af%87%e5%92%8c%e4%b8%8b%e4%b8%80%e7%af%87%e6%96%87%e7%ab%a0%e9%93%be%e6%8e%a5%e6%b7%bb%e5%8a%a0%e7%bc%a9%e7%95%a5%e5%9b%be","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/1959.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u4e3a\u4e0a\u4e00\u7bc7\u548c\u4e0b\u4e00\u7bc7\u6587\u7ae0\u94fe\u63a5\u6dfb\u52a0\u7f29\u7565\u56fe"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

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

    \n
  1. \n

    首先，在functions.php<\/code>文件中添加如下代码：<\/p>\n

    function add_post_thumbnail_to_previous_next_posts($atts) {\n$atts = shortcode_atts(array(\n    'post_type' => 'post',\n    'post_id'   => '',\n    'class'     => ''\n), $atts, 'previous_next_posts');\n\nif (empty($atts['post_id'])) {\n    return '';\n}\n\nglobal $post;\n$prev_id = get_previous_post($post->ID);\n$next_id = get_next_post($post->ID);\n\nif ($prev_id && !is_null($prev_id)) {\n    echo '<a href=\"' . esc_url(get_permalink($prev_id)) . '\" class=\"prev-post\">';\n    the_post_thumbnail('thumbnail', array('class' => 'post-thumbnail'));\n    echo '<\/a>';\n}\n\nif ($next_id && !is_null($next_id)) {\n    echo '<a href=\"' . esc_url(get_permalink($next_id)) . '\" class=\"next-post\">';\n    the_post_thumbnail('thumbnail', array('class' => 'post-thumbnail'));\n    echo '<\/a>';\n}\n\nreturn '';\n}\nadd_shortcode('previous_next_posts', 'add_post_thumbnail_to_previous_next_posts');<\/code><\/pre>\n<\/li>\n
  2. \n
    然后，在您的页面或帖子内容区域插入短代码：<\/p>\n
    [previous_next_posts]<\/code><\/pre>\n<\/li>\n
  3. \n
    为了使这个功能更直观，您可以将其添加到主题的模板文件（如single.php）中，这样它就会自动出现在每个单页中。<\/p>\n<\/li>\n
  4. \n
    使用效果：当您访问某个帖子时，左侧会显示上一篇文章的标题、图片和摘要，右侧则显示下一篇文章的标题、图片和摘要。这不仅增加了网站的整体美观度，也方便用户快速找到相关的内容。<\/p>\n<\/li>\n<\/ol>\n
    请注意，这段代码假设您已经安装了WordPress并熟悉基本的HTML和CSS知识。如果对这些概念不熟悉，建议您先学习一下基础教程。此外，由于这是一个简单的功能，如果您希望进一步自定义样式或添加更多的功能，请考虑使用第三方插件来扩展WordPress的功能。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
    黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    \r\n
    \r\n
    在WordPress中，要为上一篇和下一篇文章链接添加缩略图，你可以使用以下步骤：<\/p>\n
    步骤 1: 创建一个包含缩略图的页面<\/h3>\n
    首先，在WordPress的后台管理界面中创建一个新的页面或模板文件。<\/p>\n
    步骤 2: 编辑页面布局<\/h3>\n
    打开新创建的页面，找到并编辑<div class=\"entry-content\"><\/code>标签内的内容。在这个部分，你会看到一些默认设置，比如标题、作者等信息。在这里，你可以插入一张图片作为缩略图。<\/p>\n
    例如：<\/p>\n
    <div class=\"entry-content\">\n    <h2><?php the_title(); ?><\/h2>\n    <?php the_content(); ?>\n    <img src=\"<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>\" alt=\"<?php the_title(); ?>\">\n<\/div><\/code><\/pre>\n
    这段代码将显示文章的标题以及相应的缩略图。<\/p>\n
    步骤 3: 在文章内容区域添加链接<\/h3>\n
    接下来，你需要在文章的内容部分添加一个链接到该文章的前一篇和后一篇。这可以通过使用嵌套列表或者自定义HTML来实现。<\/p>\n
    使用嵌套列表<\/h4>\n
    <ul>\n    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>\n        <li><a href=\"<?php the_permalink() ?>\"><?php the_title(); ?><\/a><\/li>\n    <?php endwhile; endif; ?>\n<\/ul><\/code><\/pre>\n
    这个例子会在每个文章的标题后面添加一个链接，指向其对应的上一篇文章。<\/p>\n
    使用自定义HTML<\/h4>\n
    如果你希望用户可以点击链接直接跳转到相关文章，可以使用以下方法：<\/p>\n
    <a href=\"<?php the_permalink(); ?>\" class=\"prev-post\"><i class=\"fa fa-chevron-left\"><\/i><\/a>\n<a href=\"<?php next_post_link(); ?>\" class=\"next-post\"><i class=\"fa fa-chevron-right\"><\/i><\/a><\/code><\/pre>\n
    这里，the_permalink()<\/code>函数获取当前文章的URL，next_post_link()<\/code>则返回下一个文章的链接。<\/p>\n
    步骤 4: 添加自定义CSS样式<\/h3>\n
    为了使链接看起来更加美观，可以在HTML头部添加自定义CSS样式。例如：<\/p>\n
    a {\n    color: #007BFF;\n}\n\n.prev-post, .next-post {\n    text-decoration: none;\n}<\/code><\/pre>\n
    这些样式可以使链接更具有吸引力，同时也符合SEO标准。<\/p>\n
    步骤 5: 验证功能<\/h3>\n
    最后，确保你的链接能够正确地跳转到相关的文章。可以使用浏览器的开发者工具查看链接是否正常工作。<\/p>\n
    通过以上步骤，你应该能够在WordPress中成功为文章添加上一篇和下一篇的文章链接，并添加相应的缩略图了。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Bug编译狮 在WordPress中为上一篇和下一篇文章的链接&#2..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[52,53],"tuisongtax":[],"class_list":["post-1959","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-ztjc","tag-ztmbpzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=1959"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1959\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=1959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=1959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=1959"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=1959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}