如何在您的 WordPress 主題中添加數(shù)字分頁

時間：2023-06-07 02:57:02 | 來源：網(wǎng)站運營

時間：2023-06-07 02:57:02 來源：網(wǎng)站運營

如何在您的 WordPress 主題中添加數(shù)字分頁：您想在您的 WordPress 主題中添加數(shù)字分頁嗎？

默認(rèn)情況下，WordPress 主題會在存檔頁面底部添加下一個/上一個鏈接。挑戰(zhàn)在于這些不是非常用戶友好。這就是為什么許多流行的博客使用數(shù)字分頁來使訪問者更容易瀏覽他們的存檔頁面的原因。

在本文中，我們將向您展示如何在您的 WordPress 主題中添加數(shù)字分頁。

為什么要在您的 WordPress 主題中添加數(shù)字分頁？

大多數(shù)主題都有一個顯示帖子列表的存檔頁面。隨著您發(fā)布更多WordPress 博客文章，您的存檔頁面將跨越多個頁面。

分頁鏈接可幫助訪問者在存檔頁面之間移動，并且通常出現(xiàn)在您的WordPress 網(wǎng)站的底部。

一些WordPress 主題使用“舊帖子”和“較新帖子”鏈接進(jìn)行分頁。但是，這只能讓訪問者向前和向后移動一頁。

它也不會顯示訪問者在存檔中的當(dāng)前位置。這會使訪問者更難瀏覽您的博客存檔。

這就是數(shù)字分頁的用武之地。

數(shù)字分頁顯示一系列數(shù)字，而不是顯示“較舊”和“較新”的鏈接，讓訪問者跳轉(zhuǎn)到檔案中的特定頁面。

數(shù)字分頁也可以使用突出顯示或不同的顏色來顯示當(dāng)前頁碼，因此訪問者總是知道他們在檔案中的確切位置。

在 WPBeginner，我們使用數(shù)字分頁并以橙色突出顯示當(dāng)前頁碼。我們還提供訪問者當(dāng)前頁面周圍 4 個頁面的直接鏈接。

我們甚至有指向存檔最后一頁的鏈接，因此訪問者可以快速輕松地查看我們最早的帖子，如下圖所示。

根據(jù)我們的經(jīng)驗，與默認(rèn)的“較舊帖子”和“較新帖子”鏈接相比，這種數(shù)字分頁使您的網(wǎng)站更易于瀏覽。

如果您的 WordPress 主題有“舊”和“新”分頁，那么我們始終建議將其替換為數(shù)字分頁。

在本指南中，我們將介紹兩種在 WordPress 主題中添加數(shù)字分頁的不同方法。如果您更喜歡直接跳轉(zhuǎn)到特定方法，則可以使用下面的鏈接。

• 方法一、如何使用WP-PageNavi在WordPress中添加數(shù)字分頁
• 方法 2. 如何在您的 WordPress 主題中手動添加數(shù)字分頁

方法一：如何使用WP-PageNavi在WordPress中添加數(shù)字分頁

在 WordPress 中添加數(shù)字分頁的最簡單方法是使用WP-PageNavi插件。

要使用此插件，您仍然需要對主題代碼進(jìn)行一些更改，但它比完整代碼方法要容易得多，因為 WP-PageNavi 讓您可以完全控制站點的分頁。

您需要做的第一件事是安裝并激活WP-PageNavi 插件。有關(guān)更多詳細(xì)信息，請參閱我們關(guān)于如何安裝 WordPress 插件的分步指南。

激活插件后，轉(zhuǎn)到設(shè)置 ? PageNavi以配置插件設(shè)置。

在這里，您可以用自己的措辭替換任何默認(rèn)分頁文本。例如，您可以更改網(wǎng)站用于“第一頁”和“最后一頁”鏈接的文本。

您還可以自定義數(shù)字分頁鏈接。

在“要顯示的頁數(shù)”部分，您可以選擇插件將在您網(wǎng)站的分頁部分顯示多少頁。

默認(rèn)設(shè)置為 5，這意味著 WP-PageNavi 將顯示指向 5 個頁面的直接鏈接。

正如您在下面的屏幕截圖中看到的那樣，如果您在第 4 頁，那么您將看到指向第 2、3、4、5 和 6 頁的鏈接。

您可能希望顯示更多頁面或更少頁面。要進(jìn)行此更改，只需在“要顯示的頁數(shù)”字段中鍵入新數(shù)字即可。

默認(rèn)情況下，插件會顯示幾個較大的數(shù)字。這使訪問者只需單擊一下即可向前移動多個頁面。

默認(rèn)情況下，插件顯示三個較大的數(shù)字，每次增加 10。例如，10、20 和 30。

