WordPress分页导航添加输入页码跳转功能

要在WordPress分页导航中添加输入页码跳转功能，你可以自定义分页导航的HTML和JavaScript代码。以下是一种可能的方法： 修改分页导航代码： 找到显示分页导航的代码，通常是在主题的functions.php文件中或者单独的分页模板文件中。你需要找到类似previous_posts_link()和next_posts_link()的函数调用，这些函数用于显示上一页和下一页的链接。 替换为自定义代码： 替换原来的previous_posts_link()和next_posts_link()函数调用为自定义的HTML代码，添加一个输入框和跳转按钮。

<div class="pagination">
    <?php
    global $wp_query;
 
    // Get the total number of pages
    $total_pages = $wp_query>max_num_pages;
 
    // Get the current page
    $current_page = max(1, get_query_var('paged'));
 
    // Display the input box and button for page number input
    echo '<input type="text" id="page_input" placeholder="Enter page number">';
    echo '<button onclick="jumpToPage()">Go</button>';
 
    // Display the previous page link
    if ($current_page > 1) {
        echo '<a href="' . get_pagenum_link($current_page  1) . '" class="prev">Previous</a>';
    }
 
    // Display the next page link
    if ($current_page < $total_pages) {
        echo '<a href="' . get_pagenum_link($current_page  1) . '" class="next">Next</a>';
    }
    ?>
</div>

添加JavaScript函数： 在你的主题的JavaScript文件中添加以下代码，以实现跳转功能。

function jumpToPage() {
    var pageInput = document.getElementById('page_input').value;
    if (pageInput !== '') {
        var targetPage = parseInt(pageInput);
        if (!isNaN(targetPage) && targetPage > 0 && targetPage <= <?php echo $total_pages; ?>) {
            window.location.href = '<?php echo get_pagenum_link(); ?>'  targetPage;
        }
    }
}

这样，你就为WordPress分页导航添加了输入页码跳转功能。用户可以在输入框中输入想要跳转的页码，然后点击按钮进行跳转。确保将代码适应你的主题和需求，可能需要进一步的样式和逻辑调整。欢迎访问秀主题博客，分享简单实用WP教程