מדריך לעיצוב התוסף WP-PageNavi WordPress

אם אינך מכיר את WP-PageNavi תוסף וורדפרס, הוא מאפשר להחליף ניווט רגיל קודם / הבא רגיל בניווט חלופי מתקדם ומספור יותר. זו תכונה שצירפתי במספר נושאים שפיתחתי, כולל RS16, גל הבלוגים, RS17, ו נקודה בהירה.


עמוד 16 RSNavi

במדריך זה, אני הולך לבדוק כיצד:

  • התקן WP-PageNavi ושילב אותו כראוי בעיצוב שלך.
  • שתי שיטות להשבית ו / או לעקיפת סגנונות תוסף ברירת המחדל.
  • סקירה כללית של פלט סימון HTML על ידי WP-PageNavi
  • לבסוף, כיצד לשנות את המראה של ניווט העמודים שלך באמצעות CSS

התקן את התוסף

יש לך שתי אפשרויות בכל הקשור להתקנת התוסף WP-PageNavi.

  • הורד אותו מ- WordPress.org, העלה אותו ל / wp-content / plugins / directory שלך והפעל (aka, הדרך המיושנת).
  • בהתאם למארח שלך, אתה יכול גם להתקין תוספים באופן אוטומטי על ידי חיפוש בהם בעמוד “הוסף חדש” תחת תוספים בלוח הניהול של WordPress. פשוט חפש “פגנבי” ועליך למצוא אותו.

אוקיי, זה היה צריך להיות די קל. עכשיו הגיע הזמן ללבוש את הידיים קצת בקוד לחלק האינטגרציה.

שילוב נושא

בשילוב הנושא שלנו, אנו מעולם לא רוצים להציג שגיאות אם ה- WP-PageNavi אינו פעיל. במקום זאת, אנו נדאג שזה ייפול שוב בניווט הישן הקודם / הבא. לשם כך אנו נשתמש ב- פונקציה קיימת בדיקה מותנית.

נניח שזה קוד הניווט הקודם / הבא הרגיל שלך ב- 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 (); חלק בתוך ה- “ניווט” (או שווה ערך). קח בחשבון ש- WP-PageNavi פולט מחלקה חדשה בשם “wp-pagenavi”, אך אנו יכולים להשתמש בהן כדי לעצב בנפרד.

עקף את סגנונות הפלאגין

כברירת מחדל, WP-PageNavi מכניס אוטומטית קובץ CSS בשם pagenavi-css.css מספריית התוספים שלו לכותרת של האתר שלך. אנו לא רוצים שסגנונות ברירת המחדל האלה יפריעו לסגנונות המגניבים בהתאמה אישית שלנו, כך שנפטר אותם לחלוטין, ויש שתי דרכים פשוטות לעשות בדיוק את זה.

  • הוסף קובץ CSS לספריית העיצוב שלך – זו ככל הנראה הדרך הקלה ביותר לעקוף את סגנונות ברירת המחדל של WP-PageNavi. אם יש לך קובץ בשם pagenavi-css.css בספריית העיצוב שלך, WP-PageNavi ישתמש בזה במקום ברירת המחדל בקובץ התוספים..
  • הוסף קטע לקובץ ה- features.php שלך – קטע הקוד הבא שאספתי ממנו מתכוני WP תשבית לחלוטין את ההתנהגות לעיל ולא תכלול גיליון סגנונות מהתוסף (ברירת המחדל או ביטול בספריית העיצוב שלך).

add_action (‘wp_print_style’, ‘my_deregister_style’, 100);

פונקציה my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

פשוט קפוץ קוד זה בקובץ הפונקציות.php של העיצוב שלך והוסף את סגנונות CSS לגליון הסגנונות הרגיל של העיצוב שלך (בדרך כלל style.css).

פתק: ודא שהקוד מוקף בסוגריים כמו <?php … ?> אם קובץ הפונקציות שלך ריק כרגע.

WP-PageNavi סימון HTML ובוחרי CSS

כך נראה סימון ה- WP-PageNavi. בדוגמה הבאה ישנם ארבעה עמודים, כרגע בעמוד שני.

קודם1
2
3
הבא

אחרון “

אנו יכולים להשתמש בבוחרי CSS הבאים כדי למקד לסימון HTML שלמעלה:

  • .wp-pagenavi – חל על כל ה- div, שימושי למחיקות CSS, ריפוד / שוליים, גדלי גופן וסגנונות (מודגש, נטוי וכו ‘)
  • .wp-pagenavi א – מכוון לכל הקישורים בניווט בדף, כולל מספרי עמודים וקודם / הבא.
  • .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 a {font-weight: bold; } / * קישורים קודמים ולימים בלבד * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {גופן-משקל: רגיל; } / * קישורים אחרים * /

שילבתי קישורים למספר עמודים, הקישור הראשון והקישור האחרון לכלל אחד למטרות לדוגמא. כמובן שתוכלו להפריד ביניהם ולהוסיף סגנונות ספציפיים יותר לכל אחד מהם.

