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

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

נתחיל מהקוד 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)