l-1

WordPress笔记

主页/WordPress笔记/WordPress开发笔记/块样式/为WordPress区块添加自定义样式：分页页码样式定制

WordPress开发笔记

为WordPress区块添加自定义样式：分页页码样式定制

核心代码

function register_custom_pagination_style() {
    register_block_style(
        'core/query-pagination',
        array(
            'name'         => 'custom-pagination',
            'label'        => __('自定义分页', 'textdomain'),
            'inline_style' => '
                .wp-block-query-pagination.is-style-custom-pagination {
                    gap: 0.5rem !important;
                }
                .wp-block-query-pagination.is-style-custom-pagination .wp-block-query-pagination-numbers a,
                .wp-block-query-pagination.is-style-custom-pagination .wp-block-query-pagination-numbers .wp-block-query-pagination-page {
                    line-height: 1.6 !important;
                    padding: 0.2rem 0.8rem !important;
                    display: inline-block;
                }
            ',
        )
    );
}
add_action('init', 'register_custom_pagination_style');

注意：上面的 textdomain 应替换为你主题的文本域（textdomain），用于国际化翻译。如果你不确定这是什么，通常可以使用你主题的文件夹名称，或者直接改为 'your-textdomain'。

安装位置

建议将代码添加到你当前WordPress主题的 functions.php 文件中。

使用说明

代码添加并生效后：

  1. 在 古腾堡编辑器 中编辑包含查询循环（Query Loop）区块的页面或模板。
  2. 点击 查询分页区块。
  3. 在右侧边栏的 样式设置 中，你应该能看到一个名为 “自定义分页” 的样式选项。
  4. 选择它，前端就会应用你定义的CSS样式。

重要提示：确认分页区块名称

WordPress中有不同上下文的分页。

  • 用于文章列表（如博客首页、分类归档）的分页通常是 core/query-pagination 区块（查询分页区块），它通常包含在查询循环（Query Loop）区块内部。
  • 而文章内部分页（通过 <!--nextpage--> 标签分页）则使用不同的结构和样式。

如果你发现上面的代码没有生效，很可能是因为你想要样式化的分页区块不叫 core/query-pagination。

最佳确认方法：

  1. 在前端页面打开浏览器开发者工具（按F12）。
  2. 找到分页元素对应的区块。
  3. 查看其包裹元素的类名，通常类名会包含区块名称信息（例如 wp-block-xxxxxx）。通过类名可以帮你推断出正确的区块名称。

扩展：其他自定义方式

如果你需要更复杂或大量的CSS样式，也可以将样式写入主题的 style.css 文件，并在注册时只引用样式句柄（style_handle）。

// 方法二：注册样式表并在注册区块样式时引用
function enqueue_custom_pagination_styles() {
    wp_register_style(
        'my-custom-pagination-style',
        get_stylesheet_directory_uri() . '/css/custom-pagination.css'
    );

    register_block_style(
        'core/query-pagination',
        array(
            'name'         => 'custom-pagination',
            'label'        => __('自定义分页', 'textdomain'),
            'style_handle' => 'my-custom-pagination-style',
        )
    );
}
add_action('init', 'enqueue_custom_pagination_styles');

然后在主题目录下新建 /css/custom-pagination.css 文件，并将CSS代码写入该文件。这种方式更利于管理大量的CSS代码。

关键操作步骤和注意事项

为你总结了关键操作步骤和注意事项：

步骤描述注意事项
1. 添加代码将提供的PHP代码放入主题的functions.php文件中。可使用Code Snippets插件避免直接修改主题文件。
2. 确认区块确保你的分页是core/query-pagination区块。文章内分页和查询分页区块不同，前端查看类名最准确。
3. 应用样式在古腾堡编辑器中选择新注册的“自定义分页”样式。样式仅在选择后应用。
4. 调整优化根据实际效果，可能需要微调CSS中的数值或选择器。使用浏览器开发者工具查看和调试是高效的方法。

上面的代码和说明应该能帮助你实现想要的分页样式。如果效果和预期不符，最可能的原因是需要调整CSS选择器以匹配你主题的实际HTML结构。使用浏览器的检查元素功能查看分页结构，能帮你进行更精确的调整。