איך לעצב כל פריט בתפריט וורדפרס באופן שונה?

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

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

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

שנתחיל?

הדגשת טקסט על כפתור

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

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

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

פתיחת תג ההדגשה:

<b>

הכנסת המילה הרצויה (זו שמופיעה על הכפתור)

סגירת תג ההדגשה כך: <b/>

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

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

כלומר, כדי לוודא שקוד ההדגשה יעבוד כראוי, למשל על המילה ״יצירת קשר״ כפי שמוצג בדוגמה למעלה, מומלץ ליצור אותו קודם כל באנגלית:

<b> contact </b>

ולאחר שמירת התפריט ובדיקה שהטקסט אכן הודגש, לשנות רק אותו לעברית:

<b> יצירת קשר </b>

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

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

 

שינוי צבע טקסט על כפתור

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

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

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

<span style="color:green;"> click here </span>

איך בנוי הקוד?

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

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

בלוח הבקרה זה ייראה כך (יש להתייחס לקוד שמוצג בתוך שדה הכותרת):

כך זה נראה באתר:

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

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

וכך זה נראה באתר:

 

הוספת מסגרת לכפתור

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

זהו הקוד שנשתמש בו:

<span style="border: 2px solid black;">click here</span>

אז מה יש לנו כאן:

ראשית הגדרנו למערכת להוסיף מסגרת – border – מסביב למילה, ששוב שיניתי אותה לאנגלית כדי לא לשבש את מיקום התווים של הקוד. לאחר מכן הגדרנו את עובי המסגרת ל-2 פיקסלים (ניתן לשנות לכל עובי שרוצים על-ידי שינוי המספר). בהמשך הוספנו את סוג הקו שיוצג במסגרת. solid הוא קו רציף. אפשרויות נוספות הן למשל dashed שיציג קו מקווקו או dotted שיציג מסגרת מנוקדת.

ולסיום הוספנו את צבע המסגרת (black). ניתן להוסיף כל צבע שרוצים. אם רוצים להציג צבע מדוייק שיש לכם את קוד ה-hex שלו, ניתן במקום שם הצבע להוסיף את הקוד, למשל #306A2A.

כך זה נראה בלוח הבקרה:

וכך זה נראה עם קוד צבע במקום שם של צבע:

וכך זה נראה באתר, שימו לב למסגרת הירוקה סביב המילה click here:

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

 

שינוי צבע רקע של כפתור

כדי לשנות את צבע הרקע של אחד הכפתורים בתפריט, נשתמש בתג background-color בצורה כזאת:

<span style="background-color:yellow;">click here</span>

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

כך זה נראה בלוח הבקרה:

וכך זה נראה באתר:

 

ולאחר שינוי הטקסט של הכפתור לעברית:

 

שילוב של יותר מקוד עיצוב אחד בכפתור

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

כדי להוסיף יותר מקוד אחד, יש להפריד אותם עם תו הנקודה-פסיק.

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

<span style="border:2px solid black; color:#306a2a;">click here</span>

בואו נפרק את הקוד שלאחר ה-span style:

ראשית הגדרנו להוסיף מסגרת של 2 פיקסלים, כקו רציף (solid) בצבע שחור. סגרנו את הגדרות המסגרת עם ; כמו שעשינו עד עתה, ואז הוספנו קוד נוסף, של שינוי צבע הטקסט, על ידי המילה color והוספנו את הקוד של הצבע. סיימנו שוב עם ; וסגרנו את ה-span כרגיל.

כך זה נראה בלוח הבקרה (החלק הראשון של הקוד מוסתר):

וכך זה נראה באתר:

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

הקוד כמובן יהיה ארוך יותר ויראה כך:

<b><span style="border:2px solid #306a2a; color:#306a2a ;padding:4px">click here</span></b>

מה עשינו פה?

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

וכך זה נראה באתר לאחר ששיניתי את הטקסט לעברית:

 

לסיום, הוספתי לכפתור גם צבע רקע כדי להבליט אותו עוד יותר. הוספתי לקוד למעלה גם את הקוד background-color, אתם כבר יודעים איך להוסיף אותו 🙂

וכך זה נראה באתר:


טיפול בבעיות

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

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

 

רוצים ללמוד על קודים נוספים שניתן לשלב בטקסט ולהיכנס יותר לעומק בכל מה שקשור ל-HTML ול-CSS? באתר זה מוסברים היסודות, והוא כולל את כל הקודים שנלמדו בכתבה זו והרבה יותר.

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

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

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

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

יו, הגעת לסוף הכתבה 😯 מה עכשיו?

1. אם אהבת את התוכן, אפשר לשתף עם חברים:

Share on facebook
שיתוף בפייסבוק
Share on twitter
שיתוף בטוויטר
Share on linkedin
שיתוף בלינקדאין
Share on whatsapp
שיתוף בווטסאפ

2. אפשר לספר לנו מה חשבת, כדי שנוכל להמשיך להשתפר

כמה כתבה זו עזרה לך?

בחר/י כדי להצביע!

מאחר ואהבת את הכתבה...

נשמח לראותך גם ברשתות החברתיות שלנו!

מצטערים לשמוע שהכתבה לא היתה לך לעזר!

נשמח לשפר אותה!

תרצה/י לשתף אותנו מה אפשר לשפר בכתבה?

דירוג ממוצע לכתבה זו:
4.9
(9)

3. אפשר להירשם לקבלת עדכונים על כתבות ומדריכים חדשים:

העדכונים נשלחים אחת לשבוע, בימי חמישי בשעה 10:00 בבוקר וכוללים קישורים לכל הכתבות שפורסמו באותו שבוע.

עוד כתבות שעשויות לעניין אותך:

כבר הורדת את

החינמונים שלנו?

20 סעיפים שחייבים לעבור עליהם בבניית דף נחיתה

יש לך דף נחיתה? מתכנן/ת לבנות דף נחיתה? את הצ׳קליסט הזה אסור לך לפספס!

9 רעיונות לבניית עסק אונליין

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

איך לבחור חברת אחסון בתבונה

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

ארגז הכלים

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

סליחה על ההפרעה...

רק קפצתי לבדוק מה שלומך

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

זה משהו שיכול לעניין אותך?

* הקישור נפתח בחלונית חדשה כך שיהיה אפשר להמשיך לקרוא את הכתבה

דילוג לתוכן