הוספת מידע מחבר תיבת נושא WordPress שלך

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

לפני שנמשיך הלאה, בואו נסתכל כמה דוגמאות:

1. ניפוץ מגזין מחבר תיבת

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

2. ProBlogDesign מחבר תיבת

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

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

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

אלה הם הפרמטרים הבסיסיים בהם אנו נציג בסעיף byline המחבר. נוסיף את הפרמטרים האחרים מאוחר יותר (אם נדרש).

2. כדי להציג את תיבת המחבר, לפתוח את הקובץ single.php וליצור HTML HTML ייחודי שבו תיבת המחבר יהיה סגורה. לדוגמה

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

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

1. שם האב:

אם ברצונך להציג רק את השם הפרטי של המחבר, השתמש

2. שם משפחה של המחבר:

כדי להציג את שם המשפחה של המחבר, השתמש

3. הצג הן את השם הפרטי והן את שם המשפחה:

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

4. הצג שם המחבר עם קישור לאתר האינטרנט שלו :

תוכל להציג את שמו המלא של המחבר ובאותה עת לקשר את השם לאתר של המחבר. להשתמש

5. תיאור המחבר:

כדי להציג את התיאור של ביו המחבר, השתמש

6. קישור מחבר האתר קישור:

כדי להציג את כתובת האתר של המחבר, השתמש

כל הקודים הנ"ל ניתן להתאים אישית כדי להתאים את הסגנון שלך. תוכל גם להוסיף את הקודים הנ"ל בתוך תגי HTML כפי שמוצג להלן:

7. מחבר Gravatar:

כדי להציג את השימוש ב- Gravatar של המחבר

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

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

8. כתובת דוא"ל של המחבר:

כדי להציג את כתובת האימייל של המחבר, השתמש

9. קישור לחשבון טוויטר:

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

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

עכשיו לחזור קובץ single.php ולהוסיף

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

סגנון מחבר סעיף באמצעות CSS

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

 // מכיל את gravatar / / שאר הקוד / / מחבר תיבת מסתיימת

את המבנה הנ"ל ניתן להדגים באמצעות התרשים הבא

במבנה CSS לעיל, אנו יוצרים שלושה תגי div. תג div החיצוני יכיל את שני תגי div הפנימיים אשר נקראים "שמאל" ו "ימין" בהתאמה. את "שמאל" div יכיל gravatar מחבר בעוד div הנכון יכיל את שם המחבר, ביו ו Twitter פרופיל הקישור. אנו ליישר את "שמאל" div לשמאל ואת הזכות "div" מימין. הנה הקוד כולו ו- CSS שבו אתה צריך להשתמש

קוד

כלול את הקוד הבא בקובץ single.php שבו ברצונך להציג את קטע פרטי המחבר:

נכתב על ידי

CSS

כלול את הקוד הבא בגיליון סגנונות CSS

 .Wordana; font-size: 13px; background-color: #FAFAFA; הגבול: 1px solid # F0F0F0;} .ft [float: left; רוחב: 100px; גובה: 100px; margin: 25px;} .right {float: left; margin-top: 25px; width: 425px;}

הערה: מומלץ לשנות את שמות המחלקות על ידי השוואתם למחלקות הקיימות של הנושא, כדי למנוע התנגשות.

והנה הפלט של הקודים לעיל