【发布时间】:2016-09-02 19:33:02
【问题描述】:
我想在我的 WordPress 主题中使用 Bootstrap 的 css 进行分页,但我找不到应用它的地方。我查看了 inc/template-tags.php 文件,我什至找不到“the_post_navigation()”函数。它消失了!
【问题讨论】:
标签: css wordpress twitter-bootstrap pagination
我想在我的 WordPress 主题中使用 Bootstrap 的 css 进行分页,但我找不到应用它的地方。我查看了 inc/template-tags.php 文件,我什至找不到“the_post_navigation()”函数。它消失了!
【问题讨论】:
标签: css wordpress twitter-bootstrap pagination
经过大量搜索,这是我找到的。
WP 将分页功能移至核心。它在 wp-includes/link-template.php 文件中。我搜索了“older posts”、“nav-previous”和“nav-links”,以查看这些内容在文件中的位置以及发生了什么。它们分别位于第 2431、2385 和 2552 行。
由于这些内容位于核心文件中,因此在此处进行更改可能不是一个好主意,因为 WP 可能会随时生成更新,从而覆盖您的更改。现在 Bootstrap 已经创建了类来处理分页,但由于我们不能在核心中真正使用它们,所以我所做的是更改 WP 使用的类的 css。对于箭头,我使用了伪选择器“之前”和“之后”,并将内容属性设置为每个箭头。这是我的代码:
/*--------------------------------------------------------------
# Bootstrap fixes due to WP Core Changes
--------------------------------------------------------------*/
/* Bootstrap wants to use .pager and .previous / .next classes
but WP has moved that pagination functionality to the core.
So instead of using BS directly, we applied the BS css to
the WP classes. This should make it so that future updates
to WP won't override this css.
*/
/* Centers links in container. Off by default */
/*.nav-links {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}*/
.nav-previous, .nav-next {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
/* Aligns links to the left and right of the container */
.nav-previous {
float: left;
}
.nav-next {
float: right;
}
.nav-previous:focus, .nav-next:focus,
.nav-previous:hover, .nav-next:hover {
background-color: #eee;
}
.nav-previous a:focus, .nav-next a:focus,
.nav-previous a:hover, .nav-next a:hover {
text-decoration: none;
}
/* Adds arrows to the left and right respectively */
.nav-previous a::before {
content: "\2190\00a0";
}
.nav-next a::after {
content: "\00a0\2192";
}
希望这对那里的人有所帮助。
【讨论】: