איך משנים צבע תפריט בוורדפרס

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

background-change

שינוי הצבע תלוי בסוג התמה שאתם משתמשים בה.

אני אתן דוגמה לשינוי תפריט בתמה שאני משתמש בה בוורדפרס באתר הזה – בוטסטרפ.

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

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

inspect-menu

2. כעת נפתח לי כלי הפיתוח, שמאפשר לי לראות מאחורי הקלעים איך בנוי ה-HTML וה-CSS של העמוד.

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

find-menu

4. אלחץ על התגית, בין אם היא DIV, P או כל אלמנט HTML אחר. זה יפתח לי בצד ימין את החלק הרלבנטי ב-CSS.

התגית שמצאתי שהיא רלבנטית היא:

<nav class="navbar navbar-light bg-faded">

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

menu-background-color

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

ה-Class שקובעת את צבע התפריט שמצאתי אותה היא bg-faded.

7. פה בגדול מגיע החלק בו אני נכנס לקובץ ה-CSS, מאתר איפה הקלאס של bg-faded, ומשנה את הצבע כראות עיני.

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

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

בינתיים נסתפק בהסבר הפשוט, ללא תמת בת.

נכנסים לקובץ ה-CSS של התמה, בדרך כלל style.css.

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

אני מצאתי את הקוד הרלבנטי תחת תיקיית CSS בבוטסטרפ, וחשבתי שהקוד יהיה בקובץ bootstrap.css, אבל הוא היה בסוף בקובץ bootstrap.min.css, הקוד המכווץ של ה-CSS.

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