13
בספטמבר
2011

טיפ וורדפרס: על קוד הטמעה ואיך לאפשר iframe בעורך הטקסט?

מאת: מאור ברזני | תגובות: 6 | נושאים: וורדפרס
תגיות: , , , , |

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

 

בזמן האחרון ניתן למצוא יותר קוד להטמעה, שבעבר ניתן דרך קוד obeject/embed, בפורמט של Iframe. אתרים כמו יוטיוב ו-Vimeo מספקים כיום כברירת מחדל קוד iframe להטמעת סרטונים באתרים חיצוניים, בעוד שבעבר ההטמעה נעשתה דרך הטמעת אובייקט הפלאש עצמו, (ניתן עדיין לקבל במקביל גם את קוד ההטמעה הקודם). ישנם גם מספר אתרים נוספים המספקים קוד הטמעה לקטעי הוידאו שלהם דרך iframe (למשל אתר כלכליסט, הטלוויזיה החברתית ועוד). גם פייסבוק, כידוע, מספקת קוד iframe להטמעת כפתורי לייק או קוביית אוהדים, וכך אתרים נוספים.

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

הטמעות וידאו. בשביל מה יש oEmbed?

גם עבור הטמעת סרטוני וידאו מאתרים שונים, במרבית המקרים לא יהיה צורך להדביק את קוד ה-iframe להטמעה ישירות בעורך הטקסט. וורדפרס, החל מגרסה 2.9, תומכת במנגנון oEmbed להטמעת סרטוני וידאו. המשמעות היא, שכדי להטמיע באתר שלכם בעמוד תוכן מסוים סרטון של יוטיב או Vimeo, למשל, כל שנדרש הוא להעתיק את שורת הכתובת מהדפדפן של הסרטון אותו מעוניינים להטמיע, ולהדביק את זה במסך העורך, בשורה חדשה וריקה, כאשר זהו הטקסט היחיד המופיע באותה שורה. מכאן וורדפרס כבר תהפוך עבורכם את שורת הכתובת הזו לסרטון המוטמע המבוקש, שיוצג באתר שלכם.

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

מספר דרכים להוספת תמיכה בהטמעה אוטומטית

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

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

דרך נוספת, במידה שהאתר אינו תומך ב-oEmbed, היא לכתוב handler משלכם שיעשה זאת. יש לדעת את מבנה קוד ההטמעה שמספק האתר הספציפי ממנו רוצים להטמיע, וגם קצת ביטויים רגולריים. כדי ליישם את זה, הדבר מצריך מעט ידע בתכנות ולא אפרט כאן בפוסט הזה איך עושים את זה. זה לא מאוד מורכב, ומי שמתעניין יוכל למצוא דוגמה לזה בקודקס בעמוד הפונקציה wp_embed_register_handler.

אני רוצה להוסיף קוד iframe בעורך!

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

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

1
2
add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]"; return $a;') );
Gravity Forms Plugin for WordPress
שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

6 תגובות »

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה

You can add images to your comment by clicking here.

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט