Wo verwende ich Bootstrap Wordpress Paginierung Styling

Question

Ich möchte Bootstrap CSS für Paginierung in meinem WordPress Theme verwenden, aber ich kann nicht finden, wo es anzuwenden. Ich habe in der Datei inc/template-tags.php nachgesehen und finde nicht einmal die Funktion "the_post_navigation()". Es ist verschwunden!

Answer 1

Nach viel suchen, hier ist, was ich gefunden habe.

WP hat die Paginierungsfunktionalität in den Kern verschoben. Es befindet sich in der Datei wp-includes/link-template.php. Ich habe nach "älteren Beiträgen", "nav-previous" und "nav-links" gesucht, um zu sehen, wo in der Datei diese Dinge waren und was gerade geschah. Sie sind in Zeile 2431, 2385 bzw. 2552.

Da dieses Zeug in den Kerndateien ist, ist es wahrscheinlich keine gute Idee, hier Änderungen vorzunehmen, da WP jederzeit ein Update erstellen könnte, das Ihre Änderungen überschreibt. Im Moment hat Bootstrap Klassen für die Paginierung erstellt, aber da wir sie nicht wirklich im Kern verwenden können, änderte ich die CSS der Klassen, die WP benutzt. Für die Pfeile habe ich die Pseudo-Selektoren "before" und "after" verwendet, wobei die content -Eigenschaft auf jeden Pfeil gesetzt wurde. Hier ist mein Code:

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

Hoffe, das hilft jemand da draußen.