想要使用不同的間隔，例如 5 或 20？然后只需將新間隔鍵入“以倍數(shù)顯示更大的頁碼”字段。

每個 WordPress 站點都是不同的，因此最好嘗試不同的設(shè)置以查看哪種分頁設(shè)置最適合您。

如果您對 WP-PageNavi 設(shè)置進(jìn)行了任何更改，請不要忘記滾動到頁面底部并單擊“保存更改”按鈕。

接下來，您需要在您的 WordPress 主題中添加一個模板標(biāo)簽。為此，我們建議創(chuàng)建一個子主題，然后編輯子主題的代碼。

通過創(chuàng)建子主題，您仍然可以安全地更新您的 WordPress 主題，而不會丟失您的自定義數(shù)字分頁。要了解更多信息，請參閱我們關(guān)于如何創(chuàng)建 WordPress 子主題的分步指南。

無論您選擇編輯父主題還是子主題，都需要一個FTP 客戶端。如果這是您第一次使用 FTP，那么您可以查看我們關(guān)于如何使用 FTP 連接到您的站點的完整指南。

當(dāng)您通過 FTP 連接到您的WordPress 主機(jī)帳戶時，您就可以編輯您的 WordPress 主題代碼了。

這些步驟將根據(jù)您的 WordPress 主題而有所不同。但是，您通常需要編輯 index.php 或 archive.php 文件中的代碼，以及 WordPress 主題中的任何其他存檔模板文件。

只需打開這些文件，然后搜索 previous_posts_link 和 next_posts_link 標(biāo)簽。

如果您找到這些標(biāo)簽，請將它們替換為以下代碼片段：

1	<?php wp_pagenavi(); ?>

有些主題可能沒有 previous_posts_link 或 next_posts_link 標(biāo)簽。

如果您在主題中找不到這些標(biāo)簽，請查找 the_posts_navigation。例如，您會在二十二十一主題的 archive.php 文件中找到以下內(nèi)容：

1	<?php /*twenty_twenty_one_the_posts_navigation();*/

然后您可以繼續(xù)將這一行替換為以下代碼片段：

1	<?php wp_pagenavi(); ?>

進(jìn)行這些更改后，保存并關(guān)閉所有打開的 WordPress 主題文件。

現(xiàn)在，如果您訪問WordPress 存檔頁面，您應(yīng)該會在您的網(wǎng)站上看到新的數(shù)字分頁。

此時您可能想要更改數(shù)字分頁的顏色和樣式，以便更好地襯托您的主題或網(wǎng)站品牌。

您可以通過編輯插件的代碼來完成此操作。

但是，我們建議將 WP-PageNavi 代碼粘貼到主題的 style.css 文件中，然后在主題文件中進(jìn)行更改。這意味著您在更新 WP-PageNavi 插件時不會丟失您的自定義設(shè)置。

要復(fù)制您的插件代碼，請轉(zhuǎn)到設(shè)置?PageNavi。然后您可以找到“使用 pagenavi-css.css”部分并單擊旁邊的“否”單選按鈕。

不要忘記單擊“保存更改”按鈕來保存您的更改。

接下來，轉(zhuǎn)到插件 ? 插件文件編輯器。

然后您可以打開“選擇要編輯的插件”下拉菜單并選擇“WP-Page Navi”。之后，您就可以點擊“選擇”了。

在右側(cè)菜單中，單擊 pagenavi-css.css 文件。

然后，繼續(xù)復(fù)制此文件中的所有代碼。

接下來，只需轉(zhuǎn)到外觀 ? 主題文件編輯器。

在右側(cè)菜單中，單擊主題的 style.css 文件。

您現(xiàn)在可以將 pagenavi-css.css 代碼粘貼到主題的 style.css 文件中，然后開始進(jìn)行更改。

讓我們看一個例子。這是您可以添加到主題的 style.css 文件中的數(shù)字分頁代碼的修改版本：

