演示:
按钮之类的我没有美化,自己用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元素,其中包含一个表单和一个跳转按钮。当用户输入页数并点击按钮时,将跳转到指定的页数。
© 版权声明
本站提供的资源转载自国内外各大资源站和网络,仅供学习体验;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该资源内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!请点击《侵权处理》
THE END
- 最新
- 最热
只看作者