WordPress添加一个跳转到指定页数文章的按钮

演示:

火狐截图_2023-03-16T02-02-07.920Z

按钮之类的我没有美化,自己用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
喜欢就支持一下吧
点赞11 分享
发表回复 共1条

请登录后发表评论