Add Filed and Remove input in Comment wordpress như thế nào?

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 18/8/20.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,024
    Đã được thích:
    80
    Điểm thành tích:
    48
    Add Filed and Remove input in Comment wordpress như thế nào? vậy các bạn, hiện tại của mình nó có trường Trang web URL mình muốn remove xóa nó đi, đổi nó thành trường Phone số điện thoại thì làm như thế nào?

    Và mình muốn xóa mấy cái lable bình luận, tên, Email đi thay vào đó là dạng placeholder trong input nằm bên trong ô nhập như hình dưới cho chuyên nghiệp và đỡ chiếm diện tích thì như thế nào? giúp mình với.


    add-field-to-comment.png

    Thằng mình muốn làm giống đây.

    remove-and-add-field-new-comment-wodpress.png
     
    Cảm ơn đã xem bài:

    Add Filed and Remove input in Comment wordpress như thế nào?

    lapmangfpt and admin like this.
  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đầy đủ đây nhé, chỉ cần add code sau vào function.php của themes là được ngay, có giải thích code làm gì từng dòng ở dưới rồi nhé.

    Code add:
    PHP:
    <?php
    //[Ap_dung_trong_giao_dien_nguoi_dung]xoa remove field url (duong dan web) tren commnet nguoi dung nhap
    add_filter('comment_form_default_fields''unset_url_field');
    function 
    unset_url_field($fields){
        if(isset(
    $fields['url']))
           unset(
    $fields['url']);
           return 
    $fields;
    }

    //[Ap_dung_trong_giao_dien_nguoi_dung]add filed phone, field moi vao khung commnet nguoi dung nhap
    add_filter'comment_form_defaults''change_comment_form_defaults');
    function 
    change_comment_form_defaults$default ) {
        
    $commenter wp_get_current_commenter();
        
    $default'fields' ][ 'author' ] .= '<p class="comment-form-phone">' .
                                                
    '<input id="phone" placeholder="Phone Number" name="phone" size="30" type="text" /></p>';
        
    $default'fields' ][ 'author' ] .= '<p class="comment-form-address">' .
                            
    '<input id="address" placeholder="Your Address" name="address" size="30" type="text" /></p>';
        return 
    $default;
    }

    //[Ap_dung_trong_giao_dien_nguoi_dung]cac suc kien khi them field moi vao nguoi dung nhap update, insert, view
    get_comment_meta$comment_id$meta_key$single false );
    add_comment_meta($comment_id$meta_key$meta_value$unique false );
    update_comment_meta($comment_id$meta_key$meta_value$unique false );
    delete_comment_meta$comment_id$meta_key$single false );

    //[Ap_dung_trong_giao_dien_nguoi_dung]su kien save field nay xuong database tu nguoi dung nhap vao
    add_action'comment_post''save_comment_meta_data' );
    function 
    save_comment_meta_data$comment_id ) {
        
    add_comment_meta$comment_id'phone'$_POST'phone' ] );
        
    add_comment_meta$comment_id'address'$_POST'address' ] );
    }

    //[Ap_dung_trong_giao_dien_nguoi_dung]hien thi len noi dung comment ngoai view neu la admin thi hien thi field nay len, o ngoai view nguoi dung
    add_filter'get_comment_author_link''attach_phone_to_author' );
    function 
    attach_phone_to_author$author ) {
        
    $phone get_comment_metaget_comment_ID(), 'phone'true );
        
    $address get_comment_metaget_comment_ID(), 'address'true );
        global 
    $current_user;
        
    get_currentuserinfo();
        
    //id = 1 is admin, hien thi sdt len
        
    if ( $phone && is_user_logged_in() && $current_user->ID == '1')
            
    $author .= " ($phone)";
        if ( 
    $address && is_user_logged_in() && $current_user->ID == '1')
            
    $author .= " ($address)";
        return 
    $author;
    }

    //[Ap_dung_trong_giao_dien_nguoi_dung] sua cac fiels email, name them vao placeholder o tung fields o giao dien nguoi dung
     
    function placeholder_author_email_url_form_fields($fields) {

        
    $fields['author'] = '<p class="comment-form-author">' .
                        
    '<input id="author" name="author" type="text" placeholder="Full Name" value="' esc_attr$commenter['comment_author'] ) . '" size="20"' $aria_req ' /></p>';
     
        
    $fields['email'] = '<p class="comment-form-email">' .
        
    '<input id="email" name="email" type="text" placeholder="Email" value="' esc_attr(  $commenter['comment_author_email'] ) .
        
    '" size="30"' $aria_req ' /></p>';
     
        return 
    $fields;
    }
    add_filter('comment_form_default_fields','placeholder_author_email_url_form_fields');

    //[Ap_dung_trong_giao_dien_nguoi_dung] sua fields commnet textarea noi dung o giao dien nguoi dung
    function my_comment_form_field_comment($field)
    {
        echo 
    '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="60" rows="6" maxlength="65525"  placeholder="Comment content" aria-required="true"></textarea></p>';
    }
    add_filter('comment_form_field_comment''my_comment_form_field_comment');


    //[Ap_dung_trong_Admin_quan_tri] Xem Them cot du lieu trong Edit_Comment trong quan tri admin
    add_action'add_meta_boxes_comment''extend_comment_add_meta_box' );
    function 
    extend_comment_add_meta_box() {
        
    add_meta_box'title'__'Data Add Comment' ), 'extend_comment_meta_box''comment''normal''high' );
    }
    function 
    extend_comment_meta_box $comment ) {
        
    $phone get_comment_meta$comment->comment_ID'phone'true );
        
    $address get_comment_meta$comment->comment_ID'address'true );
        
    wp_nonce_field'extend_comment_update''extend_comment_update'false );
        
    ?>
        <p>
            <label for="phone"><?php _e'Phone' ); ?></label>
            <input type="text" name="phone" value="<?php echo esc_attr$phone ); ?>" class="widefat" />
        </p>
         <p>
            <label for="phone"><?php _e'Address' ); ?></label>
            <input type="text" name="phone" value="<?php echo esc_attr$address ); ?>" class="widefat" />
        </p>
        <?php
    }
    //[Ap_dung_trong_Admin_quan_tri] Cho phep Luu xuong database khi sua o trong Edit_Comment quan tri admin
    add_action'edit_comment''extend_comment_edit_metafields' );
    function 
    extend_comment_edit_metafields$comment_id ) {
        if( ! isset( 
    $_POST['extend_comment_update'] ) || ! wp_verify_nonce$_POST['extend_comment_update'], 'extend_comment_update' ) ) return;

      if ( ( isset( 
    $_POST['phone'] ) ) && ( $_POST['phone'] != '') ) :
      
    $phone wp_filter_nohtml_kses($_POST['phone']);
      
    update_comment_meta$comment_id'phone'$phone );
      else :
      
    delete_comment_meta$comment_id'phone');
      endif;

      if ( ( isset( 
    $_POST['address'] ) ) && ( $_POST['address'] != '') ) :
      
    $address wp_filter_nohtml_kses($_POST['address']);
      
    update_comment_meta$comment_id'address'$address );
      else :
      
    delete_comment_meta$comment_id'address');
      endif;
    }

    ?>
    • Lưu ý: Xóa <?php ở đầu và ?> ở cuối đoạn code trên đi nhé.
    Hoặc code sau nếu code trên bị lỗi:
    PHP:
    add_filter('comment_form_default_fields', 'url_filtered');
    function url_filtered($fields)
    {
        $commenter = wp_get_current_commenter();
        unset($fields['author']);
        unset($fields['email']);

        $fields[ 'author' ] = '<p class="comment-form-author">'.
          '<input id="author" name="author" type="text" value="'. esc_attr( $commenter['comment_author'] ) .
          '" size="30" placeholder="Họ tên" tabindex="1" aria-required="true" /></p>';

        $fields[ 'email' ] = '<p class="comment-form-email">'.
          '<input id="email" name="email" type="text" value="'. esc_attr( $commenter['comment_author_email'] ) .
          '" size="30" placeholder="Email" tabindex="2" /></p>';

        $fields[ 'phone' ] = '<p class="comment-form-phone">'.
          '<input id="phone" placeholder="Số điện thoại" name="phone" aria-required="true" type="text" size="30"  tabindex="4" /></p>';

        if (isset($fields['url'])) unset($fields['url']);
        return $fields;
    }
    add_action( 'comment_post', 'save_comment_meta_data' );
    function save_comment_meta_data( $comment_id ) {
      if ( ( isset( $_POST['phone'] ) ) && ( $_POST['phone'] != ’) )
      $phone = wp_filter_nohtml_kses($_POST['phone']);
      add_comment_meta( $comment_id, 'phone', $phone );
    }

    //[Ap_dung_trong_Admin_quan_tri] Xem Them cot du lieu trong Edit_Comment trong quan tri admin
    add_action( 'add_meta_boxes_comment', 'extend_comment_add_meta_box' );
    function extend_comment_add_meta_box() {
        add_meta_box( 'title', __( 'Data Add Comment' ), 'extend_comment_meta_box', 'comment', 'normal', 'high' );
    }
    function extend_comment_meta_box ( $comment ) {
        $phone = get_comment_meta( $comment->comment_ID, 'phone', true );
        wp_nonce_field( 'extend_comment_update', 'extend_comment_update', false );
        ?>
        <p>
            <label for="phone"><?php _e'Phone' ); ?></label>
            <input type="text" name="phone" value="<?php echo esc_attr$phone ); ?>" class="widefat" />
        </p>

        <?php
    }
    //[Ap_dung_trong_Admin_quan_tri] Cho phep Luu xuong database khi sua o trong Edit_Comment quan tri admin
    add_action'edit_comment''extend_comment_edit_metafields' );
    function 
    extend_comment_edit_metafields$comment_id ) {
        if( ! isset( 
    $_POST['extend_comment_update'] ) || ! wp_verify_nonce$_POST['extend_comment_update'], 'extend_comment_update' ) ) return;

      if ( ( isset( 
    $_POST['phone'] ) ) && ( $_POST['phone'] != '') ) :
      
    $phone wp_filter_nohtml_kses($_POST['phone']);
      
    update_comment_meta$comment_id'phone'$phone );
      else :
      
    delete_comment_meta$comment_id'phone');
      endif;
    }
    DEMO Hình Ảnh:

    Khi admin đăng nhập sẽ như sau, chỉ admin mới xem được Phone và địa chỉ, Khách hàng sẽ không thấy trên commnet.

    giao-dien-admin-quan-ly-comment.jpg

    Khi người dùng không đăng nhập vào sẽ hiện như sau:

    giao-dien-nguoi-dung-truy-cap-se-hien-thi.jpg

    Khi admin truy cập vào xem commnet ở /wp-admin/edit-comments.php sẽ hiện như sau để quản lý thay đổi lại thông tin tùy thích.

    phan-quan-ly-comment-o-admin.jpg

    Trên mobi Responsive

    mobi-comment-responsive.jpg

    Web demo: https://www.healcentral.org/viagra/
     
    Chỉnh sửa cuối: 1/9/22
    hadepzai2019 and seolagi like this.
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,024
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, còn nhiều hơn mình cần, mình đang sử dụng themes newspages giống cái web của admin đang xài, cho mình xin cái teamplate style css của nó giống như web đó với, cảm ơn hihi
     
    admin thích bài này.
  4. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Đây bạn nhé:

    CSS của Comment themmes newspages đó.
    HTML:
    /* Comment */
    .comments .comment-respond
    {
        background-color: #f1f1f1;
        float: left;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }
    .comments input[type=text],
    .comments input[type=url],
    .comments input[type=tel],
    .comments input[type=email] {
        font-size: 14px;
    }
    .comments .block-title {
        margin-bottom: 0px;
    }
    .comment-list
    {
        width: 100%;
        float: left;
        margin-top: 0px;
    }
    .comments .td-comments-title-wrap
    {
        float: left;
        width: 100%;
    }
    .comments textarea {
        font-size: 14px;
        height: 100px;
        min-height: 100px;
    }
    .comments #reply-title {
        padding-left: 15px;
        color: #2e6b40;
        font-size: 20px;
    }
    .comments .comment-respond p
    {
        padding: 0px 10px;
        margin-bottom:10px;
    }
    .comments .comment-form-author,
    .comments .comment-form-phone,
    .comments .comment-form-address,
    .comments .comment-form-email
    {
        width: 50%;
        float:left;
    }
    .comments input[type="submit"] {
        background-color: #046738;
    }
    .comment-form-cookies-consent, .comment-notes
    {
        display:none;
    }
    .comment .avatar {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 4px;
    }
    .comment cite {
        color: #046738;
    }
    .comment-reply-link
    {
        background: #046738;
        padding: 4px 15px;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        border-radius: 5px;
    }
    .comment-list > .comment
    {
        border: 1px solid #ddd;
        background-color: #f1f1f1;
        margin: 15px 0 5px;
        padding: 10px 15px;
    }
    .comment-list .comment .children
    {
        background: #f7f7f7;
        margin: 15px 0 5px 70px;
        border: 1px solid #ddd;
        padding: 10px 15px;
    }
    /* responsive cho di động comment */
    @media (max-width: 767px) {
        .comment-list .comment .children {
            margin: 15px 0 5px 70px;
            padding: 10px 5px;
            margin-left: 0px;
            float: left;
            width: 100%;
        }
        .comment-list > .comment {
            margin: 15px 0 5px;
            padding: 10px 5px;
        }
        .comment-list .comment footer
        {
            width: 100%;
            float: left;
        }
        .comment .comment-content {
            margin-top: 0px;
            float: left;
            width: 100%;
        }
        .comment .comment-meta {
            margin-top: 3px;
            float: left;
            width: 100%;
        }
        .comment-list .comment,
        .comment-list > .comment,
        .comment-list article
        {
            float:left;
            width:100%;
        }
        .comment .comment-content,
        .comment .comment-meta,
        .comment .comment-respond {
            margin-left: 5px;
        }
        .comment .children .comment .comment-content,
        .comment .children .comment .comment-meta,
        .comment .children .comment .comment-respond {
            margin-left: 5px;
        }
       .comments .comment-form-author, 
       .comments .comment-form-phone, 
       .comments .comment-form-address, 
       .comments .comment-form-email {
            width: 100%;
            float: left;
        }
    }
    /* Comment */
    
     
    Chỉnh sửa cuối: 18/8/20
    seolagi thích bài này.
  5. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,024
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, rất chi tiết ạ. Cho mình xin bản việt hóa của code trong function.php của nó đi bạn, của mình add vào toàn tiếng anh, mình save sửa tiếng việt nó toàn bị lỗi fonts zzz !
     
    Last edited by a moderator: 18/8/20
  6. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bản việt hóa đây bạn nhé:

    PHP:
    <?php

    //xoa remove field url (duong dan web) tren commnet
    add_filter('comment_form_default_fields''unset_url_field');
    function 
    unset_url_field($fields){
        if(isset(
    $fields['url']))
           unset(
    $fields['url']);
           return 
    $fields;
    }

    //add filed phone, field moi vao khung commnet
    add_filter'comment_form_defaults''change_comment_form_defaults');
    function 
    change_comment_form_defaults$default ) {
        
    $commenter wp_get_current_commenter();
        
    $default'fields' ][ 'author' ] .= '<p class="comment-form-phone">' .
                                                
    '<input id="phone" placeholder="S&#x1ED1; &#x0111;i&#x1EC7;n tho&#x1EA1;i" name="phone" size="30" type="text" /></p>';
        
    $default'fields' ][ 'author' ] .= '<p class="comment-form-address">' .
                            
    '<input id="address" placeholder="&#x0110;&#x1ECB;a ch&#x1EC9; (n&#x1EBF;u c&#x00F3;)" name="address" size="30" type="text" /></p>';
        return 
    $default;
    }

    //cac suc kien khi them field moi vao.
    get_comment_meta$comment_id$meta_key$single false );
    add_comment_meta($comment_id$meta_key$meta_value$unique false );
    update_comment_meta($comment_id$meta_key$meta_value$unique false );
    delete_comment_meta$comment_id$meta_key$single false );

    //su kien save field nay xuong database
    add_action'comment_post''save_comment_meta_data' );
    function 
    save_comment_meta_data$comment_id ) {
        
    add_comment_meta$comment_id'phone'$_POST'phone' ] );
        
    add_comment_meta$comment_id'address'$_POST'address' ] );
    }

    //hien thi len noi dung comment ngoai view neu la admin thi hien thi field nay len.
    add_filter'get_comment_author_link''attach_phone_to_author' );
    function 
    attach_phone_to_author$author ) {
        
    $phone get_comment_metaget_comment_ID(), 'phone'true );
        
    $address get_comment_metaget_comment_ID(), 'address'true );
        global 
    $current_user;
        
    get_currentuserinfo();
        
    //id = 1 is admin, hien thi sdt len
        
    if ( $phone && is_user_logged_in() && $current_user->ID == '1')
            
    $author .= " ($phone)";
        if ( 
    $address && is_user_logged_in() && $current_user->ID == '1')
            
    $author .= " ($address)";
        return 
    $author;
    }

    //sua cac fiels email, name
     
    function placeholder_author_email_url_form_fields($fields) {

        
    $fields['author'] = '<p class="comment-form-author">' .
                        
    '<input id="author" name="author" type="text" placeholder="H&#x1ECD; t&#x00EA;n" value="' esc_attr$commenter['comment_author'] ) . '" size="20"' $aria_req ' /></p>';
       
        
    $fields['email'] = '<p class="comment-form-email">' .
        
    '<input id="email" name="email" type="text" placeholder="Email" value="' esc_attr(  $commenter['comment_author_email'] ) .
        
    '" size="30"' $aria_req ' /></p>';
         
        return 
    $fields;
    }
    add_filter('comment_form_default_fields','placeholder_author_email_url_form_fields');

    //sua fields commnet textarea noi dung
    function my_comment_form_field_comment($field)
    {
        echo 
    '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="60" rows="6" maxlength="65525"  placeholder="N&#x1ED9;i dung" aria-required="true"></textarea></p>';
    }
    add_filter('comment_form_field_comment''my_comment_form_field_comment');


    //Xem Them cot du lieu trong Edit_Comment trong quan tri admin
    add_action'add_meta_boxes_comment''extend_comment_add_meta_box' );
    function 
    extend_comment_add_meta_box() {
        
    add_meta_box'title'__'D&#x1EEF; li&#x1EC7;u nh&#x1EAD;p th&#x00EA;m' ), 'extend_comment_meta_box''comment''normal''high' );
    }
    function 
    extend_comment_meta_box $comment ) {
        
    $phone get_comment_meta$comment->comment_ID'phone'true );
        
    $address get_comment_meta$comment->comment_ID'address'true );
        
    wp_nonce_field'extend_comment_update''extend_comment_update'false );
        
    ?>
        <p>
            <label for="phone"><?php _e'Phone' ); ?></label>
            <input type="text" name="phone" value="<?php echo esc_attr$phone ); ?>" class="widefat" />
        </p>
         <p>
            <label for="phone"><?php _e'Address' ); ?></label>
            <input type="text" name="phone" value="<?php echo esc_attr$address ); ?>" class="widefat" />
        </p>
        <?php
    }
    //Cho phep Luu xuong database khi sua o trong Edit_Comment quan tri admin
    add_action'edit_comment''extend_comment_edit_metafields' );
    function 
    extend_comment_edit_metafields$comment_id ) {
        if( ! isset( 
    $_POST['extend_comment_update'] ) || ! wp_verify_nonce$_POST['extend_comment_update'], 'extend_comment_update' ) ) return;

      if ( ( isset( 
    $_POST['phone'] ) ) && ( $_POST['phone'] != '') ) :
      
    $phone wp_filter_nohtml_kses($_POST['phone']);
      
    update_comment_meta$comment_id'phone'$phone );
      else :
      
    delete_comment_meta$comment_id'phone');
      endif;

      if ( ( isset( 
    $_POST['address'] ) ) && ( $_POST['address'] != '') ) :
      
    $address wp_filter_nohtml_kses($_POST['address']);
      
    update_comment_meta$comment_id'address'$address );
      else :
      
    delete_comment_meta$comment_id'address');
      endif;
    }

    ?>
     
    Chỉnh sửa cuối: 1/9/22
    hadepzai2019 and seolagi like this.
  7. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,024
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, rất đẹp ạ, sếp m rất thích.
     
  8. hadepzai2019
    Tham gia ngày:
    7/6/19
    Bài viết:
    14
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Wp thì mình k chuyên. Nhưng cái này có thể xử lý bằng css và html thông thường được.
     
  9. hoangdacviet
    Tham gia ngày:
    1/9/18
    Bài viết:
    12
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    bạn thử demo code chỉnh sửa đc ko?
    mình ko muốn động vào file function lắm, tại sợ bị xung đột với mấy code khác
     
  10. hadepzai2019
    Tham gia ngày:
    7/6/19
    Bài viết:
    14
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Nếu chỉ thuần chỉnh giao diện thì ok, còn nếu thêm cả lưu dữ liệu thì buộc phải đụng vào function nhé.
    Với các kiến trúc code oop thì k lo bị đụng đâu.