كيف تصمم وتخصص نموذج تعليق ووردبريس؟ بالإضافة إلى ذلك ، قم بتعديل مظهر التعليقات باستخدام CSS

نشرت: 2019-05-03

كيفية تخصيص نموذج تعليق WordPress - Crunchify Tips

يقوم comment_form() بإخراج نموذج تعليق كامل لاستخدامه في قالب WordPress.

يمكن التحكم في معظم السلاسل وحقول النموذج من خلال مصفوفة $args التي تم تمريرها إلى الوظيفة ، بينما يمكنك أيضًا اختيار استخدام عامل التصفية comment_form_default_fields لتعديل مجموعة الحقول الافتراضية إذا كنت ترغب فقط في إضافة حقل جديد أو إزالة واحدة حقل.

يتم أيضًا تمرير جميع الحقول بشكل فردي من خلال مرشح النموذج comment_form_field_$name حيث يكون $name هو المفتاح المستخدم في مصفوفة الحقول.

وظيفة WordPress 3.0+ - comment_form() بها معلمتان يمكن تعديلهما اختياريًا حسب رغبتك.

فيما يلي أمثلة على الوسيطات التي يمكن استخدامها:

1
<?php comment_form ( $args , $post_id ) ; ?>

  • $args: يحتوي هذا على خياراتنا للسلاسل والحقول الموجودة في النموذج وما إلى ذلك.
  • $post_id: يتم استخدام معرّف المنشور لإنشاء النموذج ، وإذا كان فارغًا ، فسيستخدم المنشور الحالي.

لقد قمت اليوم بتعديل نموذج التعليق وأضفت بعض CSS ولاحظت اختلافًا كبيرًا في نموذج التعليق الخاص بي.

أود مشاركة تغييراتي معك.

هيا بنا نبدأ:

الطريقة الأولى) استخدام ملف jobs.php - فقط من أجل Genesis

  • انتقل إلى Appearance
  • انقر فوق Editor
  • افتح ملف functions.php ثم ضع الكود أدناه.

هذا ما لدي في Crunchify لأنني أستخدم قالب إطار Genesis WordPress.

functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Modify comments header text in comments
add_filter ( 'genesis_title_comments' , 'child_title_comments' ) ;
function child_title_comments ( ) {
     return __ ( comments_number ( '<h3>No Responses</h3>' , '<h3>1 Response</h3>' , '<h3>% Responses...</h3>' ) , 'genesis' ) ;
}
 
// Unset URL from comment form
function crunchify_move_comment_form_below ( $ fields ) {
     $ comment_field = $ fields [ 'comment' ] ;
     unset ( $ fields [ 'comment' ] ) ;
     $ fields [ 'comment' ] = $ comment_field ;
     return $ fields ;
}
add_filter ( 'comment_form_fields' , 'crunchify_move_comment_form_below' ) ;
 
// Add placeholder for Name and Email
function modify_comment_form_fields ( $ fields ) {
     $ fields [ 'author' ] = '<p class="comment-form-author">' . '<input placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
                 esc_attr ( $ commenter [ 'comment_author' ] ) . '" size="30"' . $ aria_req . ' />' .
                 '<label for="author">' . __ ( 'Your Name' ) . '</label> ' .
                 ( $ req ? '<span class="required">*</span>' : '' )    .
                 '</p>' ;
     $ fields [ 'email' ] = '<p class="comment-form-email">' . '<input placeholder="[email protected]" name="email" type="text" value="' . esc_attr (    $ commenter [ 'comment_author_email' ] ) .
                 '" size="30"' . $ aria_req . ' />'    .
                 '<label for="email">' . __ ( 'Your Email' ) . '</label> ' .
                 ( $ req ? '<span class="required">*</span>' : '' )
                 .
                 '</p>' ;
     $ fields [ 'url' ] = '<p class="comment-form-url">' .
             '<input name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr ( $ commenter [ 'comment_author_url' ] ) . '" size="30" /> ' .
             '<label for="url">' . __ ( 'Website' , 'domainreference' ) . '</label>' .
               '</p>' ;
    
     return $ fields ;
}
add_filter ( 'comment_form_default_fields' , 'modify_comment_form_fields' ) ;

الطريقة الثانية) لأي موضوع WordPress آخر

