Οδηγός για το Styling του WP-PageNavi WordPress Plugin

Εάν δεν είστε εξοικειωμένοι με το WP-PageNavi Πρόσθετο WordPress, σας επιτρέπει να αντικαταστήσετε την κανονική προηγούμενη / επόμενη πλοήγηση με μια πιο προηγμένη, αριθμημένη πλοήγηση σελιδοποίησης. Αυτή είναι μια δυνατότητα που έχω συμπεριλάβει σε διάφορα θέματα που έχω αναπτύξει, όπως RS16, Blogwave, RS17, και Φωτεινό σημείο.


RS16 PageNavi

Σε αυτό το σεμινάριο, θα εξετάσω πώς:

  • Εγκαταστήστε το WP-PageNavi και ενσωματώστε το σωστά στο θέμα σας.
  • Δύο μέθοδοι απενεργοποίησης και / ή παράκαμψης προεπιλεγμένων στυλ προσθηκών.
  • Μια επισκόπηση της εξόδου σήμανσης HTML από το WP-PageNavi
  • Τέλος, πώς να αλλάξετε την εμφάνιση της πλοήγησης της σελίδας σας μέσω CSS

Εγκαταστήστε την προσθήκη

Έχετε δύο επιλογές όσον αφορά την εγκατάσταση του WP-PageNavi plugin.

  • Κατεβάστε το από WordPress.org, ανεβάστε το στον κατάλογο σας / wp-content / plugins / και ενεργοποιήστε το (γνωστός και ως, τον παλιομοδίτικο τρόπο).
  • Ανάλογα με τον κεντρικό υπολογιστή σας, μπορείτε επίσης να εγκαταστήσετε αυτόματα προσθήκες αναζητώντας τα στη σελίδα “Προσθήκη νέου” στην ενότητα Πρόσθετα στον πίνακα διαχείρισης του WordPress. Απλώς αναζητήστε το “pagenavi” και θα πρέπει να το βρείτε.

Εντάξει, αυτό θα ήταν πολύ εύκολο. Τώρα ήρθε η ώρα να βγάλετε τα χέρια σας λίγο βρώμικα στον κωδικό για το μέρος ολοκλήρωσης.

Ενσωμάτωση θεμάτων

Στην ενσωμάτωση θεμάτων, δεν θέλουμε ποτέ να εμφανίζονται σφάλματα εάν το WP-PageNavi δεν είναι ενεργό. Αντ ‘αυτού, θα φροντίσουμε να επιστρέψει στην παλιά πλοήγηση προηγούμενου / επόμενου στυλ. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε ένα function_exists έλεγχος υπό όρους.

Ας υποθέσουμε ότι αυτός είναι ο κανονικός κωδικός πλοήγησης του προηγούμενου / επόμενου WordPress:

<?php next_posts_link («« Παλαιότερες καταχωρήσεις ») ?>
<?php previous_posts_link («Νεότερες καταχωρίσεις» ») ?>

Θα το αλλάξουμε ως εξής:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } αλλιώς { ?>
<?php next_posts_link («« Παλαιότερες καταχωρήσεις ») ?>
<?php previous_posts_link («Νεότερες καταχωρίσεις» ») ?>
<?php} ?>

Αυτό ελέγχει βασικά για να δει αν το WP-PageNavi είναι ενεργό και αν είναι, εμφανίζει τον νέο κωδικό πλοήγησης σελίδας. Εάν όχι, επιστρέφει με χαρά στην κανονική προηγούμενη / επόμενη πλοήγηση.

Παρακαλώ σημειώστε: Ανάλογα με τον τρόπο κωδικοποίησης του CSS, ίσως θελήσετε να βάλετε το wp_pagenavi (); μέρος μέσα στο “πλοήγηση” (ή ισοδύναμο) div. Λάβετε υπόψη ότι το WP-PageNavi ξεχωρίζει μια νέα κατηγορία που ονομάζεται “wp-pagenavi”, την οποία όμως μπορούμε να χρησιμοποιήσουμε για να διαμορφώσουμε ξεχωριστά.

