подсказки

Как создать обратный вызов пользовательских комментариев в WordPress

Как создать обратный вызов пользовательских комментариев в WordPress

Шаблон комментариев WordPress (обратный вызов) – это не только один из наиболее сложных шагов при создании собственной темы WordPress, но и код комментариев по умолчанию также довольно сложно настроить. Если вы разработчик темы и застряли, пытаясь настроить свои комментарии, чтобы они выглядели так, как вы хотите, но не можете, потому что вам нужно добавить дополнительные классы div или удалить некоторые, тогда вам нужно проверить этот пост. Я покажу вам, как легко создать собственный шаблон обратного вызова, который WordPress будет использовать для вашей структуры комментариев, чтобы вы могли полностью контролировать дизайн своего комментария.

Примечание для разработчиков .. При создании темы WordPress для каталога WordPress.org или для распространения на любом другом рынке лучше всего оставить дизайн комментариев по умолчанию, чтобы убедиться в отсутствии возможных конфликтов со сторонними плагинами. Это руководство предназначено в первую очередь для тех, кто ищет индивидуальное решение на своем активном сайте (путем внесения изменений с помощью дочерней темы) или для тех, кто разрабатывает индивидуальный дизайн для своего клиента.

Теперь перейдем к самому руководству, и если у вас есть какие-либо вопросы или предложения о том, как мы можем улучшить руководство, дайте мне знать в разделе комментариев под руководством.

Шаг 1. Создайте файл better-comments.php.

Создайте новый файл php для своей родительской или дочерней темы (вы можете называть его как угодно, но я предпочитаю называть его лучше-comments.php) и вставьте приведенный ниже код.

<?php // My custom comments output html function better_comments( $comment, $args, $depth) { // Get correct tag used for the comments if ('div' === $args['style']) { $tag = 'div'; $add_below = 'comment'; } else { $tag = 'li'; $add_below = 'div-comment'; } ?> <<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] )? '': 'parent' ); ?> id="comment-<?php comment_ID() ?>"> <?php // Switch between different comment types switch ($comment->comment_type ): case 'pingback': case 'trackback': ?> <div class="pingback-entry"><span class="pingback-heading"><?php esc_html_e( 'Pingback:', 'textdomain' ); ?></span> <?php comment_author_link(); ?></div> <?php break; default: if ('div' != $args['style']) { ?> <div id="div-comment-<?php comment_ID() ?>" class="comment-body"> <?php } ?> <div class="comment-author vcard"> <?php // Display avatar unless size is set to 0 if ($args['avatar_size'] != 0) { $avatar_size =! empty( $args['avatar_size'] )? $args['avatar_size']: 70; // set default avatar size echo get_avatar( $comment, $avatar_size ); } // Display author name printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>', 'textdomain' ), get_comment_author_link() ); ?> </div><!-- .comment-author --> <div class="comment-details"> <div class="comment-meta commentmetadata"> <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID) ); ?>"><?php /* translators: 1: date, 2: time */ printf( __( '%1$s at %2$s', 'textdomain' ), get_comment_date(), get_comment_time() ); ?> </a><?php edit_comment_link( __( '(Edit)', 'textdomain' ), ' ', '' ); ?> </div><!-- .comment-meta --> <div class="comment-text"><?php comment_text(); ?></div><!-- .comment-text --> <?php // Display comment moderation text if ($comment->comment_approved == '0') { ?> <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'textdomain' ); ?></em><br/><?php } ?> <div class="reply"><?php // Display comment reply link comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']) ) ); ?> </div> </div><!-- .comment-details --> <?php if ('div' != $args['style']) { ?> </div> <?php } // IMPORTANT: Note that we do NOT close the opening tag, WordPress does this for us break; endswitch; // End comment_type check. }

Это начальный шаблон, с которым вы можете работать, который включает в себя базовый вывод, который вы хотите для своих комментариев, с некоторыми дополнительными блоками, включенными для упрощения стилизации.

Шаг 2. Добавьте ваш новый шаблон better-comments.php

Поместите вновь созданный файл в родительскую или дочернюю тему, затем перейдите в файл functions.php и используйте функцию require_once для загрузки файла. См. Пример ниже (не забудьте изменить расположение, если вы добавили файл better-comments.php в другую подпапку в своей теме – я обычно помещаю свои пользовательские функции в папку functions или inc, чтобы она была отделена от ядра. файлы шаблонов).

Примечание. В приведенном ниже фрагменте есть 2 примера, в которых вы захотите использовать правильную строку кода в зависимости от того, добавляете ли вы шаблон в родительскую или дочернюю тему.

// Include better comments file from a Parent theme require_once get_parent_theme_file_path( '/functions/better-comments.php' ); // Or include via a child theme require_once get_stylesheet_directory(). '/functions/better-comments.php';

Вы можете добавить код в любом месте вашего файла functions.php, просто не забудьте добавить его в теги <? Php и?>.

