Cách sắp xếp lại các trường trong comment_form ()


22

Tôi đang sử dụng bộ lọc tùy chỉnh để thay đổi các trường, nhưng có thể tìm ra cách thay đổi thứ tự của các trường trong biểu mẫu nhận xét.

Đơn hàng mong muốn:

  • lĩnh vực bình luận (đầu tiên / hàng đầu)
  • Tên
  • e-mail
  • trang mạng

Đây là mã mà tôi hiện đang sử dụng:

function alter_comment_form_fields($fields){
    $fields['comments'] = 'Test';
    $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Your name, please' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                    '<input id="author" name="author" type="text" placeholder="John Smith" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>';
    $fields['email'] = 'next';  //removes email field
    //$fields['url'] = '';  //removes website field

    return $fields;
}

add_filter('comment_form_default_fields','alter_comment_form_fields');

Câu trả lời:


14

Điều đó khá đơn giản. Bạn chỉ cần lấy textareara khỏi các trường mặc định - bộ lọc 'comment_form_defaults'- và in nó trên hành động 'comment_form_top':

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: T5 Comment Textarea On Top
 * Description: Makes the textarea the first field of the comment form.
 * Version:     2012.04.30
 * License:     MIT
 * License URI: http://www.opensource.org/licenses/mit-license.php
 */

// We use just one function for both jobs.
add_filter( 'comment_form_defaults', 't5_move_textarea' );
add_action( 'comment_form_top', 't5_move_textarea' );

/**
 * Take the textarea code out of the default fields and print it on top.
 *
 * @param  array $input Default fields if called as filter
 * @return string|void
 */
function t5_move_textarea( $input = array () )
{
    static $textarea = '';

    if ( 'comment_form_defaults' === current_filter() )
    {
        // Copy the field to our internal variable …
        $textarea = $input['comment_field'];
        // … and remove it from the defaults array.
        $input['comment_field'] = '';
        return $input;
    }

    print apply_filters( 'comment_form_field_comment', $textarea );
}

Giải pháp tốt nhưng nếu bạn muốn thay đổi thứ tự của 3 hoặc 4 trường thì sao?
Brad Dalton

1
@BradDalton Giống nhau: xóa tất cả nội dung trường trước, sau đó in chúng theo thứ tự mong muốn comment_form_top.
fuxia

Không biết mã đã thay đổi kể từ đó nhưng đối với 4.0 thì có vẻ như comment_form_before_fieldslà móc tốt hơn sau đócomment_form_top
Mark Kaplun

@MarkKaplun Ngày nay tôi sẽ chuyển vị trí mong muốn làm đối số cho một lớp. :)
fuxia

4

Tôi thích toscho trả lời. Tuy nhiên tôi muốn sử dụng một textarea tùy chỉnh, vì vậy nó không hoạt động trong trường hợp đó. Tôi đã sử dụng các móc tương tự nhưng với các chức năng riêng biệt:

add_filter( 'comment_form_defaults', 'remove_textarea' );
add_action( 'comment_form_top', 'add_textarea' );

function remove_textarea($defaults)
{
    $defaults['comment_field'] = '';
    return $defaults;
}

function add_textarea()
{
    echo '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="60" rows="6" placeholder="write your comment here..." aria-required="true"></textarea></p>';
}

Lưu ý rằng nhiều plugin chống thư rác cũng đang thay đổi textarea. Điều này phải được kiểm tra rất tốt - tôi đã gặp vấn đề nghiêm trọng với cách tiếp cận tương tự.
fuxia

4

Rõ ràng có một số cách để thực hiện điều này. Ví dụ: để di chuyển trường bình luận xuống cuối biểu mẫu, bạn sẽ sử dụng mã như thế này:

add_filter( 'comment_form_fields', 'move_comment_field' );
function move_comment_field( $fields ) {
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;
    return $fields;
}

Nếu bạn muốn sắp xếp lại tất cả các trường, bỏ đặt tất cả các trường. Đặt chúng trở lại vào mảng theo thứ tự bạn muốn chúng được hiển thị. Đơn giản phải không?

Tôi đoán rằng tôi đánh vần nó một cách rõ ràng cho những người tiếp theo như tôi để tìm trang này và không tìm thấy câu trả lời hữu ích.


2

CSS chính xác để làm điều này sẽ phụ thuộc vào chủ đề của bạn, tuy nhiên, đây là một cách:

#commentform {
display:table;
width:100%;   
}

.comment-form-comment {
display: table-header-group; 
}

Các phương thức hiển thị bảng cho phép bạn sắp xếp lại những thứ có chiều cao tùy ý.

Thông tin thêm: http://tanalin.com/en/articles/css-block-order/


1
Ý tưởng tuyệt vời Otto. Một cách tiếp cận tương tự có thể được thực hiện bằng flexbox: <br> #commentform { display: flex; flex-flow: column; } .comment-form-comment { order: -1; }.
Bryan Willis

1

mẫu nhận xét od trường nằm trong mảng $fieldstrong hàm comment_form(). Bạn có thể móc bên trong bộ lọc comment_form_default_fieldssắp xếp lại mảng.

Ngoài ra, bạn có thể móc bên trong bộ lọc comment_form_defaultsvà thay đổi mặc định; để lại tất cả dữ liệu trong mảng và chỉ thay đổi fieldmảng với các trường tùy chỉnh của bạn; bao gồm html.

mặc định nếu các trường $:

      $fields =  array(
          'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                      '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
          'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                      '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
          'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
                      '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
      );
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.