Παράκαμψη στυλ προσθηκών

Από προεπιλογή, το WP-PageNavi εισάγει αυτόματα ένα αρχείο CSS που ονομάζεται pagenavi-css.css από τον κατάλογο προσθηκών του στην κεφαλίδα του ιστότοπού σας. Δεν θέλουμε αυτά τα προεπιλεγμένα στυλ να παρεμβαίνουν στα δικά μας δροσερά προσαρμοσμένα στυλ, επομένως θα τα ξεφορτωθούμε εντελώς και υπάρχουν δύο απλοί τρόποι για να το κάνουμε αυτό.

  • Προσθέστε ένα αρχείο CSS στον κατάλογο θεμάτων σας – Αυτός είναι ίσως ο ευκολότερος τρόπος για να παρακάμψετε τα προεπιλεγμένα στυλ WP-PageNavi. Εάν έχετε ένα αρχείο που ονομάζεται pagenavi-css.css στον κατάλογο θεμάτων σας, το WP-PageNavi θα το χρησιμοποιήσει αντί για το προεπιλεγμένο στον κατάλογο προσθηκών.
  • Προσθέστε ένα απόσπασμα στο αρχείο functions.php – Το ακόλουθο απόσπασμα κώδικα από το οποίο πήρα Συνταγές WP θα απενεργοποιήσει εντελώς την παραπάνω συμπεριφορά και δεν θα περιλαμβάνει κανένα φύλλο στυλ από την προσθήκη (είτε το προεπιλεγμένο είτε μια παράκαμψη στον κατάλογο θεμάτων σας).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

συνάρτηση my_deregister_styles () {
wp_deregister_style («wp-pagenavi»);
}

Απλώς τοποθετήστε αυτόν τον κώδικα στο αρχείο functions.php του θέματος σας και προσθέστε τα στυλ CSS στο φύλλο στυλ του κανονικού θέματος (συνήθως style.css).

Σημείωση: Βεβαιωθείτε ότι ο κωδικός περιβάλλεται από αγκύλες όπως <?php … ?> εάν το αρχείο λειτουργιών σας είναι προς το παρόν κενό.

WP-PageNavi HTML Markup και CSS Selectors

Δείτε πώς φαίνεται η σήμανση WP-PageNavi. Στο ακόλουθο παράδειγμα, υπάρχουν τέσσερις σελίδες, αυτήν τη στιγμή στη δεύτερη σελίδα.

Προηγούμενος1
2
3
Επόμενο

Τελευταίος “

Μπορούμε να χρησιμοποιήσουμε τους ακόλουθους επιλογείς CSS για να στοχεύσουμε την παραπάνω σήμανση HTML:

  • .wp-pagenavi – Ισχύει για ολόκληρο το div, χρήσιμο για εκκαθάριση CSS, padding / margin, μεγέθη γραμματοσειράς και στυλ (έντονη, πλάγια, κ.λπ.)
  • .wp-pagenavi a – Στοχεύει όλους τους συνδέσμους μέσα στην πλοήγηση σελίδων, συμπεριλαμβανομένων των αριθμών σελίδας και του προηγούμενου / επόμενου.
  • .wp-pagenavi a.page – Στοχεύει συγκεκριμένα τους αριθμούς σελίδων
  • .wp-pagenavi a.first – Στοχεύει συγκεκριμένα τον «πρώτο» σύνδεσμο (δεν αναφέρεται παραπάνω)
  • .wp-pagenavi a.last – Στοχεύει συγκεκριμένα τον «τελευταίο» σύνδεσμο
  • .wp-pagenavi span – Στοχεύει τον τρέχοντα αριθμό σελίδας μαζί με το τμήμα επέκτασης (το πράγμα με τρεις τελείες)
  • .wp-pagenavi span.current – Στοχεύει συγκεκριμένα τον τρέχοντα αριθμό σελίδας
  • .wp-pagenavi span.extend – Στοχεύει συγκεκριμένα την επέκταση (πράγμα με τρεις τελείες)
  • .wp-pagenavi span.pages – Ειδικά στοχεύει την εμφάνιση αριθμού σελίδας (δηλ. Σελίδα 1 από 4)

