我正在使用BEM方法创建WordPress主题以进行公开发布。为了实施BEM方法, 我要删除/修改一些默认的WordPress模板和类。例如, 为了在评论列表中实现BEM方法, 我创建了自定义沃克类:
<
?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="http://www.srcmini.com/<
?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类和模板是否安全?
#1
但是, 删除/修改默认的WordPress类和模板是否安全?【删除/修改默认WordPress类/模板以实现BEM是否安全()】是!
我将BEM用于WordPress模板, 并从WordPress中删除了所有原始CSS类。我们需要保留的唯一内容是:
- id =” s” 作为搜索字段;
- 注释中的几个元素, 包括注释项上的id =” com- {commentId}” , 来自WordPress的JS帮助器使用它来移动” 回复” 字段。
推荐阅读
- 在WordPress开发中使用jQuery还可以吗()
- Linux中如何使用alias命令
- esxi磁盘设备状态显示‘’正常,已降级‘’ 解决
- 在LVM中恢复已删除的逻辑卷
- WGCLOUD如何监控交换机路由器
- CentOS7做ssh免密登录
- linux之autojump命令
- Nginx 反向代理后WebSocket 会无法连接的问题
- oeasy教您玩转vim - 53 - # 批量替换