זה יהיה הרבה יותר קל אם הייתה מחלקה שנוספה כברירת מחדל לקישורים הקודמים / הבאים, אך אין. זו לא עסקה ענקית, מכיוון שאתה יכול פשוט לאפס אותם בכל מקרה.

עדכון חשוב: תודה לעדכון מ- סקריבו בתגובות, מסתבר שהגירסה החדשה ביותר של WP-PageNavi אכן מכילה שיעורים קודמים / הבאים (בחלקם הודות ל יוסט).

אתה יכול להשתמש .wp-pagenavi a.previouspostslink ו- .wp-pagenavi a.nextpostslink לבחירת קישורים קודמים ולימים בהתאמה..

אז פחות או יותר הכל למעלה עד שרשימת הבוחרים הלא מסודרת כבר לא רלוונטית, אבל אני אשמור רק בגלל שזה יכול להיות שיעור שימושי לביטול CSS במצבים אחרים. הדוגמה הבאה של CSS תחול, מכיוון שלא השתמשתי בבוררים האלה בכל מקרה.

דוגמא ל- CSS

הנה דוגמה לעיצוב סטיילינג של PageNavi שבניתי ממנו גל הבלוגים נושא.

דף העדכון של גל הבלוגים

הנה הקוד בו השתמשתי כדי לקבל את המראה הזה, CSS רב-קו יחיד הוא אופציונלי:

.wp-pagenavi a, .wp-pagenavi span {
ריפוד: 5px; שוליים ימניים: 10 פיקסלים;
גודל גופן: 15px; צבע: # 03719c; קישוט טקסט: אין;
גבול: 3px מוצק #ccc; -מוז-גבול-רדיוס: 5px; רדיוס-וובקיט-גבול: 5px; רדיוס גבול: 5 פיקסלים;
}
.wp-pagenavi a: רחף, .wp-pagenavi span.current {
רקע: # 03719c;
צבע: #fff;
גבול: 3px מוצק #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

והנה המשמעות של כל זה:

כלל ראשון
טווח ה- wp-pagenavi a .wp-pagenavi בוחר את כל מרכיבי העיגון והתוחם (כמעט הכל) בתוך ה- div .wp-pagenavi.

  • השורה הראשונה של הכלל קובעת ריפוד של 5 פיקסלים כך שהוא לא ידחס את הגבול האפור בהיר (מוגדר להלן). זה גם קובע מרווח עקבי של 10 פיקסלים מימין לכל אחד מהרכיבים כך שיש מרווח שווה בין כל אחד מהם.
  • השורה השנייה קובעת גודל גופן של 15 פיקסלים, הופכת את צבע הטקסט לכחול ומוודאת שלקישורים אין קו תחתון.
  • הקו השלישי מציב גבול אפור 3px מוצק על הכל. קוד רדיוס הגבול הופך את הפינות למעוגלות.

כלל שני
.Wp-pagenavi: רחף, .wp-pagenavi span.current בוחר את אפקט ריחוף הקישור כמו גם את מספר העמוד הנוכחי, בהתאמה.

  • השורה הראשונה קובעת צבע רקע כחול כהה.
  • השורה השנייה הופכת את הטקסט לבן.
  • הקו השלישי מעניק גבול מעט כהה יותר.

כלל שלישי
פעולה זו בוחרת את מספר העמוד הנוכחי (שוב) מבלי שתשפיע גם על אפקט ריחוף הקישור (כמו הכלל השני). זה פשוט הופך את מספר העמוד הנוכחי למשקל גופן מודגש.

הסיבה שלא צירפתי את זה לאפקט ריחוף הקישור היא מכיוון שיש לו השפעה לא אחידה שעוברת ממשקל גופן מודגש.

פתק: תלוי באופן קידוד ה- CSS שלך, ייתכן שיהיה עליך להשתמש בבוררים ספציפיים יותר. לדוגמה, אם ישנם סגנונות עבור #content a ו- WP-PageNavi שלך נמצא בתוך חלוקת התוכן, יתכן שתצטרך לשכתב את PageNavi CSS שלך כ- #content .wp-pagenavi a ולעקוף כל סגנונות פחות ספציפיים אחרים.

סיכום

אני יודע שזו הייתה דוגמא פשוטה יחסית, יכול להיות שיש לך כללי CSS מתקדמים בהרבה כדי להבדיל עוד יותר את הקישורים השונים ואלמנטים אחרים. אני מקווה שאספת כמה טיפים ל CSS לאורך הדרך.

שילוב אופציונלי של WP-PageNavi הוא נושא תכונה די מגניב שמפתחים יכולים לשלב בנושאים שלהם. בשיטת האינטגרציה שפירטתי לעיל, משתמשים יכולים לבחור בקלות אם להשתמש בה או לא, והיא יכולה להיות אפשרות נחמדה להרבה בלוגים..

מקווה שכולכם אהבו את ההדרכה, ואם יש לכם בקשות להדרכות וורדפרס עתידיות או טיפים ל- 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