Σημείωση: Οι προηγούμενοι και οι επόμενοι σύνδεσμοι από προεπιλογή, δεν έχουν τάξη CSS. Εάν θέλετε να διαφοροποιηθούν εντελώς από τους αριθμούς σελίδων και τους πρώτους / τελευταίους συνδέσμους, θα πρέπει να επαναφέρετε τυχόν στυλ που έχουν προστεθεί στον επιλογέα .wp-pagenavi. Εάν αυτό δεν έχει νόημα, ρίξτε μια ματιά στο ακόλουθο (πραγματικά απλοποιημένο) παράδειγμα.

Για παράδειγμα: Ας υποθέσουμε ότι θέλετε οι προηγούμενοι και οι επόμενοι σύνδεσμοι να είναι τολμηροί, αλλά κάθε άλλος σύνδεσμος να έχει κανονικό βάρος. Θα πρέπει να κάνετε τα εξής:

.wp-pagenavi α {font-weight: bold; } / * Μόνο προηγούμενοι και επόμενοι σύνδεσμοι * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Άλλοι σύνδεσμοι * /

Συνδυάστηκα συνδέσμους αριθμών σελίδων, τον πρώτο σύνδεσμο και τον τελευταίο σύνδεσμο σε έναν κανόνα για παράδειγμα. Φυσικά, μπορείτε να τα διαχωρίσετε και να προσθέσετε πιο συγκεκριμένα στυλ σε κάθε ένα.

Αυτό θα ήταν πολύ πιο εύκολο αν υπήρχε μια τάξη που προστέθηκε στους προηγούμενους / επόμενους συνδέσμους από προεπιλογή, αλλά δεν υπάρχει. Δεν είναι τεράστια συμφωνία, καθώς μπορείτε να τα επαναφέρετε ούτως ή άλλως.

Σημαντική ενημέρωση: Χάρη σε μια ενημέρωση από το σκαρίφημα στα σχόλια, αποδεικνύεται ότι η νεότερη έκδοση του WP-PageNavi έχει προηγούμενες / επόμενες τάξεις σε αυτές (ευχαριστώ εν μέρει για Ναι).

Μπορείτε να χρησιμοποιήσετε το .wp-pagenavi a.previouspostslink και το .wp-pagenavi a.nextpostslink για να επιλέξετε προηγούμενους και επόμενους συνδέσμους, αντίστοιχα.

Λοιπόν, σχεδόν όλα πάνω από αυτό, έως ότου η λίστα χωρίς διαχωρισμούς επιλογών δεν είναι πλέον σχετική, αλλά θα το κρατήσω μόνο και μόνο επειδή θα μπορούσε να είναι ένα χρήσιμο μάθημα για την παράκαμψη του CSS σε ορισμένες άλλες καταστάσεις. Το παρακάτω παράδειγμα CSS θα εξακολουθεί να ισχύει καθώς δεν χρησιμοποίησα αυτούς τους επιλογείς.

Ένα παράδειγμα CSS

Ακολουθεί ένα παράδειγμα ενός στυλ PageNavi που δημιούργησα από το Blogwave θέμα.

Το Blogwave ενημερώθηκε στο PageNavi

Εδώ είναι ο κωδικός που χρησιμοποίησα για να δω αυτήν την εμφάνιση, CSS πολλαπλών γραμμών είναι προαιρετικό:

