ברוכים הבאים ל-LEMON!

קהילת LEMON הוקמה במטרה לשתף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור.
באתר תוכלו למצוא מגוון קטעי קוד שונים שתוכלו לשלב באתרים שלכם. בנוסף, יעלו לאתר מדריכים מתקדמים בנושא אלמנטור, כלים ותוספים שקשורים לאלמנטור, ועוד מגוון מדריכים בנושא בניית אתרים.

הרשמו לניוזלטר

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

קבוצת LEMON בפייסבוק

אתם מוזמנים להצטרף!

עיצוב תגובות בוורדפרס – המדריך המלא (בלי תוספים)

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

נתחיל מהקוד CSS

בעריכת Single Post אני לרוב מוסיף על הוידג׳ט של התגובות קוד CSS בסגנון של הקוד הבא:

/* LMN - Textarea & Input  */
form#commentform > p:not(.form-submit) textarea, form#commentform > p:not(.form-submit) input:not(#wp-comment-cookies-consent) {
    width: 100%;
    border-radius: 0;
    border: 1px solid #000;
}

/* LMN - Submit button */
selector form#commentform input#submit {
    color: #ffffff;
    font-size: 20px;
    background-color: #000000;
    border: 1px solid #000000!important;
    transition: .3s all;
    padding: 10px 30px;
    border-radius: 0;
}
selector form#commentform input#submit:hover {
    color: #000000;
    background-color: #ffffff !important;
}

/* LMN - Comments */
section#comments li.comment.even > article {
    background-color: #f9f9f9;
}
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
    padding: 30px;
}

/* LMN - Comments Reply Link */
.comment-reply-link {
    font-size: 14px;
    text-decoration: underline !important;
}Code language: CSS (css)

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

הגדרות נוספות דרך האלמנטור (הגדרות גלובליות)

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

כמה דברים שכדאי לשים לב אליהם:

א. הגדרת פונטים

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

ב. כפתורים ושדות טופס

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

ועוד קצת הגדרות דרך וורדפרס… (הגדרות > דיון)

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

אופציונלי – הסרה של שדה ״אתר״ מהתגובות

ברוב האתרים אין באמת צורך בשדה ״אתר״ בתגובות. כדי להסיר את השדה הזה יש להכניס את הקוד הבא לקובץ functions.php של התבנית:

add_filter('comment_form_default_fields', 'unset_url_field');
function unset_url_field($fields){
    if(isset($fields['url']))
       unset($fields['url']);
       return $fields;
}Code language: PHP (php)

מידע נוסף על תגובות בוורדפרס

למידע נוסף על תגובות בוורדפרס אני ממליץ להציץ בעמוד הבא:
How to Style the WordPress Comment Form (Ultimate Guide)

העתקת קישור

מוזמנים לשאול בפייסבוק!

8 תגובות

  1. היי, העתקתי את הקוד לוידג'ט של התגובות באלמנטור והוא העלה לי כמה שגיאות כמו: element name is overqualified. סידרתי את הקוד ומחקתי את ה- element name, אבל לא השתנה כלום. גם כשהעתקתי את הקוד כמו שהוא (בלי למחוק את שם האלמנט) ועידכנתי באלמנטור, דבר לא השתנה. תוכל לומר לי מה לא בסדר בבקשה? אני עובדת עם תבנית Astra.
    תודה!

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

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

  2. היי כפיר
    מאמר מועיל ביותר!
    שאלה קטנה: אם אני רוצה גם להוריד את שדה המייל מה אני צריך להוסיף ל -functions?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

לשאלות / בקשות / בעיות / כל דבר אחר… צרו איתנו קשר :)

אודות כותב/ת הפוסט
logo
נעים מאוד, אני כפיר בקיש. חולה דיגיטל, מייסד האתר LMN.co.il, פרילנסר בתחום העיצוב גרפי ובניית אתרים. בשנים האחרונות מתמקד בעיצוב ופיתוח אתרים מבוססי וורדפרס ואלמנטור, בדגש על אתרי תדמית מעניינים, דפי נחיתה, בלוגים ועוד. מאמין שהרצון ללמוד דברים חדשים ולהתפתח הוא הכרחי, במיוחד בתחום הדיגטל, ותמיד סקרן ללמוד ולשתף ידע. בין היתר מתעניין גם בעריכת וידיאו, אפטר אפקטס, תלת מימד, צילום ועוד ועוד…
הרשמו לניוזלטר

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