צור יישומון טוויטר בהתאמה אישית ללא תוסף

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


  • קוד ה- HTML וה- Javascript הנחוצים כדי למשוך את הציוצים האחרונים
  • סקירה כללית של סימון HTML ובוחרי CSS המשויכים
  • שתי דוגמאות לווידג’טים המותאמים אישית לטוויטר השתמשתי בעצמי

המשך לקרוא כדי לראות את שאר ההדרכות …

HTML ו- Javascript

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

ראשית, הצב את הקוד הבא במקום בו ברצונך שהרשימה תופיע:

  • טעינת עדכוני טוויטר

פתק: ה

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

    שנית, יהיה עליכם למקם את השורות הבאות של Javascript הכי קרוב לתג שאפשר.

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

    סקירה כללית של בוחרי סימון HTML ו- CSS

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

    • #twitter_update_list – בחירת הרשימה כולה
    • #twitter_update_list li – בחר פריטי רשימה בודדים
    • #twitter_update_list li span – בוחר את החלק ה”ציוץ “של פריט הרשימה, ולא את הקישור לפני הזמן
    • #twitter_update_list li span a – בוחר את הקישור בחלק ה”ציוץ “של פריט הרשימה.
    • #twitter_update_list a [style ="גודל גופן: 85%;"] – בוחר את הקישור “לפני הזמן”, בצורה מעט פרוצה (ראה הערה למטה).

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

    #twitter_update_list a [style ="גודל גופן: 85%;"] {גודל הגופן: 1em! חשוב; }

    זה כנראה לא עובד בגירסאות המוקדמות של IE בגלל החלק “! חשוב”. אתה יכול גם להשתמש בתצוגה: חסום; כדי להעביר קישור זה לשורה הבאה.

    דוגמה חיה

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

    עדכון טוויטר של מעבדת נושא

    הנה הקוד בו אני משתמש עבור הרשימה:

    #twitter_update_list {
    גודל גופן: 13px;
    גובה קו: 21 פיקסלים;
    סגנון רשימה: אין;
    }
    #twitter_update_list li {
    רקע: url (‘תמונות / twitter-divider.gif’) חזרה-שמאל למטה;
    ריפוד תחתון: 7px;
    שוליים תחתון: 9 פיקסלים;
    }
    #twitter_update_list span, #twitter_update_list span a {
    צבע: #ababab;
    קישוט טקסט: אין;
    }
    #twitter_update_list a {
    צבע: # 6f7276;
    }

    • השורה הראשונה בוחרת את הרשימה כולה. זה קובע את גודל הגופן, גובה הקו ומוודא כי לא מופיעות נקודות תבליט.
    • השורה השנייה גורמת לחזרת תמונה קטנה של 2 × 1 מתחת לכל פריט ברשימה כמעין מחלק. הריפוד קובע את המרווח בין הציוץ לקצה העליון של המחלק. השוליים מגדירים את הרווח בין הקצה התחתון של המחלק לציוץ הבא.
    • השורה השלישית קובעת את צבע הציוץ, כולל קישורים, ומוודאת שאף שורות לא מופיעות מתחת לקישורים.
    • השורה האחרונה קובעת את צבע הקישור “לפני הזמן”.

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

    ניתן להשתמש בזה בכל אתר

    שלא כמו כל האחרים כיצד לעשות XYZ ללא תוסף – – פוסטים בחוץ, אין קוד וורדפרס בפועל המשמש במדריך זה.

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

    אם אתה רוצה להשתמש בו ב- WordPress, הייתי מציע לערוך ידנית את קבצי העיצוב שלך כדי להכניס את שתי השורות של Javascript בכותרת התחתונה של האתר שלך, או אפילו לחבר אותו לחיבור ה- wp_footer () שלך..

    לגבי הווידג’ט עצמו, אתה יכול להדביק את הקוד בתוך ווידג’ט טקסט או לתקן אותו ידנית בסרגל הצד שלך (או בכל מקום).

    סיכום

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

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