演示:
按钮之类的我没有美化,自己用css美化一下,如果要适配自己主题,需要自己把下面这个代码添加到合适的位置!
在你的主题functions.php文件中添加以下代码:
这个代码将在文章循环结束时添加一个名为”goto-page”的div元素,其中包含一个表单和一个跳转按钮。表单包含一个用于输入页数的数字输入框和一个提交按钮。它还将检查当前文章列表的总页数并将其存储在变量$total_pages中
add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles' );
// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';
function add_goto_page_button() {
global $wp_query;
$total_pages = $wp_query->max_num_pages;
if ($total_pages > 1) {
$current_page = max(1, get_query_var('paged'));
echo '<div class="goto-page">';
echo '<form>';
echo '<label for="goto-page-num">' . __('跳转:', 'textdomain') . '</label>';
echo '<input type="number" id="goto-page-num" name="goto-page-num" min="1" max="' . $total_pages . '" value="' . $current_page . '">';
echo '<button type="submit">' . __('Go', 'textdomain') . '</button>';
echo '</form>';
echo '</div>';
}
}
add_action('loop_end', 'add_goto_page_button');
在你的主题样式表中添加以下代码(一般是style.css):
这个代码将样式应用于”goto-page”元素及其子元素。
.goto-page {
margin-top: 20px;
text-align: center;
}
.goto-page form {
display: inline-block;
}
.goto-page label {
margin-right: 10px;
}
.goto-page input[type="number"] {
margin-right: 10px;
width: 50px;
text-align: center;
}
.goto-page button {
background-color: #0073aa;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
所有代码添加完成后,您的WordPress文章页面将显示一个名为”goto-page”的div元素,其中包含一个表单和一个跳转按钮。当用户输入页数并点击按钮时,将跳转到指定的页数。
来自四川© 版权声明
本资源由用户投稿上传,内容来自互联网,本站只做免费推荐用于学习分享,如有版权及其他问题,请点击《侵权处理》
THE END
- 最新
- 最热
只看作者