• โฮมเพจ
  • บทความ
  • ทั่วไป
  • วิธีการจัดรูปแบบและปรับแต่งแบบฟอร์มความคิดเห็นของ WordPress? นอกจากนี้ ปรับเปลี่ยนรูปลักษณ์ของความคิดเห็นด้วย CSS

วิธีการจัดรูปแบบและปรับแต่งแบบฟอร์มความคิดเห็นของ WordPress? นอกจากนี้ ปรับเปลี่ยนรูปลักษณ์ของความคิดเห็นด้วย CSS

เผยแพร่แล้ว: 2019-05-03

วิธีปรับแต่งแบบฟอร์มความคิดเห็นของ WordPress - ย่อคำแนะนำ

comment_form() แสดงแบบฟอร์มแสดงความคิดเห็นที่สมบูรณ์เพื่อใช้ในเทมเพลต WordPress

ฟิลด์สตริงและแบบฟอร์มส่วนใหญ่สามารถควบคุมได้ผ่านอาร์เรย์ $args ที่ส่งผ่านไปยังฟังก์ชัน ขณะที่คุณอาจเลือกใช้ตัวกรอง comment_form_default_fields เพื่อแก้ไขอาร์เรย์ของฟิลด์เริ่มต้น หากคุณต้องการเพิ่มฟิลด์ใหม่หรือลบฟิลด์เดียว สนาม.

ฟิลด์ทั้งหมดจะถูกส่งผ่านตัวกรองของแบบฟอร์ม comment_form_field_$name โดยที่ $name เป็นคีย์ที่ใช้ในอาร์เรย์ของฟิลด์

ฟังก์ชัน WordPress 3.0+ – comment_form() มี 2 พารามิเตอร์ที่สามารถเลือกปรับเปลี่ยนได้ตามที่คุณต้องการ

นี่คือตัวอย่างอาร์กิวเมนต์ที่สามารถใช้ได้:

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

  • $args: มีตัวเลือกของเราสำหรับสตริงและฟิลด์ภายในแบบฟอร์มและอื่นๆ
  • $post_id: Post ID ใช้สำหรับสร้างแบบฟอร์ม หากเป็น null ก็จะใช้โพสต์ปัจจุบัน

วันนี้ฉันได้แก้ไขแบบฟอร์มความคิดเห็นและเพิ่ม CSS และสังเกตเห็นความแตกต่างอย่างมากในแบบฟอร์มความคิดเห็นของฉัน

ต้องการแบ่งปันการเปลี่ยนแปลงของฉันกับคุณ

มาเริ่มกันเลย:

วิธีที่ 1) การใช้ไฟล์ functions.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' ) ;

วิธีที่ 2) สำหรับธีม 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 และอาร์กิวเมนต์ฟิลด์

มีหลายวิธีที่คุณสามารถแก้ไขแบบฟอร์มความคิดเห็นได้ เพียงเพิ่มข้อความและรูปแบบ html ต่างๆ เพื่อแก้ไข

ตอนนี้อะไร? คุณต้องการแก้ไข CSS ด้วยรูปลักษณ์ด้านล่างหรือไม่?

แก้ไขความคิดเห็นของ WordPress รูปลักษณ์และความรู้สึกด้วย 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 จนถึงตอนนี้เราชอบและจะใช้ต่อไป