如何使用縮略圖添加 WordPress Next Previous Post
已發表: 2019-09-12
向您的 WordPress 網站添加分頁應該不是一個複雜的過程。 實際上，只需很少的編程知識，您就可以輕鬆地將默認帖子分頁更改為編號 WordPress 分頁，如我之前關於數字 WordPress 分頁的教程中所示。 今天，我希望我們專注於為單個帖子創建分頁，其中包含您可能在多個雜誌 WordPress 主題中遇到的特色圖像。
根據主題的設計，通常會在 WordPress 下一篇文章中看到帶有縮略圖和標題的單個文章下方或頂部的標題。
WordPress Next Previous Post with Thumbnail Example
例如，在最暢銷的 WordPress 雜誌主題之一 -報紙中，您可以看到單個帖子有一個帶有縮略圖的分頁，如下圖所示：
上圖是 WordPress 單篇文章的一個很好的例子，其中下一個頁面有縮略圖。
在本 WordPress 開發教程結束時，您應該輕鬆地將我們創建的代碼添加到您的 WordPress 插件或主題中，並顯示 WordPress 下一篇上一篇文章的縮略圖，如報紙 WordPress 主題中所示。
下一頁 上一頁 WordPress 分頁代碼
簡而言之，您需要擁有的兩個重要代碼片段是一個獲取上一個或下一個帖子，另一個是檢索特定帖子的特色圖像（下一個或上一個）
為了在本教程中進行說明，我們將使用27 個默認的 WordPress 主題，這是我最喜歡的主題，原因有很多； 原因之一是它的簡單性。
此代碼肯定適用於所有其他 WordPress 主題或插件。 因此，首先，我們安裝並激活了主題，並發布了一個示例單篇文章。
入門
正如您在下圖中如箭頭所示看到的那樣，帖子下方沒有下一個先前帖子的分頁。 在本節中，我們將在下一篇文章中添加帶有縮略圖分頁的 WordPress。
第一步是在您的主題中找到文件single.php ，因為這是我們將在 the_content() 下方和循環內添加代碼的文件。
找到 single.php 文件後，下一步是創建兩個變量$next和$prev分配給兩個 WordPress 核心函數； get_next_post() 和 get_previous_post() 分別如下面的代碼片段所示：
<?php $prev = get_previous_post(); $next = get_next_post(); ?>
這兩個功能的工作方式相似； 上一個函數檢索上一篇文章，而下一個函數將下一篇文章作為objects檢索。
為了演示，我發布了三個帖子，如下圖所示：
現在我們需要獲取上一篇文章的標題和縮略圖，並確保我們將它們包裝在帶有相應永久鏈接a href tag中，這有助於使鏈接可點擊：
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
</a>接下來，我們獲取下一篇文章的標題和縮略圖，並使用 href 標籤和下一篇文章的永久鏈接作為 href 標籤值進行包裝：
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
</a>到目前為止，我們已經有了可以使用縮略圖顯示 WordPress 下一篇上一篇文章的代碼。 到此步驟的完整代碼應如下所示：
<?php
$prev = get_previous_post();
$next = get_next_post();
// 上一篇文章的標題和縮略圖
?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
</a>
<?php
// 下一篇文章的標題和縮略圖
?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
</a>
<?php 將此代碼添加到single.php文件並確保使用適當的 PHP 開始和結束標記轉義 HTML並更新文件，然後檢查前端中的更改。
您應該會看到上一篇文章和下一篇文章的縮略圖，其標題如下圖所示：
樣式化 WordPress 上一篇 下一篇
現在我們需要引入兩個divs並添加適當的樣式以確保我們在每一側浮動每個帖子。 我們可以通過用兩個divs包裝代碼來實現這一點，如下所示：
<div class="clearfix">
<?php
$prev = get_previous_post();
$next = get_next_post();
// 上一篇文章的標題和縮略圖
?>
<div class="post-box prevPost">
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
</a>
</div>
<?php
// 下一篇文章的標題和縮略圖
?>
<div class="post-box nextPost">
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
</a>
</div>
</div>
<?php添加 div 的類後，我們現在可以使用 CSS 應用樣式，如下所示：
* {
box-sizing：邊框框；
}
.郵箱{
向左飄浮;
寬度：50%；
}
.clearfix::之後{
內容： ””;
明確：兩者；
顯示：表格；
}
.post-box.prevPost img {
最大寬度：40%；
高度：自動；
}
.post-box.nextPost img {
最大寬度：40%；
高度：自動；
}結論
使用此代碼，您可以使用縮略圖輕鬆添加 WordPress 下一個上一個帖子分頁。 您還可以添加更好的樣式來改善單個帖子分頁的視覺呈現。 添加 CSS 代碼後，您應該會看到兩個帖子的佈局如下圖所示
通過添加條件語句來檢查縮略圖或帖子是否存在也很重要。 例如，您可以使用如下所示的條件包裝$prev部分：
<?php
$prev_ = get_previous_post();
if ( !empty( $prev ) ): ?>
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters( 'the_title', $prev_post->post_title ); ?>
</a>
<?php endif; ?>代碼驗證是WordPress 開發的重要組成部分，不容忽視。 我希望這篇文章能給您一些見解，您現在可以在您的網站或主題上添加帶有縮略圖的單個帖子分頁。 如果您想學習如何創建 WordPress 博客分頁，可以查看之前的教程——如何在 WordPress 中創建數字分頁。
如果您需要更多幫助，您可以從WordPress 主題開發人員那裡獲得幫助，特別是對於那些不了解代碼如何工作的用戶。 您也可以聯繫我尋求幫助。