תמונה ליד תמונה בוורדפרס

תמונה ליד תמונה בוורדפרס

כמה שיטות להציב תמונה ליד תמונה בוורדפרס

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

IMG_6887 upladphotowp

 IMG_9652 IMG_9645

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

wpeditor
אחרי שהתמונות שלך מיובאות לעורך שלך, פשוט להשתמש בלחצן וליישר במצב העורך ויזואלית. השתמש בשמאל ליישור התמונה הראשונה וליישור לימין לתמונה השנייה.

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

upladphotowp

בחר שמאל align לתמונה הראשונה וליישר לימין לתמונה השנייה.
בין אם תבחר בראשון או בשיטה השנייה לעיל, התמונות שלך צריכות לצאת משהו כמו הבא.

IMG_9652 IMG_6887

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

3. שיטת CSS ידנית
בשיטה זו תכניס קוד CSS באופן ידני. שיטה זו גם תיתן לך שליטה רבה יותר במונחים של כמה מקום יהיה בין התמונות שלך.
למעשה, יש מספר דרכים כדי להשיג גם בשיטה זו. אנחנו נלך על שתי אפשרויות.
בשורה CSS בשיטה זו אתה מכניס את סגנון CSS ישר לתוך קוד התמונה.
עבור לכרטיסיית “טקסט” בעורך שלך (קטע קוד ה-HTML), ותמצא את הקוד לתמונות שהוכנסו כבר.
יותר סביר, שיהיו שני חלקים לכל תמונה. יהיו לך אז את הקוד המקשר אותו. וזה יתחיל ככה:
href=”http://mysite.com/uncat <a ….>
ואז יהיה לך את הקוד שמושך את התמונה פנימה וזה יתחיל עם כך:
<Img …. >
שבסעיף שני אחרי img, יש לשים את קוד ה-CSS הבא ב
style = “float: עזב; שוליים ימני: 10px;”
בסך הכל, זה אמור להיראות כך:
<סגנון img = “float: שמאל; שוליים ימני: 10px;” ….
דבר זה ידחוף את התמונה לצד השמאל וייתן לך 10px של שטח לצד ימין של התמונה. תוכל אז להגדיל את זה, אם תרצה.
אפשר לעשות את אותו הדבר המדויק לתמונה השנייה.

IMG_9652 IMG_6887

3. השתמש בעמודות
השיטה האחרונה היא להשתמש בתוסף עמודה.
תוסף עמודה יאפשר לך לחלק  חלק מהדף שלך לעמודות שונות – לדוגמא שתי עמודות שכל אחד מהם מחצית מהדף. לחלופין, ייתכן שלחלק אותו לשתי עמודות שבו אחת היא שליש הרוחב והאחרת היא שני שלישים מהרוחב, וכו ‘
ישנם מספר תוספי עמודה . הכנסת קוד קצר לעמודות התוסף היא אחת האפשרויות למשל.
לאחר התקנת התוסף, אתה תוכל, למשל, להכניס שתי עמודות באמצעות קוד קצר. כל עמודה תיקח עד המחצית מהמקום.
בדוגמא שלהלן, הייתי שם כל תמונה כתובית לתמונה “… תמונה כאן ….”
[One_half] … תמונה כאן … [/ one_half]
[One_half] … תמונה כאן … [/ one_half]

כל הפתרונות טובים, יש כמובן לבדוק תאימות לדפדפנים שונים וגם למכישירים הניידים