.wp-pagenavi a, .wp-pagenavi span {
επένδυση: 5px; margin-right: 10 εικονοστοιχεία;
μέγεθος γραμματοσειράς: 15px; χρώμα: # 03719c; διακόσμηση κειμένου: κανένα;
περίγραμμα: 3px στερεό #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; ακτίνα περιγράμματος: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
φόντο: # 03719c;
χρώμα: #fff;
περίγραμμα: 3px στερεό #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

Και τι σημαίνει όλα αυτά:

Πρώτος κανόνας
Το εύρος .wp-pagenavi a, .wp-pagenavi επιλέγει όλα τα στοιχεία αγκύρωσης και έκτασης (σχεδόν τα πάντα) μέσα στο div .wp-pagenavi.

  • Η πρώτη γραμμή του κανόνα ορίζει μια επένδυση 5 εικονοστοιχείων, οπότε δεν θα στριφτεί στο ανοιχτό γκρι περίγραμμα (ορίζεται παρακάτω). Ορίζει επίσης ένα σταθερό περιθώριο 10px στα δεξιά κάθε στοιχείου, ώστε να υπάρχει ίση απόσταση μεταξύ τους.
  • Η δεύτερη γραμμή ορίζει μέγεθος γραμματοσειράς 15 εικονοστοιχείων, καθιστά το χρώμα του κειμένου μπλε και διασφαλίζει ότι οι σύνδεσμοι δεν έχουν υπογράμμιση.
  • Η τρίτη γραμμή θέτει ένα συμπαγές γκρι περίγραμμα 3px σε όλα. Ο κώδικας ακτίνας περιγράμματος κάνει τις γωνίες στρογγυλεμένες.

Δεύτερος κανόνας
Το .wp-pagenavi a: hover, .wp-pagenavi span.current επιλέγει το εφέ αιωρήματος συνδέσμου καθώς και τον τρέχοντα αριθμό σελίδας, αντίστοιχα.

  • Η πρώτη γραμμή ορίζει ένα σκούρο μπλε χρώμα φόντου.
  • Η δεύτερη γραμμή κάνει το κείμενο λευκό.
  • Η τρίτη γραμμή δίνει ένα ελαφρώς πιο σκοτεινό περίγραμμα.

Τρίτος κανόνας
Αυτό επιλέγει τον τρέχοντα αριθμό σελίδας (και πάλι) χωρίς να επηρεάζει επίσης το εφέ του δείκτη σύνδεσης (όπως και ο δεύτερος κανόνας). Αυτό απλώς κάνει τον τρέχοντα αριθμό σελίδας ένα έντονο βάρος γραμματοσειράς.

Ο λόγος που δεν το συμπεριέλαβα στο εφέ συνδέσμου συνδέσμου είναι επειδή έχει ανομοιόμορφο εφέ που πηγαίνει από κανονικό σε έντονο βάρος.

Σημείωση: Ανάλογα με τον τρόπο κωδικοποίησης του CSS, ίσως χρειαστεί να χρησιμοποιήσετε πιο συγκεκριμένους επιλογείς. Για παράδειγμα, εάν υπάρχουν στυλ για το #content a και το WP-PageNavi σας βρίσκεται μέσα στο div περιεχομένου, ίσως χρειαστεί να ξαναγράψετε το PageNavi CSS ως #content .wp-pagenavi a και να παρακάμψετε οποιαδήποτε άλλα λιγότερο συγκεκριμένα στυλ.

συμπέρασμα

Ξέρω ότι αυτό ήταν ένα σχετικά απλό παράδειγμα, θα μπορούσατε να έχετε πολύ πιο προηγμένους κανόνες CSS για να διαφοροποιήσετε ακόμη περισσότερο τους διάφορους συνδέσμους και άλλα στοιχεία. Ας ελπίσουμε ότι πήρατε και μερικές συμβουλές CSS.

Η προαιρετική ενσωμάτωση WP-PageNavi είναι ένα πολύ ωραίο θέμα που οι προγραμματιστές θα μπορούσαν να ενσωματώσουν στα θέματα τους. Με τη μέθοδο ενσωμάτωσης που ανέφερα παραπάνω, οι χρήστες θα μπορούσαν εύκολα να επιλέξουν εάν θα το χρησιμοποιήσουν ή όχι και θα μπορούσε να είναι μια ωραία επιλογή για πολλά ιστολόγια.

Ελπίζω να σας άρεσαν όλοι το σεμινάριο και αν έχετε αιτήματα για μελλοντικά μαθήματα WordPress ή συμβουλές CSS, ενημερώστε με στα σχόλια.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map