wp-pagenavi { clear: both;} .wp-pagenavi a, .wp-pagenavi span { color: #FFF; text-decoration: none; background-color:#6FB7E9; border: 1px solid #B2D1E5; padding: 5px 5px; margin: 2px;} .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color: #E9F2F9; background-color:#6FB7E9;} .wp-pagenavi span.current { font-weight: bold; background-color:#3C8DC5;}

在下圖中，您可以看到此數(shù)字分頁在您的網(wǎng)站上的外觀。

值得嘗試不同的風(fēng)格，看看哪種風(fēng)格在您的 WordPress 網(wǎng)站上看起來最好。

當(dāng)您對數(shù)字分頁的外觀感到滿意時，單擊“更新文件”按鈕以保存您的更改。

方法 2. 如何在您的 WordPress 主題中手動添加數(shù)字分頁

另一種選擇是使用代碼在 WordPress 主題中手動添加數(shù)字分頁。

許多 WordPress 主題帶有內(nèi)置的“較舊”和“較新”鏈接，或默認(rèn)的數(shù)字分頁。例如，流行的Astra 主題會自動將其自己的數(shù)字分頁添加到您的存檔頁面，如下圖所示。

您可以使用此方法自定義主題的內(nèi)置分頁。例如，您可以更改樣式以更好地適合您的網(wǎng)站。

要手動添加數(shù)字分頁，請打開主題的functions.php 文件。在這里，您可以使用 FTP 客戶端或WordPress 托管cPanel 的文件管理器。如果您使用的是 FTP，那么您可以查看我們關(guān)于如何使用 FTP 連接到您的站點的完整指南。

成功連接到站點后，打開 functions.php 文件并添加以下代碼：

function wpbeginner_numeric_posts_nav() { if( is_singular() ) return; global $wp_query; /** Stop execution if there's only 1 page */ if( $wp_query->max_num_pages <= 1 ) return; $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1; $max = intval( $wp_query->max_num_pages ); /** Add current page to the array */ if ( $paged >= 1 ) $links[] = $paged; /** Add the pages around the current page to the array */ if ( $paged >= 3 ) { $links[] = $paged - 1; $links[] = $paged - 2; } if ( ( $paged + 2 ) <= $max ) { $links[] = $paged + 2; $links[] = $paged + 1; } echo '<div class="navigation"><ul>' . "/n"; /** Previous Post Link */ if ( get_previous_posts_link() ) printf( '<li>%s</li>' . "/n", get_previous_posts_link() ); /** Link to first page, plus ellipses if necessary */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( 1 ) ), '1' ); if ( ! in_array( 2, $links ) ) echo '<li>…</li>'; } /** Link to current page, plus 2 pages in either direction if necessary */ sort( $links ); foreach ( (array) $links as $link ) { $class = $paged == $link ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( $link ) ), $link ); } /** Link to last page, plus ellipses if necessary */ if ( ! in_array( $max, $links ) ) { if ( ! in_array( $max - 1, $links ) ) echo '<li>…</li>' . "/n"; $class = $paged == $max ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Next Post Link */ if ( get_next_posts_link() ) printf( '<li>%s</li>' . "/n", get_next_posts_link() ); echo '</ul></div>' . "/n"; }

此代碼獲取頁數(shù)，準(zhǔn)備好在您的 WordPress 主題中顯示。

接下來的步驟將根據(jù)您的主題而有所不同。

如果您的主題沒有內(nèi)置某種形式的默認(rèn)分頁，那么您只需在 index.php、archive.php、category.php 或您想要顯示數(shù)字分頁的任何其他頁面中添加以下模板標(biāo)簽.

1	<?php wpbeginner_numeric_posts_nav(); ?>

請注意，您添加此代碼的位置將影響數(shù)字分頁在您網(wǎng)站上的顯示位置。

通常，您會希望在存檔頁面的底部顯示分頁，因此您通常會希望將模板標(biāo)簽添加到頁腳代碼中。

您的主題是否已經(jīng)有某種形式的分頁，例如“舊帖子”和“較新帖子”鏈接？

在這種情況下，您需要找到分頁代碼并將其替換為上面的代碼片段。

例如，Ashe 是最好的免費 WordPress 博客主題之一，并且已經(jīng)將“第一頁”和“最后一頁”分頁鏈接添加到您的存檔頁面。

要用數(shù)字分頁替換這些內(nèi)置鏈接，您需要編輯主題的 templates/grid.php 和 templates/blog-pagination.php 文件。

在每個文件中，只需找到以下部分：

1	<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

然后您可以繼續(xù)將這一行替換為以下代碼片段：

1	<?php wpbeginner_numeric_posts_nav(); ?>

添加代碼后，不要忘記保存更改。

下一步是設(shè)置自定義數(shù)字分頁的樣式。

為了幫助訪問者瀏覽檔案，我們將用不同的顏色突出顯示當(dāng)前頁碼。為此，請打開主題的 style.css 文件，然后將以下代碼粘貼到該文件中：

.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled { color: #fff; text-decoration:none;} .navigation li { display: inline;} .navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled { background-color: #6FB7E9; border-radius: 3px; cursor: pointer; padding: 12px; padding: 0.75rem;} .navigation li a:hover,.navigation li.active a { background-color: #3C8DC5;}

畢竟，只需單擊“更新文件”按鈕即可保存您的更改。

現(xiàn)在，如果您訪問存檔頁面，您將在您的網(wǎng)站上看到實時的數(shù)字分頁。