ما عليك سوى فتح ملف comments.php واستبدال $args بالكود أدناه لتجميل كود التعليق بالعناصر النائبة.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$args = array (
     'fields' = > apply_filters (
         'comment_form_default_fields' , array (
             'author' = > '<p class="comment-form-author">' . '<input placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
                 esc_attr ( $commenter [ 'comment_author' ] ) . '" size="30"' . $aria_req . ' />' .
                 '<label for="author">' . __ ( 'Your Name' ) . '</label> ' .
                 ( $req ? '<span class="required">*</span>' : '' )    .
                 '</p>'
                 ,
             'email'   = > '<p class="comment-form-email">' . '<input placeholder="[email protected]" name="email" type="text" value="' . esc_attr (    $commenter [ 'comment_author_email' ] ) .
                 '" size="30"' . $aria_req . ' />'    .
                 '<label for="email">' . __ ( 'Your Email' ) . '</label> ' .
                 ( $req ? '<span class="required">*</span>' : '' )
                 .
                 '</p>' ,
             'url'     = > '<p class="comment-form-url">' .
             '<input name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr ( $commenter [ 'comment_author_url' ] ) . '" size="30" /> ' .
             '<label for="url">' . __ ( 'Website' , 'domainreference' ) . '</label>' .
               '</p>'
         )
     ) ,
     'comment_field' = > '<p class="comment-form-comment">' .
         '<label for="comment">' . __ ( 'Let us know what you have to say:' ) . '</label>' .
         '<textarea name="comment" placeholder="Express your thoughts, idea or write a feedback by clicking here & start an awesome comment" cols="45" rows="8" aria-required="true"></textarea>' .
         '</p>' ,
     'comment_notes_after' = > '' ,
     'title_reply' = > '<div class="crunchify-text"> <h5>Please Post Your Comments & Reviews</h5></div>'
) ;

لتخصيص نموذج التعليق ، يمكنك استخدام أي علامات / عناصر HTML كما ترى لقد وضعت علامة html إضافية في placeholder أعلاه.

نموذج التعليق - قبل :

Crunchify-WordPress-Comment-Form-Magaziene-Premium-Before

نموذج التعليق - بعد :

نموذج تعليق WordPress المحدث بعد وسائط CSS و Field المعدلة

هناك عدد من الطرق المختلفة التي يمكنك من خلالها تعديل نموذج التعليق. فقط استمر في إضافة نصوص مختلفة وأنماط html لتعديلها.

ماذا الآن؟ هل تريد تعديل CSS بالشكل والمظهر أدناه؟

قم بتعديل تعليقات WordPress Look and Feel باستخدام CSS

إذا كنت ترغب في تعديل CSS لنموذج التعليق الخاص بك ، فإليك handy code يمكنك إضافته إلى ملف style.css الخاص بالقالب.

style.css - Modify WordPress comments look and feel
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* ## Comments
--------------------------------------------- */
. comment - respond ,
. entry - pings ,
. entry - comments {
     color : #444;
     padding : 20px 45px 40px 45px ;
     border : 1px solid #ccc;
     overflow : hidden ;
     background : #fff;
    - webkit - box - shadow : 0px 0px 8px rgba ( 0 , 0 , 0 , 0.3 ) ;
    - moz - box - shadow : 0px 0px 8px rgba ( 0 , 0 , 0 , 0.3 ) ;
     box - shadow : 0px 0px 8px rgba ( 0 , 0 , 0 , 0.3 ) ;
     border - left : 4px solid #444;
}
. entry - comments h3 {
     font - size : 30px ;
     margin - bottom : 30px ;
}
. comment - respond h3 ,
. entry - pings h3 {
     font - size : 20px ;
     margin - bottom : 30px ;
}
. comment - respond {
     padding - bottom : 5 % ;
     margin : 20px 1px 20px 1px ;
         border - left : none ! important ;
}
. comment - header {
     color : #adaeb3;
     font - size : 14px ;
     margin - bottom : 20px ;
}
. comment - header cite a {
     border : none ;
     font - style : normal ;
     font - size : 16px ;
     font - weight : bold ;
}
. comment - header . comment - meta a {
     border : none ;
     color : #adaeb3;
}
li . comment {
     background - color : #fff;
     border - right : none ;
}
. comment - content {
     clear : both ;
     overflow : hidden ;
}
. comment - list li {
     font - size : 14px ;
     padding : 20px 30px 20px 50px ;
}
. comment - list . children {
     margin - top : 40px ;
     border : 1px solid #ccc;
}
. comment - list li li {
     background - color : #f5f5f6;
}
. comment - list li li li {
     background - color : #fff;
}
. comment - respond input [ type = "email" ] ,
. comment - respond input [ type = "text" ] ,
. comment - respond input [ type = "url" ] {
     width : 50 % ;
}
. comment - respond label {
     display : block ;
     margin - right : 12px ;
}
. entry - comments . comment - author {
     margin - bottom : 0 ;
     position : relative ;
}
. entry - comments . comment - author img {
     border - radius : 50 % ;
     border : 5px solid #fff;
     left : - 80px ;
     top : - 5px ;
     position : absolute ;
     width : 60px ;
}
. entry - pings . reply {
     display : none ;
}
. bypostauthor {
}
. form - allowed - tags {
     background - color : #f5f5f5;
     font - size : 16px ;
     padding : 24px ;
}
. comment - reply - link {
     cursor : pointer ;
     background - color : #444;
     border : none ;
     border - radius : 3px ;
     color : #fff;
     font - size : 12px ;
     font - weight : 300 ;
     letter - spacing : 1px ;
     padding : 4px 10px 4px ;
     text - transform : uppercase ;
     width : auto ;
}
. comment - reply - link : hover {
     color : #fff;
}
. comment - notes {
     display : none ;   
}

نحن نستخدم حاليا ملحق تعليق Disqus. حتى الآن نحبها وسنواصل استخدامها.