הגדרות יישור תמונה של וורדפרס – הסבירו!

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


בואו נסתכל על כל אחד מאלה בתורו:

1. יישר שמאלה

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

דוגמא:

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. יישר שמאלה Duis aute irure dolor in reprehenderit ב voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, סאנט בקולפא קווי אמיציה deserunt mollit anim id est laborum. Lorem ipsum dolor לשבת amet, consectetur adipiscing elit, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud תרגיל ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit ב voluptate velit esse cumum דולור איו פוגיאט נוללה פריאטור.

2. יישר את המרכז

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

דוגמא:

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing אליט, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. יישר למרכז Duis aute irure dolor in reprehenderit ב voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, סאנט בקולפה קווי אפיסיה deserunt mollit anim id est laborum.

3. ישר ישר

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

דוגמא:

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing אליט, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. תמונה עם קו ישר Duis aute irure dolor in reprehenderit ב voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, סאנט בקולפא קווי אמיציה deserunt mollit anim id est laborum. Lorem ipsum dolor לשבת amet, consectetur adipiscing elit, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud תרגיל ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit ב voluptate velit esse cumum דולור איו פוגיאט נוללה פריאטור.

4. יישר אף אחד

תמונות שלא הוקצו להם יישור (על ידי הקצאת יישור של ‘ללא’), ישבו בדיוק במקום שאתה מאתרתן – כלומר אם בחרת למקם תמונה המוקצה יישור של ‘אין’ בפסקה של טקסט (ראו את הדוגמה הבאה בהמשך), הוא ימוקם בקו זה עם הטקסט, מה שיגרום לכך שיהיה טקסט משמאל לימין והן מצד ימין של התמונה (בהנחה שהתמונה אינה באותו רוחב – או רחב יותר – מהאזור בו הוא יושב **). עם זאת, באופן מבלבל, תמונה שקיבלה BOTH יישור של ‘ללא’ והיא יושבת בתוך פיסקה משלה (כלומר בשורה חדשה בעורך וורדפרס ו / או ספציפית בתגי HTML ‘p’) תוצב משמאל. של האזור שבתוכו הוא שוכן (באופן דומה לזה אילו היה משמאל מיושר) אך ללא טקסט מימין לו. למה? מכיוון שלתמונה אין יישור ספציפי (או במונחים טכניים: שום ‘צף’ שמאלי או ימין ספציפי) שיושב בתוך הפיסקה שלה עצמה (ללא שום אלמנטים אחרים באותה פסקה) יופרד משתי הקודמות שלה ולעקוב אחר תכנים לפי שורות של חלל לבן מוגדר מראש – באותו אופן שבו כל פיסקה אחרת תעשה!

דוגמא:

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית, sed do eiusmod temporid incididunt ut labore et dolore magna aliqua. יישר אף אחד Duis aute irure dolor in reprehenderit ב voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, סאנט בקולפה קווי אפיסיה deserunt mollit anim id est laborum.

אז מה בעצם קורה כאן?

מדוע כל זה קורה? זה הכל נובע משפת מחשב המשמשת לביטוי המצגת (פריסה, מידות, צבעים וכו ‘) של אלמנטים ברשת, המכונים גיליונות סגנון מדורגים – או’ CSS ‘בקיצור. בעיקרו של דבר, בכל פעם שאתה מקצה, נניח, יישור שמאלי לתמונה בפוסט או בדף, למשל, וורדפרס מצרף שם כיתת HTML של “alignleft” לתמונה האמורה, אשר למעשה מכריח את התמונה להתייחס לסט ספציפי. של פקודות CSS מוגדרות מראש שאומרות לה היכן היא צריכה לשבת על הדף – פשוט! באופן דומה, עבור כל אחת מהיישור האחרים שהוזכרו, WordPress מקצה שמות מחלקות שונים – כגון ‘aligncenter’ (לתמונות בכוונון מרכזי), ‘alignright’ (לתמונות בכוונון ימני) ו- ‘alignnone’ (לתמונות שיש בהן יישור מרכזי) לא מוקצה יישור מסוים) – שכל התייחסות לקבוצות שונות של פקודות CSS.

יש להודות (למרבה הצער), הרעיון של לעטוף את הראש ברחבי עולם פקודות ה- CSS יכול להיות מעט יותר מפחיד עבור משתמש וורדפרס הממוצע; עם זאת, אם יש לך עניין ללמוד עליהם יותר, הם יאפשרו לך במהירות להשיג מידה חדשה של חופש בכל מה שקשור לעיצוב התוכן שלך – או אפילו לאתר האינטרנט שלך כולו! אם אתה מעוניין ללמוד, עיין בפוסט הקודם שלנו היכן הכי כדאי ללכת ללמוד לימודי CSS באופן מקוון – או לחילופין פשוט המשך אל גוגל טוב והשתולל! 😉

סיכום

אז הנה לכם: יישור תמונות הסביר! בקיצור: השתמש ביישור שמאלי כשרוצים שתמונה תשב משמאל ואלמנטים אחרים (כמו טקסט וכו ‘) כדי לעטוף אותה לימין; השתמש ביישור מרכזי כשאתה רוצה שתמונה תשב באמצע / מרכז התוכן שלך ללא שום אלמנטים אחרים בשני צדיו. השתמש ביישור ימני כשרוצים שתמונה תשב לימין ואלמנטים אחרים של רשת שכנה שתעטוף אותה משמאל; ולהשתמש ביישור של ‘אין’ אם ברצונך שהתמונה שלך תשב בדיוק במקום שאתה בוחר למקם אותה ביחס לאלמנטים הסמוכים שלה (כלומר טקסט וכו ‘) – ולבסוף, אם אתה רוצה שתמונה תהיה ממוקמת משמאל לתוכן -הארץ שבתוכה היא שוכנת, אך לא רוצים שאף טקסט וכו ‘יופיע מימין לו, הקצה לתמונה יישור של’ אין ‘והבטיח שהוא יושב בפסקה הפרטית שלו!

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

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

שימושי?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me