Question

我正在使用BEM方法创建一个WordPress主题用于公开发布。为了实现BEM方法，我正在删除/修改一些默认的WordPress模板和类。例如，要在帖子评论列表中实现BEM方法，我创建了自定义walker类：

<?php
// Walker class used to create an HTML list of comments.
class BEM_Walker_Comment extends Walker_Comment {

    // Starts the list before the elements are added.
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        $output .= '<ol class="comment__children">' . "\n";
    }

    // Ends the list of items after the elements are added.
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        $output .= "</ol>\n";
    }

    // Starts the element output.
    public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
        $depth++;
        $GLOBALS['comment_depth'] = $depth;
        $GLOBALS['comment'] = $comment;

        if ( ! empty( $args['callback'] ) ) {
            ob_start();
            call_user_func( $args['callback'], $comment, $args, $depth );
            $output .= ob_get_clean();
            return;
        }

        if ( ( 'pingback' === $comment->comment_type || 'trackback' === $comment->comment_type ) && $args['short_ping'] ) {
            ob_start();
            $this->ping( $comment, $depth, $args );
            $output .= ob_get_clean();
        } else {
            ob_start();
            $this->html5_comment( $comment, $depth, $args );
            $output .= ob_get_clean();
        }
    }

    // Ends the element output, if needed.
    public function end_el( &$output, $comment, $depth = 0, $args = array() ) {
        if ( ! empty( $args['end-callback'] ) ) {
            ob_start();
            call_user_func( $args['end-callback'], $comment, $args, $depth );
            $output .= ob_get_clean();
            return;
        }
        $output .= "</li>\n";
    }

    // Outputs a comment in the HTML5 format.
    protected function html5_comment( $comment, $depth, $args ) {
        ?>
        <li <?php $this->comment_class( $this->has_children ? 'comment__parent' : '', $comment ); ?>>
            <article class="comment__body">
                <footer class="comment__meta">
                    <div class="comment__author">
                        <?php
                        if ( 0 !== $args['avatar_size'] ) {
                            echo get_avatar( $comment, $args['avatar_size'] );
                        }

                        $url     = get_comment_author_url( $comment );
                        $author  = get_comment_author( $comment );
                        if ( empty( $url ) || 'http://' === $url ) {
                            $author_name = $author;
                        } else {
                            $author_name = '<a class="comment__author-url" href="' . esc_url( $url ) . '" rel="external nofollow">' . esc_html( $author ) . '</a>';
                        }
                        printf( '<b class="comment__author-name">%s</b>', $author_name );
                        ?>
                    </div>
                    <div class="comment-metadata">
                        <a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
                            <time datetime="<?php comment_time( 'c' ); ?>">
                                <?php printf( __( '%1$s at %2$s', 'runway' ), get_comment_date( '', $comment ), get_comment_time() ); ?>
                            </time>
                        </a>
                        <?php edit_comment_link( __( 'Edit', 'runway' ), '<span class="comment__edit">', '</span>' ); ?>
                    </div>
                    <?php if ( '0' === $comment->comment_approved ) : ?>
                    <p class="comment-awaiting-moderation"><?php esc_html_e( 'Your comment is awaiting moderation.', 'runway' ); ?></p>
                    <?php endif; ?>
                </footer>
                <div class="comment__content">
                    <?php comment_text(); ?>
                </div>
                <?php
                comment_reply_link( array_merge( $args, array(
                    'add_below' => 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '<div class="comment__reply">',
                    'after'     => '</div>',
                ) ) );
                ?>
            </article>
        <?php
    }

    // Generates semantic classes for each comment element.
    protected function comment_class( $class = '', $comment = null, $post_id = null, $echo = true ) {
        $classes = join( ' ', get_comment_class( $class, $comment, $post_id ) );

        $classes = str_replace( ' byuser',          ' comment--by-user',        $classes );
        $classes = str_replace( ' comment-author-',' comment--author-',     $classes );
        $classes = str_replace( ' bypostauthor',    ' comment--by-post-author', $classes );
        $classes = str_replace( ' odd',         ' comment--odd',            $classes );
        $classes = str_replace( ' alt',         ' comment--alt',            $classes );
        $classes = str_replace( ' even',            ' comment--even',           $classes );
        $classes = str_replace( ' thread-odd',      ' comment--thread-odd',     $classes );
        $classes = str_replace( ' thread-alt',      ' comment--thread-alt',     $classes );
        $classes = str_replace( ' thread-even', ' comment--thread-even',    $classes );
        $classes = str_replace( ' depth-',          ' comment--depth-',         $classes );

        // Separates classes with a single space, collates classes for comment DIV.
        $class = 'class="' . $classes . '"';
        if ( $echo ) {
            echo $class;
        } else {
            return $class;
        }
    }
} // BEM_Walker_Comment class
?>

同样，我还为导航菜单创建了walker类，并修改了注释表单以实现BEM方法。

但是删除/修改默认的WordPress类和模板是否安全？

Answer 1

但是删除/修改默认的WordPress类和模板是否安全？

是！

我将BEM用于我的WordPress模板，并从WordPress中删除所有原始CSS类。我们唯一需要保留的是：

id="s"用于搜索字段;
评论中的几个元素，包括评论项目上的id="com-{commentId}"，来自WordPress的JS帮助程序使用它来移动＆＃34;回复＆＃34;字段。

删除/修改默认WordPress类/模板以实现BEM是否安全？

1 个答案: