Nếu bạn muốn thay đổi các biểu tượng trước các trường nhập văn bản như tên, email, url trong khung comments của theme genesis hoặc thêm các biểu tượng Font Awesome, bạn có thể dễ dàng thực hiện điều này bằng cách thay đổi một số bộ lọc của wordpress.
Các chủ đề của genesis sử dụng Html5 mặc định trong phần comments, do đó để thực hiện việc này bạn chỉ cần thay đổi hàm “comment_form_default_fields” và “comment_form_defaults“.
Lưu ý: Để chắc chắn rằng hướng dẫn này hoạt động các child theme của bạn cần phải sử dụng html5 nên nó sẽ không hoạt động với xhtml. Trong đố tôi sẽ sử dụng hàm “comment_form_defaults” để thay đổi tất cả.
Nhìn chung thì chúng ta sẽ thực hiện việc thay đổi các nhãn mác này qua 2 bước cơ bản, và có thể bạn cần thêm một số thông tin hữu ích khác đã được đăng tải trên trang web của chúng tôi như thêm bỏ phiếu vào comments, gỡ bỏ liên kết, # comments, tùy chỉnh comments, đếm bình luận..
Chỉnh sửa các mẫu nhận xét trong genesis.
Bước 1: Thêm đoạn mã bên dưới vào functions.php
Bạn cần thêm tất cả những mã sau vào cuối cùng file functions.php của mình, cũng có thể dán vào vị trí nào tùy thích, nhưng tôi khuyên bạn nên dán vào cuối và thêm ghi chú cho nó để chúng ta có thể dễ dàng quản lý các mã khác nhau trên cùng một chủ đề.
Nội dung đoạn mã:
<?php
//* Do NOT include the opening php tag
/**********************************
*
* Filter Comments Form Labels
* Modify the Labels Text
* Add Font-Awesome Icons to Labels
*
* Only for Genesis HTML5 themes
* Genesis HTML5 themes use the default WordPress
* comment forms
*
* XHTML themes have to use comment_form_defaults to filter all fields
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
************************************/
/*
*
* Filter Author, Email, and URL labels
*
*/
add_filter( 'comment_form_default_fields', 'youruniqueprefix_modify_comment_author_email_url_labels' );
function youruniqueprefix_modify_comment_author_email_url_labels( $fields ) {
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$args = wp_parse_args( $args );
if ( ! isset( $args['format'] ) )
$args['format'] = current_theme_supports( 'html5', 'comment-form' ) ? 'html5' : 'xhtml';
$html5 = 'html5' === $args['format'];
$fields = array(
'author' => '<p class="comment-form-author">' . '<i class="fa fa-user"></i> <label for="author">' . __( 'Your Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email"><i class="fa fa-envelope"></i> <label for="email">' . __( 'Your Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
'<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
'url' => '<p class="comment-form-url"><i class="fa fa-link"></i> <label for="url">' . __( 'Your Website' ) . '</label> ' .
'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);
return $fields;
}
/*
*
* Filter Comment Field label
*
*/
add_filter( 'comment_form_defaults', 'youruniqueprefix_change_comment_label' );
function youruniqueprefix_change_comment_label( $args ) {
$args['comment_field'] = '<p class="comment-form-comment"><i class="fa fa-comment"></i> <label for="comment">' . _x( 'Your Comment', 'noun' ) . '</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>';
return $args;
}
Bạn có thể thay đổi các đoạn mã mặc định của chúng tôi, “
Bạn thấy dằng trên đoạn mã bên trên chúng ta cần sử dụng đến Font Awesome, để các đoạn mã “<i cla ss =” fa fa-u ser “> </ i> ” được hoạt động đây là một loại font tương tự icon vậy, và chắc chắn cần phải sử dụng đến nó, và nếu bạn đã add nó từ trước khi thực hiện điều này thì có thể xóa đi tránh xung đột lỗi xảy ra.
add_action( 'wp_enqueue_scripts', 'youruniqueprefix_load_scripts' );
function youruniqueprefix_load_scripts() {
wp_enqueue_style( 'youruniqueprefix-fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' ); // font awesome css from cdn
}
Thêm biểu tượng Font Awesome tuyệt vời vào genesis.
Giờ đây chúng bạn đã có một form được trang trí tuyệt vời bằng các icon Font Awesome rồi, tiếp theo hãy truy cập vào trang chủ Font Awesome để tìm những biểu tượng đẹp nhất cho mình, và tùy biến nó theo một phong cách riêng của bạn.
Bước 2: Thêm CCS vào child theme
Sau khi hoàn thành các bước trên chúng ta sẽ tùy chỉnh một số mục cần thiết trong file styles.css để chắc chắn rằng nó phù hợp vời các chủ đề của bạn đang dùng.
Copy và dán toàn bộ vào style.css
/*
* Style Comments Form Labels
* and Font Awesome Icons
*
*/
.comment-respond .comment-form > p > i {
text-align: center;
width: 25px;
}
.comment-respond label {
display: inline-block;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
display: block;
width: 50%;
}
Lưu lại: Và quay lại bài viết của mình để xem sự thay đổi nào.
Vậy là chúng ta đã thực hiện xong những bước bạn cần làm để thêm các biểu tượng tuyệt vời vào khung comments trong genesis, tôi hy vọng rằng bạn sẽ thích bài này của tôi, và hãy cho tôi biết những suy nghĩ của bạn vào khung comments bên dưới nhé!
Vũ đức Mạnh
