חלונית הוספת מדיה לתוכן – הוספת גלריה

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

media

חלק העיקרי של החלונית מחולק לארבעה

media

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

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

אזור בחירה מתוך ספרית המדיה

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

ניתן לסנן לפי סוגי המדיה הבאים בתפריט מצד ימין

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

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

אזור עריכה

אפשרויות העריכה

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

אזור תחתון

משמש לאיפוס הבחירה ועריכת סדר התמונות בגלריה. מכיל קישור אחד "נקה" שלחיצה עליו מאפסת את הבחירה.

העלאת קבצים

עבור העלאת קבצים יוחלף אזור בחירת המדיה בחלון הבא

media

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

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

 

הוספת קישורים מבוססי תמונות לעמודה צדדית

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

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

ראשית צריך לדעת מהן הכתובות של כל התמונות.

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

לצורך ההמשך נניח שהכתובת של התמונה היא
http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png
הכתובת אליה מקשרים היא http://thatsite.co.il/page.html
וטקסט הקישור הוא "אתר מומלץ"

עבור שימוש בוידג'טי טקסט

כעת נוסיף לעמודה הצדדית וידג'ט טקסט  ולתוכו נוסיף את הטקסט הבא

<a href="http://thatsite.co.il/page.html"><img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

אם הגודל של התמונה לא מתאים לרוחב העמודה יש שתי אפשרויות

  • לערוך את התמונה במחשב האישי ואז להעלות מחדש ולחזור על התהליך
  • להשתמש בעורך התמונות לעריכת התמונה. בסיום העריכה צריך מחדש את הכתובת משדה "כתובת URL לקובץ"
  • להורות לדפדפנים להציג את התמונה ברוחב הרצוי (זו האפשרות החוקית היחידה אם התמונה לא שלכם). אם הרוחב הרצוי הוא 300 פיקסלים נשנה את הטקסט הקודם ל

<a href="http://thatsite.co.il/page.html"><img width="300" src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

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

<a href="http://thatsite.co.il/page.html" target="_blank"><img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

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

עבור שימוש בקישורים

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

כעת עבור כל קישור נבצע הוספת קישור תוך כדי הזנת:

  • "אתר מומלץ" כשם הקישור
  • http://thatsite.co.il/page.html ככתובת URL של הקישור
  • http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png ככתובת התמונה של הקישור
  • דירוג המתאים למקום בו הקישור צריך להיות מוצג בין כל הקישורים

ושיוך הקישור לקטגורית הקישורים אותה יצרנו בשלב הראשון.

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

  • קטגורית הקישורים – הקטגוריה שיצרנו
  • איך למיין את הרשימה? – לפי דירוג
  • הצג את תמונת הקישור – מסומן
  • יתר האפשרויות לא מסומנות או ריקות

עריכת תמונות

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

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

עבודה בסיסית עם העורך

בחלק הימני העליון של העורך מוצגים כפתורים הפעולות – המבצעים פעולות על התמונה המוצגת מתחתיהם.

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

הקטנת תמונה על ידי חיתוך

בחיתוך משתמשים בכדי להוריד מהתמונה חלקים שאיננו רוצים שיוצגו.

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

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

אחרי שסימנו לחיצה על כפתור החיתוך תראה לנו תמונה בה מופיע רק האזור המסומן

אם נבצע שמירה התמונה תחליף את הקודמת כקובץ מדיה.

הקטנת תמונה תוך שמירה על קנה מידה

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

בשביל לבצע שינוי כזה צריך להקליק על "שינוי גודל" מצד שמאל למעלה בעורך. ואז יוצג

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

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

חיתוך מתקדם

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

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

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

ישנם גם קיצורי מקלדת:

  • Shift+מקשי החצים : להזיז בפיקסל אחד כל פעם
  • Shift+מקשי החצים : להזיז בפיקסל אחד
  • Ctrl+מקשי החצים : להזיז ב-10 פיקסלים כל פעם
  • Ctrl+Shift+מקשי החצים : להגדיל או להקטין בפיקסל אחד כל פעם
  • Shift + גרירה עם העכבר: שמירה על הפרופורציות

קביעת גדלי התמונות עליהם יחולו השינויים

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

שחזור תמונה

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

הוספת תמונה לעמודה צדדית

בכדי להוסיף תמונה עלינו לדעת מה הכתובת שלה.

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

לצורך ההמשך נניח שהכתובת היא http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png

כעת נוסיף לעמודה הצדדית וידג'ט טקסט  ולתוכו נוסיף את הטקסט הבא

<img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">

