TablePress分页

Question

我在wordpress上使用tablepress插件，并尝试通过以下方式实现此插图：https://imgur.com/pG6eVhD。我该如何使文本“上一个”和“下一个”出现在按钮之外，并替换为文本“ X的第1页”？

这是我当前在网站https://jolly-hawking7722.on.getshifter.io/上使用以下代码的分页：

.dataTables_paginate a {
    font-family: Montserrat;
    font-size: 12px;
    text-decoration: none !important;
}

.dataTables_paginate {
    float: none;
    text-align: center;
}

.paging_simple .paginate_button.previous,
.paging_simple .paginate_button.next {
    background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
    border-radius: 15px;
}

.paging_simple .paginate_button.previous,
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next {
    padding: 10px 40px;
}

Answer 1

您可以尝试将这些自定义CSS添加到您的Wordpress网站中以获取样式。

  

替换为文本“ X的第1页”？

为此，我认为您需要修改插件的源代码？

使用这些CSS检查的结果：

.paging_simple .paginate_button.previous, .paging_simple .paginate_button.next {
    background: none !important;
}
.paging_simple .paginate_button.previous::before,
.paging_simple .paginate_button.next::after {
    font-family: 'Montserrat', 'Segoe UI', sans-serif !important;;
    line-height: 0.7em !important;
}
.paging_simple .paginate_button.previous::before {
    background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
  border-radius: 50%;
    padding: 10px !important;
}

.paging_simple .paginate_button.next::after {
        background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
  border-radius: 50%;
    padding: 10px !important;
    right: -14px !important;
}