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

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

יצירת ערכת נושא וורדפרס יכולה לקחת לא מעט עבודה כשאתה מתחיל מאפס מכיוון שאתה צריך להרכיב לא מעט קוד PHP (שפת התכנות ש-WordPress משתמשת בו) לפני שתוכל אפילו להגיע ליצירת המראה והתחושה שלך אֲתַר. אנחנו הולכים לחסוך לך את הטרחה על ידי אספקת הקבצים האלה שהוכנו מראש עבורך, בתוספת מבנה שלד של ה-CSS שאתה צריך כדי לגרום לאתר הוורדפרס שלך להיראות כמו שאתה רוצה. קוד ה-PHP מבוסס עלעבודתו של איאן סטיוארט, אך עודכן עבור WordPress 3.3.1. אם אתה מוכן להתחיל, הנה מה שאתה צריך:

• וורדפרס, מותקן ומוכן לשימוש. במהלך פיתוח ערכות נושא אנו ממליצים בחום להפעיל שרת אינטרנט מקומי עם PHP ו-WordPress מותקנים כך שאינך בודק שינויים כלשהם שאתה מבצע בשידור חי בשרת האינטרנט שלך. זה גם הופך את הפיתוח למהיר הרבה יותר. כשתסיים, תוכל פשוט להתקין את ערכת הנושא המוגמרת בשרת האינטרנט שלך והיא תהיה מוכנה להפעלה. אם אתה רוצה להתפתח באופן מקומי, הדרך הקלה ביותר להתחיל היא עם שרתי האינטרנט העצמאייםWAMP(Windows) אוMAMP(OS X). הם מכילים את שרת האינטרנט של Apache עם PHP ו-MySQL מוכן לשימוש, כך שתוכלהורד והתקן וורדפרסבמהירות ובקלות. ברגע שהערכת הנושא שלך מוכנה לפעולה, התקנת וורדפרס על שרת תקין היא בדרך כלל די קלה. לדוגמה, המארח האהוב עלינו למתחילים,מארח חלומות, כולל התקנת וורדפרס בלחיצה אחת.

• שֶׁלָנוּקבצי נושא ריקים. הורד ופתח את ה-zip.

• ידע בסיסי ב-HTML ו-CSS (שניתן להשיגכָּאן).

• עיצוב שעשית עבור אתר הוורדפרס שלך (שאותו תוכל ללמוד כיצד לעשות בפוטושופכָּאן).

• אופציונלי: אם אינך רוצה להשתמש בעורך ערכות הנושא המובנה בוורדפרס, עליך לקבל עורך טקסט ידידותי לתכנות. (הנה הבחירות שלנו עבורחלונותוOS X.)

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

ברגע שיש לך הכל, אתה מוכן להתחיל ליצור את הנושא שלך!

הכר והתקן את קובצי הנושא שלך

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

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

• archive.php- מציג את רשימת הפוסטים בארכיון, בדומה לדף הראשי אך לפוסטים בארכיון.

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

• category.php- מציג את כל הפוסטים בקטגוריה נתונה.

• comments.php- כאשר בדף פוסט בודד ומתקבלות הערות, קובץ זה ישמש להצגת טופס ההערות.

• footer.php- הכותרת התחתונה שתוכנס בתחתית העמוד. תצטרך לערוך את הקובץ הזה ולהוסיף את מה שאתה רוצה שיופיע בכותרת התחתונה.

• functions.php- פונקציות מותאמות אישית עבור הנושא. אתה צריך להשאיר את זה לבד אלא אם כן אתה יודע PHP ויודע מה אתה עושה.

• header.php- מציג את הכותרת בראש כל עמוד באתר הוורדפרס שלך. זה הקוד שיוצר את התפריט.

• img- תיקייה לתמונות מותאמות אישית שבהן אתה משתמש בערכת הנושא שלך. אתה יכול להשאיר את זה ריק או למחוק אותו אם אתה לא משתמש בתמונות מותאמות אישית.

