我在哪里应用Bootstrap Wordpress分页样式

时间:2016-05-07 22:05:01

标签: css wordpress twitter-bootstrap pagination

我想在我的WordPress主题中使用Bootstrap的css进行分页,但我无法找到应用它的位置。我查看了inc / template-tags.php文件,我甚至找不到" the_post_navigation()"功能。它消失了!

1 个答案:

答案 0 :(得分:1)

经过大量的搜索,这就是我找到的。

WP将分页功能移至核心。它位于wp-includes / link-template.php文件中。我搜索了“旧帖子”," nav-previous"和" nav-links"看看文件中的这些东西是什么以及发生了什么。它们分别位于2431,2385和2552行。

由于这些内容存在于核心文件中,因此在此处进行更改可能不是一个好主意,因为WP可以随时生成更新,以覆盖您的更改。现在Bootstrap已经创建了用于处理分页的类,但由于我们无法在核心中真正使用它们,我所做的就是更改WP使用的类的CSS。对于箭头,我使用伪选择器“之前”和“之后”,并将content属性设置为每个箭头。这是我的代码:

/*--------------------------------------------------------------
# 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";
}

希望这可以帮助那些人。