WordPress Pagination Without Plugin – WPTime

Απλός τρόπος για να δημιουργήσετε σελιδοποίηση WordPress χωρίς πρόσθετο! Σελιδοποίηση με αριθμούς και στυλ CSS, εύκολος τρόπος με παράδειγμα και ζωντανή επίδειξη.

Πώς να δημιουργήσετε σελιδοποίηση WordPress

Χρησιμοποιώντας the_posts_pagination() λειτουργία, θα δημιουργήσουμε σελιδοποίηση με αριθμούς. Αναζητήστε ζωντανή επίδειξη στο ιστολόγιο WP Time.

Δημιουργία σελιδοποίησης WordPress

Αρχικά, χρειαζόμαστε αυτή τη λειτουργία για να ελέγξουμε αν έχει πλοήγηση αναρτήσεων ή όχι, να αντιγράψουμε τον κωδικό και να τον επικολλήσουμε στο „functions.php“ αρχείο στο θέμα σας:

function is_posts_nav() {
    global $wp_query;
    return ($wp_query->max_num_pages > 1);
}

Τώρα ανοίξτε το δικό σας „index.php“ αρχείο (ή οποιοδήποτε αρχείο) στο θέμα σας και επικολλήστε αυτόν τον κώδικα έξω από το Βρόχος WordPress:

<?php if ( is_posts_nav() ) : ?>
     <div class="wptime-pagination clear-fix">
         <?php
             // By Qassim Hassan | wp-time.com
             global $wp_query, $paged;
             if( $paged == 0 ){
                 $get_paged = 1;
             }else{
                 $get_paged = $paged;
             }
             $pagination_args = array("mid_size" => 3, "prev_text" => "&#171;", "next_text" => "&#187;" );
             the_posts_pagination($pagination_args);
         ?>
         <div class="total-pages">Page <?php echo $get_paged; ?> of <?php echo $wp_query->max_num_pages; ?></div>
     </div>
<?php endif; ?>

Στυλ CSS σελιδοποίησης

Αντιγράψτε αυτόν τον κωδικό και επικολλήστε τον στο δικό σας „style.css“ αρχείο:

/* Style by Qassim Hassan | wp-time.com */
.clear-fix:before, .clear-fix:after{
    content: "";
    display: table;
}

.clear-fix:after{
    clear: both;
}

.wptime-pagination{
    display:block;
    line-height:1.2;
}

.wptime-pagination h2{
    display:none;
}

.nav-links{
    font-size:0;
}

.nav-links span{
    display:inline-block;
    padding:3px 6px;
    background-color:#fff;
    color:#999;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

.nav-links span:last-child{
    margin-right:0;
}

.nav-links a{
    display:inline-block;
    padding:3px 6px;
    background-color:#e3802f;
    border:1px solid #e3802f;
    color:#fff;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

.nav-links a:last-child{
    margin-right:0;
}

.nav-links span.dots{
    border:0;
}

.nav-links{
    float:left;
}

.total-pages{
    float:right;
    font-size:12px;
    line-height:22px;
}

Το αποτέλεσμα είναι:

Απολαμβάνω.