• index.php- מציג את דף הבלוג הראשי. כמו דפים רבים אחרים (למשל author.php, page.php, search.php וכו') בשילוב קבצי header.php, sidebar.php ו-footer.php כדי להציג את האתר כולו.

• page.php- מציג כל עמוד בודד. זה לא כולל פוסטים, אלא דפים סטטיים בודדים שיצרת ב-WordPress Admin.

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

• sidebar.php- קובץ זה מכיל את האזורים הראשיים והמשניים עבור ווידג'טים של סרגל הצד. אתה יכול להוסיף ווידג'טים לאזורים האלה דרך ה-WordPress Admin ולא צריך לערוך את הקובץ הזה.

• single.php- מציג פוסט בודד עם או בלי הערות.

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

• סגנונות- תיקיה שתכיל קבצי CSS נוספים שתוכל להשתמש או לייבא. אם אתה לא משתמש בזה, אתה יכול פשוט למחוק אותו.

• tags.php- מציג פוסטים עבור תג נתון.

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

1. היכנס למקטע הניהול של וורדפרס שלך. אתה בטח יודע איפה זה, אבל אם לא זה, כברירת מחדל, בhttps://yourdomain.com/wp-admin(או אם אתה מפעיל WAMP/MAMP זה, כברירת מחדל, ב-https://localhost:8888/wp-admin).

2. עבור ללשונית המראה בתפריט השמאלי ובחר מראה -> ערכות נושא.

3. מהתפריט למעלה (שיש לו רק שתי כרטיסיות), בחר התקן ערכות נושא.

4. לחץ על הקישור העלאה.

5. לחץ על הלחצן בחר קובץ... כדי לבחור את הקובץ lh_wordpress_blank_theme.zip שהורדת ולאחר מכן לחץ על התקן כעת.

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

לחלופין, אם אתה מעדיף להתקין באמצעות FTP או פשוט להעביר את הקבצים לספרייה הנכונה במחשב המקומי שלך, פתח את ה-lh_wordpress_blank_theme.zip ושנה את שמו ל"ריק" (או מה שתרצה). כעת מצא את תיקיית ה-wp-content בספריית ההתקנה של וורדפרס ופתח אותה. תראה בפנים ספרייה בשם "ערכות נושא". העתק לתוכו ריק, ולאחר מכן בצע את השלב האחרון בשלבים שלמעלה כדי להפעיל אותו באתר וורדפרס שלך.

סגנון עיצוב וורדפרס שלך

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

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

גלובלי: ברירות מחדל של סגנון כללי

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

פריסת עמוד

הפריסת עמודהחלק של הקובץ styles.css מכיל רק שני בלוקי קוד: אחד עבורdiv#מיכלואחד עבורdiv#content. בשני המקרים אנו מכוונים לתגי DIV. זה התקשרמְכוֹלָהזה מה שמכיל פחות או יותר את כל מה שבדף זהאינוהכותרת העליונה או התחתונה. זה אומר שיש לך את הפוסט, הדף הסטטי או הבלוג, התגובות והווידג'טים של סרגל הצד עטופים באחד הזהמְכוֹלָה. כברירת מחדל, נתנו לו שוליים של 4 פיקסלים כדי להכניס את כל התוכן הזה רק מעט מהכותרת. אתה יכול להתאים אותו איך שאתה רוצה ולהוסיף כל סגנונות חדשים שתרצה כאן. התוֹכֶןDIV, לעומת זאת, כולל רק את הפוסט, הדף הסטטי או הבלוג (והערות, אם הן גלויות). כל הסגנונות שתוסיף כאן ישפיעו רק על התוכן הזה. אחד הדברים הראשונים שתרצו לעשות הוא למקם את ה-DIV הזה איפשהו בדף. באופן מסורתי הוא מיושר לשמאל באמצעות קוד CSS זה:

float: left;

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

div#content{        width: 640px;        float: left;        margin: 0 0 0 51px;        padding: 0 18px 0 0px;}

כפי שאתה יכול לראות, יש לו רוחב של 640 פיקסלים. הוא גם צף שמאלה, בדיוק כמו שדיברנו עליו קודם. בנוסף, הוספתי שוליים של 51 פיקסלים בצד שמאל ו-18 פיקסלים של ריפוד בצד ימין. איך אני יודע אילו מספרים מתאימים לאיזה צדדים? בשולי ה-CSS ובקוד הריפוד, זה הולך כך: למעלה, ימין, תחתון, שמאל. קל לזכור זאת מכיוון שבקיצור, זה נראה כמו TRBL. זה נשמע כמו צרות או נורא כשאתה משמיע את זה. כך או כך, זו דרך מהירה וקלה לזכור את זה.

כּוֹתֶרֶת

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

• עמוד ראשון

• עמוד שני

• עמוד שלישי

• עמוד רביעי

• עמוד חמישי

הנקודות לא יהיו ירוקות, אבל בעצם תקבל רשימה. אתה לא רוצה את זה, ויש להניח שאתה רוצה שהתפריט ירוץ בחלק העליון של העמוד. טיפלנו בבעיה זו עבורך ועיצבנו את התפריט כך שהוא יופיע כשורה אחת של אפשרויות ולא כרשימה לא מסודרת. יש שני חלקים של CSS שגורמים לזה לקרות. הראשון שייך לרכיב ul (רשימה לא מסודרת) של .menu class':

.menu ul{    list-style: none;    margin: 0;}

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

.menu li{    display: inline;    float: left;    padding: 0 8px 0 4px;}

קוד זה אומר לרשימה להציג בשורה, מה שאומר שהיא תוצג בשורה ולא ברשימה מסורתית. בנוסף, כל פריט ברשימה (li) נאמר לצוף שמאלה (מה שייתן לנו קצת יותר חופש להזיז כל פריט) ויש לו 8 פיקסלים של ריפוד בצד ימין ו-4 פיקסלים של ריפוד בצד שמאל (כך שהטקסט אינו כל כך מרוכז יחד כל זה מספיק כדי להשיג לך תפריט בסיסי, אבל אנחנו רוצים גם לעצב את האלמנט (כמו ב-a href, תג הקישור) כדי לגרום לכל הקישורים בתפריט להיראות כמו שאנחנו רוצים. בשביל זה אנחנו צריכים את ה-CSS הזה:

.menu-item a{        font-size: 30px;        text-decoration: none;        color: #3eaf00;}.menu-item a:hover{        color: #5d8a05;}

כל מה שהקוד הזה עושה הוא להגדיר את גודל הגופן (ל-30px), את צבע הגופן לירוק (במיוחד #3eaf00), ולהסיר את הקו התחתון המופיע תחת קישורים כברירת מחדל (קישוט טקסט: אין). מצב הרחף רק מציין ירוק כהה מעט יותר (#5d8a05) שיוצג כאשר המשתמש עובר מעל קישור תפריט כלשהו. זה הכל די פשוט, CSS בסיסי, אבל זה מאפשר לך לגרום לתפריט שלך להיראות שונה מהטקסט האחר בדף שלך מבלי להזדקק לתמונות. אם אתה רוצה לשנות את הטקסט אפילו יותר, אתה יכול לשקול גופן אחר או להמיר הכל לטקסט גדול או קטן. אם אתה צריך כמה אפשרויות טובות של גופני אינטרנט, אתה יכול למצוא מאות ב-ספריית גופני האינטרנט של גוגל.

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

תוכן: פוסטים ודפים

זכור אתdiv#contentסגנון שהגדרנו קודם? כמעט כל דבר בקטע הזה ובשני קטעי התוכן הבאים של הפוסט הזה מתייחס לסגנונות שקיימים בדיוק בתוך אותו DIV. רוב ה

.entry-title
זהו סגנון המתייחס לכותרות עמוד שונות. בקובץ styles.css, תמצא אותו מצורף ל-h1s, h2s ו-h3s לרוב. כותרות פוסטים מאמצות את סגנון ה-.entry-title ללא קשר לתג h# שהם, כך שתוכל להגדיר כל אחד בנפרד על ידי ציון תחילה h# ולאחר מכן הוספת .entry-title אליו. אתה יכול לראות זאת במספר בלוקי קוד מוגדרים מראש בקובץ styles.css שלך, כגון h1.entry-title ו-h2.entry-title. כותרות דפים סטטיות פועלות באותו אופן, אבל הסגנון שלהן הוא .page-title ובדרך כלל הם משתמשים רק בתג h1 יחד עם הסגנון הזה. זה אומר שלא תצטרך להגדיר סגנונות כותרות כלשהם עבור כותרות עמודים מעבר ל-h1.page-title. עיצוב כותרות אלה הוא בדיוק כמו עיצוב כל טקסט אחר, אבל אתה רוצה שהם יהיו גדולים. אם הם קטנים כמו טקסט אחר, הם לא יבלטו כמו שצריך.

.alignrightו.alignleft
שני הסגנונות האלה פשוט מיישרים את התמונות לשמאל ולימין של ערך (ואתה כנראה יכול לנחש מי זה איזה). תבחין גם שבקובץ styles.css שלך, ריפוד מוחל על שלושה צדדים של התמונה אך לא על אחד. מַדוּעַ? הצד ללא ריפוד הוא הצד שלא יהיה ליד הטקסט. זהו הצד הימני של התמונה בתמונות מיושרות לימין והצד השמאלי בתמונות מיושרות לשמאל. זה נעשה כדי שהתמונה לא תיראה מפוצלת בצורה מביכה בגוש טקסט העוטף אותה. כאשר אתה יוצר את הפוסטים והדפים שלך בוורדפרס ומוסיף להם תמונות, תוכל לבחור את יישור התמונה בתוך העורך. סגנונות אלו יוחלו אוטומטית על כל תמונה מיושרת בפוסט שלך. אלא אם אתה רוצה להגדיל/להקטין את הריפוד, או להוסיף סגנונות נוספים, אתה יכול להשאיר את שני השיעורים האלה לבד.

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

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

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

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

תוכן: הערות

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

.תגובות
בעיקר, ישנם שלושה: h3, ol, li ו-img. כמובן, h3 מתייחס לכותרת התגובה. מכיוון שההערות מתפרסמות ברשימה מסודרת, האלמנטים ol (רשימה מסודרת) ו-li (פריט רשימה) נחוצים. ברוב המקרים תרצה לשאול כמה סגנונות מתפריט הכותרות שלך, כי למעשה לא תרצה מספרים ליד ההערות שלך. ייתכן שתרצה גם לשנות את צבע הרקע של כל תגובה ברשימה או להוסיף גם סגנונות אחרים. אתה יכול לעשות זאת על ידי עיצוב האלמנטים ol ו-li של מחלקת .comments. לבסוף, עיצוב אלמנט ה-img חשוב מכיוון שההערות יכילו אווטר עבור המשתמש. האווטאר הזה עשוי להיות ריק או גנרי, אבל הוא עדיין יופיע עבור כל מגיב. עיצוב תג ה-img במחלקת ההערות (.comments img) יספק לך שליטה על איך האווטרים האלה נראים ואיך הם מתנהגים כשהם מתאימים לטקסט ההערה.

.הֶעָרָה
בשם דומה מאוד למחלקה הקודמת, .comment הוא הסגנון שחל על הערות ספציפיות.

.יְלָדִים
ילדים היא הכיתה המשמשת למיקוד תשובות להערות. תשובות אלו נחשבות כילד של ההערה. גם תשובות לתשובות נחשבות לילדים.

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

תוכן: סרגל צד

עיצוב סרגל הצד הוא למעשה די קל, אבל זה יכול להיות מורכב יותר אם אתה רוצה להיות מאוד ספציפי. וורדפרס נותנת לך שני אזורי ווידג'טים:div#primaryוdiv#primary. אתה יכול למקד לכל אחד מה-DIVs בנפרד, או שאתה יכול להוסיף סגנונות לשניהם באמצעות.widget-areaמַחלָקָה. יתר על כן, כל ווידג'ט שתוסיף לאזור ווידג'ט מתווסף כפריט רשימה — הפתעה! ה.xoxoclass מוחל על רשימה זו וניתן להשתמש בו כדי להפריד ולעצב כל ווידג'ט כמו שאתה רוצה. עם זאת, אם אתה רוצה להיות ספציפי באמת, תצטרך למקד ישירות לכל ווידג'ט. נדון כיצד לעשות זאת בסעיף הבא.

סגנונות נוספים

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

אם אתה משתמש ב-Chrome, כלי הפיתוח הזה מובנה ישירות. פשוט הצג תצוגה מקדימה של ערכת הנושא שלך תוך כדי פיתוחו ופתח את כלי המפתחים. אתה יכול לעשות זאת על ידי מעבר לתפריט תצוגה ובחירה במפתח -> כלים למפתחים. בפיירפוקס (ובדפדפנים רבים אחרים), פשוטהורד והתקן את Firebug, ולאחר מכן לחץ על תוסף Firebug כדי להפעיל אותו. לא משנה באיזה כלי תשתמש, זה יגרום למסך להתפצל לחצי העליון והתחתון. החצי העליון יכיל את העמוד והחצי התחתון יכיל את קוד הדפים. אם תעביר את העכבר מעל אלמנט כלשהו בדף, תראה אותו מודגש בקוד כדי שתוכל לבדוק עוד יותר. זה יגיד לך במהירות איך קוראים לאלמנט ויראה לך סגנונות שכבר הוחלו עליו. לאחר מכן תוכל להשתמש בידע הזה כדי להוסיף סגנון חדש עבור רכיב זה (או המחלקה שהוחלה עליו). פשוט המשך לעשות זאת עד שתמצא את כל הסגנונות שברצונך להוסיף לקובץ styles.css שלך. כשתסיים, יהיה לך ערכת נושא הושלמה!

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