也想出现在这里?联系我们

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

2024.02.12 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress分页导航中添加输入页码跳转功能,你可以自定义分页导航的HTML和JavaScript代码。以下是一种可能的方法:

  1. 修改分页导航代码:
    找到显示分页导航的代码,通常是在主题的functions.php文件中或者单独的分页模板文件中。你需要找到类似previous_posts_link()next_posts_link()的函数调用,这些函数用于显示上一页和下一页的链接。

  2. 替换为自定义代码:
    替换原来的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>
  1. 添加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分页导航添加了输入页码跳转功能。用户可以在输入框中输入想要跳转的页码,然后点击按钮进行跳转。确保将代码适应你的主题和需求,可能需要进一步的样式和逻辑调整。

有用0
  • 2024.02.12初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