פלאש הדר בוורדפרס

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

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

  • הפוסט הזה בהחלט לא בא כדי להמליץ על הכנסת פלאש להדר של וורדפרס (או לכל מקום אחר)
    יש, אני מבין, לא מעט שרואים בכך טעות והם מן הסתם כן יודעים משהו.
    גם אני אגב הכנסתי פלאש בהדר אצלי רק בגלל שזה ענה לי על צורך מאוד מסוים של אחידות עם חלקים אחרים באתר שלי
  • כן…..אני יודע שהעיצוב הנוכחי שלי להדר הוא כרגע בכלל לא משהו..
  • עקב לא מעט פניות חוזרות ונשנות במיילים אלי בנושא, חשוב לי להדגיש:
    נכון לזמן כתיבת פוסט זה אני עובד עם התבנית 'קובריק' ונכון לעכשיו גם
    לא עם הגרסא הכי אחרונה של וורדפרס
    לא יודע בוודאות האם ההסבר שאני מציע כאן יעבוד כמו שצריך גם עם תבניות אחרות וגרסאות חדשות/ישנות יותר,
    גם יכול להיות שאתם קוראים את הפוסט הזה בשעה שכבר עברתי לתבנית אחרת וירדתי מהקטע של הפלאש
  • גם לתוסף (בו נשתמש כדי להכניס פלאש להדר של וורדפרס) ייצאו בעתיד גרסאות עדכניות יותר ולכן ייתכן שחלק מההוראות שמופיעת כאן בפוסט כבר לא עדכניות, שימו לב!
  • ההסבר יוצא מנקודת הנחה שאת קובץ הפלאש שלכם אתם יודעים לצור לבד, אך ניתן לצור קבצי פלאש זה כבר סיפור אחר לגמרי
    כאן אני מנסה להסביר רק אך ניתן להשתיל אותו במקום התמונה של ההדר

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

1. קודם כל לגבות! לכו תדעו אולי זה לא יעבוד לכם תרצו לשחזר למצב הקודם ולא תזכרו אך, לכן רצוי לשמור עותק גיבוי של הקובץ header.php כי בו נעשה שינוי קל
את תמונת ההדר שאותה אנו עומדים להחליף – kubrickheader.jpg (כאמור בהנחה שאתם עובדים עם תבנית ברירת המחדל)
ונמצאת בבלוג שלכם בתיקיית wp-content/themes/default/images אפשר דווקא להשאיר שם בדיוק כמו שהיא

2. סביר להניח שתירצו שקובץ הפלאש שלכם יחליף בדיוק את אותו שטח שכרגע תמונת ההדר תופסת לכן שימו לב לגודל בפיקסלים בגובה וברוחב של kubrickheader.jpg והכנו לכם קובץ פלאש בגודל המתאים
אם משום מה אתם רוצים לשנות מהגודל של ברירת המחדל שימו לב שיש לתוסף בו נשתמש בהמשך מגבלת מינימום (214px wide by 137px high)
ובכל אופן חשוב לזכור לעצב את קובץ הפלאש הקובץ כך ישתלב עם שאר התמונות בתבנית (אלא אם גם אותן אתם מתכוונים לשנות)..
אם זאת הייתה תוכנית בישול, זה היה השלב בו הייתי אומר " במקרה הכינותי מראש קובץ בשם kubrickheader.swf "
אבל כמובן שלא קריטי דווקא השם הזה, עכשיו שימו את הקובץ שלכם בשרת במקום שנוח לכם וזיכרו את המיקום שלו

3. רוצו להתקין את התוסף Kimili Flash Embed
ההתקנה היא דיי סטנדרטית, מעלים לתיקיית הפלאגאינז ואחר כך נכנסים לפאנל הניהול ומפעילים אותו
התוסף אגב יועד לכתחילה כדי לשלב פלאש דווקא בפוסטים ולא בהדר של וורדפרס אך בגרסא האחרונה שלו (נכון לעכשיו לפחות) הוא כן תומך גם בשילוב פלאש בהדר,
לפני ההתקנה לא לשכוח – יכולה להיות התנגשות עם תוסף אחר שגם מנהל הוספת פלאש לבלוג שלכם, אם יש לכם כזה, עדיף לא לקחת סיכון של התנגשות ולבטל אחד מהם, חשוב גם לזכור שאם עשיתם שינויים מסיביים ויוצאי דופן בקבצי ה php של הבלוג שלכם גם יכול להיות שהפלאג לא יעבוד משום שהוא אחרי הכל יועד להתקנת וורדפרס סטנדרטית

4. התוסף הותקן והופעל?, כל מה שנשאר לנו עכשיו רק זה להיכנס לקובץ ה header.php ושם למצוא ולשלב, מיד אחרי הקישור לעמוד הראשי של הבלוג (שיושב לרוב בסוף הקובץ), את הקוד הבא
code
כמובן שעליכם לשים את ערכי הגובה והרוחב והנתיב של קובץ ה swf שלכם ולא מה שמופיע פה בדוגמא
וזהו! ..אצלי זה עבד


הערות לסיום

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

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

בהצלחה!

11 תגובות
  1. דורון
    דורון says:

    מבחינה תיאורטית עד כמה שאני יודע מה שאתה כותב כאן יכול להיות נכון
    אבל שים לב:

    יש כמה יתרונות מאוד גדולים לפלאג
    1. שילוב הקוד הרבה יותר קל ומאפשר שילוב הרבה יותר קל של פלאש בכל מקום בבלוג
    מאשר שילוב קוד html מלא באופן ידני

    2. הפלאג גם מטפל בעידכון המעצבן של אינטרנט אקספלורר (זה שמוסיף ב rol over של העכבר על הפלאש מין מסגרת חצי שקופה מסביב לפלאש והודעה click to activate.. שגורמת לכך שבפעם הראשונה צריך לפחות 2 קליקים על הפלאש כדי שהכפתורים שלו יגיבו ו/או התוכן האינטראקטיבי שלו אם יש כזה יתחיל לרוץ)
    בדיוק מה שקורה גם באתר שלך, נכון לעכשיו, כשנכנסים אליו באינטרנט אקספלורר ומעבירים את העכבר מעל הפלאש זה שמופיע לדוגמא בעמוד הראשי
    כשמשתמשים בפלאג, הדבר הזה לא קורה
    במקרה שלך הפלאש לא מכיל כפתורים והרקע שחור ולכן הבעיה לא בולטת או מציקה אבל במקומות האחרים שכן יש כפתורים וכדומה ורקע לבן או בהיר היא בהחלט כן
    שים לב שגם אצלך הפלאש לא מחליף את ההדר אלא בא מתחתיו

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

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

    הגב
  2. דורון
    דורון says:

    אגב אם הבעיה עם הא"א לא מפריע לך אלא רק הבעיה בשועל אז אני חייב להודות שיכול מאוד להיות שאתה יכול לפתור את הבעיה של התצוגה בשועל גם בלי הפלאג אלא פשוט כנראה צריך לתקן משהו בקוד ה html כך שיעבוד טוב ב2 הדפדפנים
    אבל מה שנוח
    אחלה! שמח שעזרתי 🙂

    הגב

פינגבקים וטרקבקים

השאר תגובה

רוצה להצטרף לדיון?
הרגש חופשי לתרום!

השאר תגובה

This site uses Akismet to reduce spam. Learn how your comment data is processed.