אם הגודל של התמונה לא מתאים לרוחב העמודה יש שתי אפשרויות

  • לערוך את התמונה במחשב האישי ואז להעלות מחדש ולחזור על התהליך
  • להשתמש בעורך התמונות לעריכת התמונה. בסיום העריכה צריך מחדש את הכתובת משדה "כתובת URL לקובץ"
  • להורות לדפדפנים להציג את התמונה ברוחב הרצוי (זו האפשרות החוקית היחידה אם התמונה לא שלכם). אם הרוחב הרצוי הוא 300 פיקסלים נשנה את הטקסט הקודם ל

<img width="300" src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">

קוד מקוצר caption

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

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

צורת השימוש היא (המרחאות מסביב למילה caption הן בכדי למנוע את הפעלת קוד הקיצור וצריך להוריד אותן בשימוש אמיתי)

['caption' width="300" caption="הופעה"]<a href="http://wordpress.marksw.com/wp35/files/2013/01/IMG_0526.jpg"><img title="IMG_0526" src="http://wordpress.marksw.com/wp35/files/2013/01/IMG_0526-300×224.jpg" alt="" width="300" height="224" /></a>[/'caption']

הופעה

פרמטרים:

  • caption (חובה) – הכיתוב שיוצג
  • width (חובה) – רוחב הכיתוב
  • align – לאן ייושר טקסט הכיתוב. ערכים אפשריים:
    • alignnone – ללא ישור
    • alignright – מיושר לימין
    • alignleft – מיושר לשמאל
    • aligncenter – ממורכז
  • id – שם מזהה למתן אפשרות לעיצוב יעודי

קוד מקוצר gallery

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

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

צורת השימוש הפשוטה היא (המרחאות מסביב למילה gallery הן בכדי למנוע את הפעלת קוד הקיצור וצריך להוריד אותן בשימוש אמיתי)

['gallery']

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

פרמטרים אפשריים:

  • columns – מספר העמודות שישמשו להצגת הגלריה
  • link – אם הערך שלו הוא "file", במקום קישור לדף המדיה יהיה קישור לגירסאת התמונה המלאה
  • size – גודל התמונות המוצגות. הערכים האפשרים הם:
    • thumbnail – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "תמונה מוקטנת"
    • medium – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "בינוני"
    • large – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "גדול"
    • full – יוצגו התמונות המלאות
      תבניות ותוספים עשויים להגדיר גם גדלים אחרים בהם ניתן יהיה להשתמש.
  • include – רשימה של מספרים מזהים של קבצי המדיה של תמונות אותן רוצים להציג כחלק מהגלריה. תמונות אלו לא חייבות להיות משויכות לפוסט. אם include="5,8" יוצגו תמונות שקבצי המדיה שלהן מזוהים במספרים 5 ו 8 (איך למצוא מספר מזהה של קובת מדיה)
  • exclude – רשימה של מספרים מזהים של קבצי המדיה של תמונות אותן לא רוצים להציג כחלק מהגלריה למרות שהן משויכות לפוסט. אם exclude="5,8" לא יוצגו תמונות שקבצי המדיה שלהן מזוהים במספרים 5 ו 8 (איך למצוא מספר מזהה של קובת מדיה)
  • id – בגלריה יוצגו תמונות המשויכות לפוסט שהמספר המזהה שלו ניתן בפרמטר הזה. אם id="5" יוצגו תמונות המשויכות לפוסט מספר 5. (איך למצוא מספר מזהה של פוסט)
  • ids – רשימה של מספרים מזהים של קבצי המדיה של תמונות אותן רוצים להציג כחלק מהגלריה. תמונות אלו לא חייבות להיות משויכות לפוסט. אם ids="5,8" יוצגו תמונות שקבצי המדיה שלהן מזוהים במספרים 5 ו 8 (איך למצוא מספר מזהה של קובת מדיה)
  • orderby – קביעת פרמטר המיון לפיו תבוצע הצגת התמונות. האפשרויות הן:
    • menu_order – לפי מספר ה"סדר" של התמונה בין התמונות המוצגות
    • title  – לפי כותרת קובץ המדיה של התמונה
    • post_date – לפי תאריך הפרסום של קובץ המדיה של התמונה
    • rand – אקראי
    • ID – לפי סדר העלאת התמונות
  • order – סוג המיון עולה או יורד. ערכים אפשריים הם
    • ASC – עולה
    • DESC – יורד
  • itemtag – תג הHTML  בו מוכלת כל תמונה והכותרת שלה. ברירת המחדל היא dl
  • icontag – תג הHTML  בו מוכלת כל תמונה. ברירת המחדל היא dt
  • captiontag – תג הHTML  בו מוכלת כל כותרת של תמונה. ברירת המחדל היא dd

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

גלריה (אלבום תמונות)

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