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分页导航添加了输入页码跳转功能。用户可以在输入框中输入想要跳转的页码,然后点击按钮进行跳转。确保将代码适应你的主题和需求,可能需要进一步的样式和逻辑调整。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?