wordpress - Elementor: Create a New Skin for Comments Widget | WP Comments

Question

I managed to create the skin, I copied the render() code from the parent plugin and it displays fine. However any change I make in the code does not make any difference.

I need to edit the HTML under the comment_callback().

public function render()
    {

?>
 
        <?php
        // Module::instance()->get_preview_manager()->switch_to_preview_query();

        // Hack to remove template comment form
        $comments_template_callback = function () {
            return __DIR__ . '/../views/comments-template.php';
        };

        add_filter('comments_template', $comments_template_callback);

        // The `comments_template` doesn't has an API to pass current widget instance, so make it global
        $GLOBALS['post_comment_skin_classic'] = $this;

        comments_template();

        remove_filter('comments_template', $comments_template_callback);

        unset($GLOBALS['post_comment_skin_classic']);

        // Module::instance()->get_preview_manager()->restore_current_query();
    }

    public function comment_callback($comment, $args, $depth)
    {
        $tag = ('div' === $args['style']) ? 'div' : 'li';
        $class = 'elementor-comment';
        if (!empty($args['has_children'])) {
            $class .= ' parent';
        }
        ?>
        <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class($class, $comment); ?>>
            <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
                <h2>Mundo Skin</h2>
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <?php
                        if (0 < $args['avatar_size']) {
                            echo get_avatar($comment, $args['avatar_size']);
                        }
                        ?>
                        <?php
                        /* translators: %s: Comment author link. */
                        printf(
                            __('%s <span class="says">says:</span>', 'elementor-pro'),
                            sprintf('<b class="fn">%s</b>', get_comment_author_link($comment))
                        );
                        ?>
                    </div><!-- .comment-author -->

                    <div class="comment-metadata">
                        <a href="<?php echo esc_url(get_comment_link($comment, $args)); ?>">
                            <time datetime="<?php comment_time('c'); ?>">
                                <?php
                                /* translators: 1: Comment date, 2: Comment time. */
                                printf(__('%1$s at %2$s', 'elementor-pro'), get_comment_date('', $comment), get_comment_time());
                                ?>
                            </time>
                        </a>
                        <?php edit_comment_link(__('Edit', 'elementor-pro'), '<span class="edit-link">', '</span>'); ?>
                    </div><!-- .comment-metadata -->

                    <?php if ('0' == $comment->comment_approved) : ?>
                        <p class="comment-awaiting-moderation"><?php esc_html_e('Your comment is awaiting moderation.', 'elementor-pro'); ?></p>
                    <?php endif; ?>
                </footer><!-- .comment-meta -->

                <div class="comment-content">
                    <?php comment_text(); ?>
                </div><!-- .comment-content -->

                <?php
                comment_reply_link(array_merge($args, [
                    'add_below' => 'div-comment',
                    'depth' => $depth,
                    'max_depth' => $args['max_depth'],
                    'before' => '<div class="reply">',
                    'after' => '</div>',
                ]));
                ?>
            </article><!-- .comment-body -->
    <?php
    }

question from:https://stackoverflow.com/questions/65878439/elementor-create-a-new-skin-for-comments-widget-wp-comments

Answer 1

Waitting for answers