וורדפרס התפתחה עם השנים, וכיום היא פלטפורמה די גמישה וקלה להתאמה אישית באמצעות עורך הבלוק שלה, גוטנברג. ובכל זאת, יהיו מקרים שבהם אתה צריך קצת יותר טווח הגעה ממה שעורך גוטנברג מספק.
זה המקום שבו CSS מותאם אישית בא שימושי. סגנון CSS מאפשר לך לערוך את הצבעים, המרווחים, הגופנים, הפריסות ובעצם כל אלמנט ויזואלי אחר באתר וורדפרס שלך, מה שמאפשר לך לגרום לו להיראות בדיוק איך שאתה רוצה.
במאמר זה, נדריך אותך דרך היסודות של התאמה אישית של אתר וורדפרס שלך עם CSS.
למה להתאים אישית את האתר שלך עם CSS?
הוספת CSS מותאם אישית היא רק אחת מהשיטות בהן תוכל להשתמש כדי לכוונן את מראה האתר שלך. שיטות אחרות כוללות שימוש ב- a נושא וורדפרס מובחר היטב, או התקנת בונה דפים.
בעוד ששתי השיטות הללו קצת יותר קלות לשימוש למתחילים, ואינן דורשות ידע בקידוד, השימוש ב-CSS מותאם אישית הוא יתרון יותר בשתי דרכים עיקריות:
עלות אפס
ערכות נושא פרימיום ובוני דפי וורדפרס יכולים להיות שימושיים, אבל יש להם עלות - בדולרים ובסנט. חמוש עם הידע כיצד לכתוב CSS מותאם אישית, לעומת זאת, אתה יכול להשיג את אותן ההשפעות מבלי להיכנס להוצאות נוספות.
נפיחות מינימלית
בוני דפים וערכות נושא מאופיינות היטב נועדו להעניק למשתמשים יותר גמישות ומגוון רחב של אפשרויות להתאמה אישית של אתרי האינטרנט שלהם. בגלל זה, הם נוטים להוסיף נפיחות לאתרים, מה שעלול להאט אותם.
בעת כתיבת CSS מותאם אישית, לעומת זאת, תוסיף רק את התכונות הדרושות, ובדרך כלל תגרום לאתרים קלים יותר ומהירויות טעינה מהירות יותר.
3 שיטות קלות להתאים אישית את אתר הוורדפרס שלך עם CSS
אני מקווה שאתה כבר יודע איך לכתוב CSS. לאחר שתכיר את היסודות, תוכל להשתמש בכל אחת מהשיטות הבאות כדי להוסיף CSS מותאם אישית לאתר הוורדפרס שלך:
שיטה 1: השתמש ב- WordPress Customizer
עם וורדפרס 4.7 או כל גרסה אחריה, אתה יכול להוסיף CSS מותאם אישית ישירות מאזור הניהול. זוהי השיטה הפשוטה ביותר, ומכיוון שקיימת תצוגה מקדימה חיה זמינה, אתה יכול לראות כל שינוי שתבצע בזמן אמת.
זה גם המומלץ ביותר, מכיוון שכל השינויים שתבצע נשמרים בתוך וורדפרס עצמה. המשמעות היא שגם אם תשנה או תעדכן את ערכת הנושא שלך, לא תאבד את ה-CSS המותאם אישית שלך.
להלן הצעדים שיש לנקוט:
שלב 1: נווט ל מראה > התאמה אישית.
זה יפתח את התאמה אישית של ערכת הנושא של וורדפרס, שמראה לך תצוגה מקדימה חיה של האתר שלך בצד ימין, יחד עם כמה אפשרויות התאמה אישית בצד שמאל. גלול מטה לתחתית החלונית השמאלית, ותמצא CSS נוסף לשונית.
שלב 2: הקלק על ה CSS נוסף לשונית.
פעולה זו תפתח תיבה קטנה בחלונית השמאלית שבה תוכל להוסיף את ה-CSS המותאם אישית שלך. אתה יכול להקליד כמה שורות של קוד CSS שתרצה. הדבר הגדול בעורך הזה הוא שהוא מאמת את הקוד שלך, ומתריע אם יש שגיאות כלשהן.
שלב 3: פרסם את השינויים שלך.
כל כלל CSS חוקי שתוסיף יופיע באזור התצוגה המקדימה החיה בצד ימין. כדי להחיל את השינויים באתר שלך, לחץ על לְפַרְסֵם לחצן בחלק העליון של החלונית השמאלית ברגע שאתה מרוצה. אם אינך רוצה שהשינויים ייכנסו לתוקף באופן מיידי, תוכל גם לתזמן פרסום במועד מאוחר יותר או לשמור את עבודתך כטיוטה.
חשוב לציין שכל השינויים שתבצע באמצעות הפרמטר להתאמה אישית קשורים לנושא הנוכחי שלך. אם אי פעם תעבור לנושא אחר, השינויים יאבדו אלא אם תעתיק את ה-CSS המותאם אישית שלך ותוסיף אותו לנושא החדש. מומלץ לשמור את כל ה-CSS המותאם אישית שאתה מוסיף לערכת נושא בפנקס רשימות. בדרך זו, אתה יכול פשוט להעתיק את הקוד ולהדביק אותו בקטע "CSS נוסף" עבור נושא אחר.
אם זה נשמע כמו יותר מדי עבודה, ואתה מעדיף פתרון המאפשר לך להחיל את ה-CSS המותאם אישית שלך על כל ערכת נושא של וורדפרס שאתה משתמש בו, השיטה הבאה היא בשבילך.
שיטה 2. השתמש בתוסף
תוספי CSS מותאמים אישית מאחסנים את ה-CSS המותאם אישית שלך בנפרד מהנושא שלך, ומאפשרים להחיל את השינויים שלך ללא קשר לערכת הנושא שאתה משתמש בו. תוספים אלה מגיעים גם עם תכונות נוספות כמו השלמה אוטומטית שיכולה להקל על הוספת CSS.
החיסרון היחיד הוא שהן תוכנות של צד שלישי, מה שאומר שהן עשויות להאט את האתר שלך. עם זאת, רוב התוספים הללו הם קלים, כך שבדרך כלל יש להם השפעה מועטה על ביצועי האתר שלך. להלן כמה מתוספי ה-CSS המותאמים אישית הטובים ביותר שתוכל להשתמש בהם:
- CSS מותאם אישית פשוט
CSS מותאם אישית פשוט הוא אחד מתוספי ה-CSS המותאמים אישית הפופולריים ביותר. הוא קל משקל, קל לשימוש ומציע תכונות נהדרות. להגדיר את זה קל. כל מה שאתה צריך לעשות הוא להתקין ולהפעיל את הפלאגין. לאחר מכן, נווט אל מראה חיצוני בחלונית השמאלית של לוח המחוונים שלך.
תראה אפשרות חדשה בשם CSS מותאם אישית. לחיצה עליו תפתח עורך שבו תוכל להוסיף את ה-CSS המותאם אישית שלך. לחץ על עדכן CSS מותאם אישית לחצן כדי לשמור את השינויים שלך. כדי לראות את השינויים, פשוט רענן את האתר שלך.
- CSS ו-JS מותאמים אישית פשוטים
אם אתה רוצה אפילו יותר תכונות, ה תוסף פשוט מותאם אישית של CSS ו-JS היא אופציה מצוינת. בנוסף להוספת CSS, זה מאפשר לך להוסיף ערכי JavaScript.
- גיבור CSS
אם אינך רוצה לכתוב שורת קוד אחת, ה תוסף CSS Hero מושלם עבורך. תוסף זה מציע עורך CSS ויזואלי עם תפריטים נפתחים ושדות קלט המאפשרים לך לערוך כמעט כל סגנון CSS באתר שלך מבלי שתצטרך לכתוב שום קוד.
שיטה 3. ערוך את הקוד הגולמי
שתי השיטות שתיארנו לעיל מאפשרות לך להוסיף CSS מותאם אישית לאתר שלך ללא צורך לגעת באף אחד מקבצי הנושא שלך. אבל, במקרים מסוימים, ייתכן שתרצה לערוך את ה-CSS של ערכת הנושא שלך או להוסיף ישירות CSS מותאם אישית לקוד של ערכת הנושא שלך.
כדי לעשות זאת, תצטרך לגשת לגיליון הסגנונות של האתר שלך. דרך קלה לגשת לגיליון הסגנונות הזה היא דרך ה עורך נושאים בלוח המחוונים של וורדפרס שלך.
עם זאת, לפני שנמשיך הלאה, יש כמה אמצעי הגנה שאתה צריך להפעיל. ראשון, לגבות את האתר שלך. בזמן עריכת קבצי ערכת הנושא שלך, קל לעשות טעויות שעלולות לקרוס את האתר שלך.
גיבוי מבטיח שיש לך אתר אינטרנט פונקציונלי לחזור אליו. הַבָּא, ליצור נושא לילד. אם תערוך ישירות את ערכת הנושא האב שלך, השינויים יאבדו בכל פעם שהנושא יעודכן.
לאחר שאמצעי ההגנה הללו יתקיימו, היכנס ל-WordPress שלך. לך ל מראה > עורך ערכת נושא. כאשר אתה לוחץ על אפשרות עורך הנושא, תראה תיבה קופצת המזהירה אותך מפני ביצוע שינויים ישירים בקבצי ערכת הנושא שלך. אם תבצע את השלבים שלעיל, אתה מוכן ללכת.
נְקִישָׁה אני מבין להמשיך.
לאחר שתלחץ, אתה אמור לראות את גיליון הסגנונות של האתר שלך כברירת מחדל. אם לא, פשוט הסתכל בחלונית הימנית ולחץ על style.css תחת גיליון סגנונות אוֹפְּצִיָה.
מכאן, תוכל לבצע שינויים ישירים בקבצי ערכת הנושא שלך. רק אל תשכח ללחוץ שמור ועדכן ברגע שתסיים.
קח שליטה על מראה האתר שלך עם CSS מותאם אישית
ללמוד כיצד לכתוב CSS מותאם אישית בוורדפרס עשוי לקחת קצת זמן למתחילים, אבל זה ייתן לך שליטה אמיתית על המראה של האתר שלך. וזה בעלות אפסית, ועם השפעה מינימלית על ביצועי האתר שלך.
עם זאת, אם אתה מעדיף לא לעשות שום עיצוב ידני, יש דרכים אחרות לבצע את העבודה, כמו שימוש באחד מבוני הדפים המובילים עבור וורדפרס.
רוצה לגרום לאתר הוורדפרס שלך להיראות מדהים אבל לא יכול להרשות לעצמו מפתח? נסה את בוני הדפים האלה של וורדפרס במקום זאת.
קרא הבא
- תִכנוּת
- CSS
- וורדפרס
- בניית אתרים
דיוויד הוא חובב וורדפרס שנלהב לעזור לעסקים קטנים לצמוח!
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם
