שיניתי את כפתורי הניווט בארכיון הבלוג, אבל למה?

בעקבות פידבק שקיבלתי מנאוה – קוראת חדשה בבלוג שלי שכתבה לי מייל מפורט שכלל פרגונים והערות בונות – החלטתי לעשות כמה שינויים באתר.

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


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

איך מדפדפים? יש רק כפתור 'פוסטים ישנים' וכפתור 'פוסטים חדשים' – הם עוברים מדף 2 לדף 3, לצורך העניין, כל פעם בקפיצה של דף אחד.

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

אבל נאוה הצביעה לי שזה לא נוח לה.

חסרו לה שני דברים:

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

תהליך הפתירה

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

לשמחתי, לוורדפרס יש שורת קוד שמאפשרת לעשות את זה בקלות.

החלפתי הקוד הקודם שדאג להציג רק כפתורי קדימה/אחורה:

the_posts_navigation();

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

the_posts_pagination(
	array(
		'mid_size'  => 22,
	)
);

בחרתי שטווח המספרים המקסימלי שיהיה גלוי לעין יהיה עד 22 עמודים. כלומר, אם יהיו לי 40 עמודים בארכיון הבלוג (יבוא יום וזה יקרה), יוצגו 22 כפתורים במקסימום, אבל בטווח שקרוב למספר העמוד הנוכחי שאני נמצא בו. (לצורך העניין אם אהיה בעמוד 20, זה יציג לי את טווח העמודים 10-32).

ואיך זה נראה עכשיו? חסר עיצוב, אבל נוח!

מצד ימין – תפריט הניווט הממוספר, חסר עיצוב.
מצד ימין – תפריט הניווט הממוספר, חסר עיצוב.

עכשיו אטפל בעיצוב:

תפריט ניווט הממוספר לאחר התאמה עיצובית
תפריט ניווט הממוספר לאחר התאמה עיצובית

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

אז אחרי קצת משחקי קופי, זה מה שיצא:

תפריט הניווט החדש שלי – נכון חמוד ה"אתם פה"? 😁
תפריט הניווט החדש שלי – נכון חמוד ה"אתם פה"? 😁

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

באתר שלי החלטתי על העיצוב הבא: הסימונים האפורים מציינים לגולש – "היית פה בעבר" והטורקיז הזרחני מציין "לחץ עליי וגלה משהו חדש".

אז בביקור בתולי באתר שלי, תפריט הניווט זה יראה כך:

כך גולש חדש באתר יראה את תפריט הניווט לראשונה.
כך גולש חדש באתר יראה את תפריט הניווט לראשונה.

ותוך כדי שגולשים, זה 'צובע' באפור את העמודים שהגולש ביקר בהם:

בצילום המסך, ביקרתי בדף 1 ו־2 וכעת אני נמצא בדף 3.
בצילום המסך, ביקרתי בדף 1 ו־2 וכעת אני נמצא בדף 3.

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


גלה לי את הקוד!

כדי להחליף את המילים "הקודם/הבא" הוספתי 2 שורות קוד:

the_posts_pagination(
	array(
		'mid_size'  => 22,
		'prev_text' => __( 'פוסטים חדשים יותר', 'elrons' ),
		'next_text' => __( 'פוסטים ישנים יותר', 'elrons' ),
	)
);

אבל זה לא הכל – איפה הטקסטים של "אל ההווה / אתם פה / אל העבר" נמצאים? החלטתי להוסיף אותם ישירות בקובץ ה־CSS שלי בעזרת Pseudo Class של :before ו־:after, שמאפשרים להכניס טקסט לפני ואחרי תג.

לחוקרים מביניכם, קוד ה־SCSS שלי מוצג לעיניכם כאן:


והרי לכם התוצאה הסופית:

צילום מסך של ארכיון הבלוג החדש – עם תפריט ניווט ממוספר 😁

מוזמנים לבקר בדף הארכיון ולנסות לדפדף בעצמכם!

זה די כיף, אבל אני משוחד כמובן.


עריכה 1: בסוף החלטתי להחזיר ל־"אל העתיד" במקום "אל ההווה". נראה לי פשוט יותר הגיוני… כי אם אני בעמוד 8 ולוחץ "אל ההווה", זה מעביר אותי לעמוד 7 (שהוא קרוב יותר להווה אבל לא ההווה בהכרח). רק עמוד 1 הוא ההווה.

עריכה 2: אחרי התייעצות עם אלון – חבר – החלפתי את "אתם פה" ל־"אנחנו פה :)" כדי לתת לי ולגולשים חוויה של ביחד! 😁


עד השינוי הבא באתר, זה הכל בנתיים!

מה דעתכם על השינוי? ספרו לי בתגובות.

דברים שאני כותב

5 מחשבות על “שיניתי את כפתורי הניווט בארכיון הבלוג, אבל למה?

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

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

    ורק הערה: לא אמורים לכתוב בעברית בתוך הקוד. אמורים לכתוב באנגלית, ואת התרגום לעברית לשים בקובץ שפה 🙂

    1. איזה כיף, לאה! וכמו תמיד, כיף לי שאת קוראת ומגיבה לי.

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

      אני באמת משתדל! לשמחתי, עם הגוטנברג החדש זה מאוד קל ואינטואיטיבי. שאפו להם. וזה גם עוזר בקידום בגוגל תמונות, אז זה עוד תירוץ נחמד.

      אה, כמובן – את צודקת שלא נכון לכתוב שפה בתוך הקוד עצמו! אבל זה האתר האישי שלי, לא תבנית או תוסף שאני מוכר למישהו וגם לא אתר מרובה שפות 🙂 לכן זה נראה לי בסדר גמור "לרמות" קצת לטובת כתיבת קוד נוחה יותר. מה דעתך?

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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?