Шаг 3. Добавьте улучшенные комментарии Обратный звонок в wp_list_comments

Теперь нам просто нужно указать WordPress использовать наш настраиваемый шаблон вывода для комментариев. И есть два способа сделать это в зависимости от того, работаете ли вы с родителем или изменяете функцию родительской темы по умолчанию (также как дочерняя тема или плагин).

Родительская тема: если вы работаете с родительской темой, вам нужно найти файл comments.php и отредактировать функцию wp_list_comments, чтобы включить обратный вызов в массив аргументов, например:

<?php // Display comments wp_list_comments( array( 'callback' => 'better_comments') ); ?>

Дочерняя тема или плагин: если вы работаете с дочерней темой или плагином и хотите отфильтровать вывод html комментария, тогда вы хотите использовать фильтр wp_list_comments_args и передать свой новый аргумент обратного вызова, например:

// Filter the comment list arguments add_filter( 'wp_list_comments_args', function( $args) { $args[ 'callback' ] = 'better_comments'; return $args; } );

И, конечно же, в обоих случаях мы ссылаемся на имя функции, которое мы использовали на шаге 1 (better_comments).

Шаг 4: настройка вывода пользовательского HTML

Если вы все сделали правильно, WordPress теперь будет использовать вашу функцию better_comments для вывода html комментариев в вашей теме. В отличие от простого использования функции wp_list_comments, теперь вы можете редактировать весь код, который будет отображаться с каждым комментарием. Теперь «нет предела». Отредактируйте свою функцию, чтобы комментарии WordPress выглядели так, как ВЫ хотите. Ниже приведены несколько примеров того, что вы можете делать:

Отображайте пингбеки и регулярные комментарии по-разному

Если вы посмотрите на код, вы увидите, что в нем есть оператор switch, который используется для отображения пингбэков / трекбэков иначе, чем стандартные комментарии. Хотя мы обычно рекомендуем отключать пингбеки / трекбэки, если вы используете их на своем сайте или хотите, чтобы они хорошо смотрелись для вашего конечного продукта (если вы разработчик темы), вы можете использовать этот метод, чтобы полностью изменить вывод в зависимости от комментария. тип.

Отображать комментарий пользователя «значок»

Если вы ведете блог в стиле сообщества, в который вошли ваши читатели, вы можете вставить «значок» для каждого комментария, который показывает «роль» человека, оставившего комментарий. Таким образом, вы можете отображать значок для подписчика, участника, автора, администратора и т.д.

global $wp_roles; if ($wp_roles) { $user_id = $comment->user_id; if ($user_id && $user = new WP_User( $user_id) ) { if (isset( $user->roles[0]) ) { ?> <div class="comment-user-badge <?php echo esc_attr( $user->roles[0] ); ?>"><?php esc_html( translate_user_role( $wp_roles->roles[ $user->roles[0] ]['name']) ); ?></div>' <?php } } else { ?> <div class="comment-user-badge guest"><?php esc_html_e( 'Guest', 'textdomain' ); ?></div> <?php } }

Изменить размер граватара

Еще одна интересная вещь, которую вы можете сделать с лучшими комментариями, – это изменить размер аватара, мы уверены, вы могли изменить его с помощью массива wp_list_comments вручную или с помощью фильтра wp_list_comments_args, но теперь вы также можете вручную изменить его, это означает, что вы даже можете используйте разные размеры в зависимости от комментария (возможно, вы хотите, чтобы аватар автора был больше, это могло бы здорово).

Изменить Gravatar по умолчанию или удалить его полностью

Вы можете изменить функцию get_avatar, чтобы добавить третий параметр для граватара по умолчанию, если вы хотите вручную установить URL-адрес значка аватара по умолчанию. Это означает, что вы можете добавить забавный аватар по умолчанию, соответствующий вашему сайту. В качестве альтернативы вы можете полностью удалить код аватара, если вы не хотите их использовать (это может быть хорошей идеей для сайтов с множеством комментариев, поскольку граватары могут загружаться немного медленнее, а также раздуть сайт).

<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>

Бонус: выделение комментариев автора

Технически это не имеет ничего общего с вашим пользовательским выводом комментариев, но об этом стоит упомянуть, поскольку многие темы не интегрируют это по умолчанию. В выводе comment_class, если комментарий был сделан автором сообщения, комментарий будет включать имя класса bypostauthor, и это позволит вам стилизовать комментарии автора сообщения иначе, чем другие комментарии, чтобы вы могли выделить их.

.bypostauthor {background: #ffff99;}

Источник записи: https://www.wpexplorer.com

Похожие сообщения
подсказки

Лучшие онлайн-инструменты для отслеживания ваших конкурентов

подсказки

Инструменты и хитрости для экономии времени для занятого пользователя WordPress

подсказки

Как создать партнерский веб-сайт с помощью WordPress

подсказки

Как улучшить юзабилити вашего сайта WordPress