Статьи

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

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

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

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

Создайте новый файл 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="https://techblog.sdstudio.top/kak-sozdat-obratnyj-vyzov-polzovatelskih-kommentariev-v-wordpress/<?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.
}

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

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

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


require_once get_parent_theme_file_path( '/functions/better-comments.php' );

require_once get_stylesheet_directory(). '/functions/better-comments.php';

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

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

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

<?php

wp_list_comments( array(
    'callback' => 'better_comments') ); ?>

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


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;}

Кнопка «Наверх»