תוספות ושינויים # 2

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

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

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

אתגר ראשון

אחרי שהתקנתי את התוסף נתקלתי במחסום –  מה עושים עכשיו? לתוסף אין עמוד או הגדרות בניהול (מתכנתת אמיתית אני, כבר אמרנו? 😉 ) אז מה עושים כדי שהוא יופיע? נזכרתי שבפוסט המפורט יש גם כל מיני שורות קוד שכנראה יוכלו לעזור לי להטמיע את התוסף הזה אצלי, נכנסתי פשפשתי ניסיתי ובסוף גם הצלחתי. את הקושי הזה היה אפשר לפתור בקלות לו היה מצורף לתוסף החביב הנ"ל גם קובץ readme.txt (לאה או רועי – לטיפולכם :)).

אתגר שני

מצאתי כבר איך מטמיעים את התוסף ומצאתי את דף single.php בתבנית הבת שלי, אבל עדיין לא הגעתי אל המנוחה והנחלה. למה? כי התבנית אב שלי עובדת בצורה כזאת:

עמוד single.php מושך לתוכו את template-parts>content.php והוא מושך אליו את template-parts>content-header.php. לא רציתי לשכפל את 2 הקבצים האלו רק כדי להשתמש בתוסף, אז יחד עם לאה החלטנו שעדיף לכתוב קוד בקובץfunctions.php מאחר שהוא קיים אצלי ממילא. הקוד שהוחלט עליו הוא filter שיכניס את המלל הזה לתחילת התוכן של הפוסט. נכון שזה לא אידיאלי מבחינת מבנה כי המידע הזה שייך ל"מטא" של הפוסט, אבל זה גם לא כזה נורא. למי מכם שמעוניין גם – מצרפת את הקוד של לאה:

/**
 * Show reading time before the post content
 * @param $content - the content of the post
 * @return the estimated reading time + the content of the post 
 */
 function rachel_bavotasan_show_reading_time( $content ) {
     if ( is_single() && method_exists( 'SavvyEstimatedReadingTime', 'estimated_reading_time' )) {
         $custom_content = SavvyEstimatedReadingTime::estimated_reading_time();
         $custom_content .= $content;
         return $custom_content;
     } else {
         return $content;
     }
 }
 add_filter( 'the_content', 'rachel_bavotasan_show_reading_time' );

 

אתגר שלישי

האתגר הזה הוא לא שלי אלא של לאה, אבל הוא שייך לתהליך 🙂

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

 

 

אתגר רביעי

אז יש תוסף הוא עובד כמו שאני רוצה, נמצא במקום שאני רוצה – עכשיו נשאר רק לתת לו קצת עיצוב שיראה שייך לתבנית שלי.

היו לי קצת התלבטויות. רציתי לשמור את זה נקי ומסודר אבל מצד שני ממש התחשק לי להוסיף אייקון. נזכרתי בפוסט שפרסם אלעד שכטר בקבוצה של css master israel בפייסבוק על שימוש באייקונים ע"י Hexadecimal entities. ניסיתי. ואז נזכרתי למה זה בעייתי – כל מערכת הפעלה מייצגת את האייקון בצורה שונה (!). רציתי למשל להשתמש באייקון של כוס קפה כדי לייצג את משך זמן הקריאה, אבל אצלי במחשב הוא היה נראה שונה לגמרי מאיך שהוא הופיע באייפון… אתם יכולים לראות את השוני בתצוגה בין מערכות ההפעלה והמכשירים השונים באתר הנחמד הזה. מעבר למראה, השוני השפיע גם על הריווחים וזה כבר היה יותר מדי והחלטתי לנטוש את העניין. מאחר שתבנית האב שלי כוללת בתוכה את הפונט Awesome, החלופה הראויה בעיניי הייתה פשוט להשתמש בו. בחרתי לי אייקון של שעון והעליתי את כל השינויים לשרת.

 

 

נ.ב.

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