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,047
    Đã được thích:
    81
    Đ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?

    seolagi, 18/8/20
    #1
    lapmangfpt and admin like this.
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,996
    Đã được thích:
    1,216
    Đ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_meta( get_comment_ID(), 'phone', true );
            $address = get_comment_meta( get_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
    admin, 18/8/20
    #2
    hadepzai2019 and seolagi like this.
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Đ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
     
    seolagi, 18/8/20
    #3
    admin thích bài này.
  5. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,996
    Đã được thích:
    1,216
    Đ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
    admin, 18/8/20
    #4
    seolagi thích bài này.
  6. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Đ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
    seolagi, 18/8/20
    #5
  7. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,996
    Đã được thích:
    1,216
    Đ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_meta( get_comment_ID(), 'phone', true );
            $address = get_comment_meta( get_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
    admin, 18/8/20
    #6
    hadepzai2019 and seolagi like this.
  8. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Điểm thành tích:
    48
    Cảm ơn ad, rất đẹp ạ, sếp m rất thích.
     
    seolagi, 18/8/20
    #7
  9. 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.
     
    hadepzai2019, 29/8/20
    #8
  10. 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
     
    hoangdacviet, 20/9/20
    #9
  11. 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.
     
    hadepzai2019, 4/10/20
    #10


Chủ để tương tự : Filed Remove
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Remove xóa Lost Password quên mật khẩu trên Wordpress? 7/12/22
Mã nguồn mở Wordpress Đổi tag h3 reply-title sang tag khác như thế nào? remove tag h3 in reply-title 17/6/21
Mã nguồn mở Wordpress Disable/Xóa/Remover Analytics WooCommerce trên admin wodpress như thế nào? 27/11/20
Mã nguồn mở Wordpress Remover Xóa schema.org/AggregateRating kk Star Ratings cấu trúc dữ liệu trên tìm kiếm google 28/5/19
Mã nguồn mở Wordpress Remove Json/LD Structured Data Format Markup WooCommerce và Yoast Seo 28/5/19