Twenty Fourteen: Use HTML5 comment markup, props obenland. Fixes #25045.

Built from https://develop.svn.wordpress.org/trunk@25087


git-svn-id: http://core.svn.wordpress.org/trunk@25071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-08-22 17:01:08 +00:00
parent fa4c7a1feb
commit a260ebf932
4 changed files with 45 additions and 99 deletions

View File

@ -40,9 +40,6 @@ if ( post_password_required() )
wp_list_comments( array( wp_list_comments( array(
'style' => 'ol', 'style' => 'ol',
'short_ping' => true, 'short_ping' => true,
// TODO: Remove callback and update styles.
'callback'=>'twentyfourteen_comment',
) ); ) );
?> ?>
</ol><!-- .comment-list --> </ol><!-- .comment-list -->

View File

@ -67,12 +67,20 @@ function twentyfourteen_setup() {
'secondary' => __( 'Secondary menu in left sidebar', 'twentyfourteen' ), 'secondary' => __( 'Secondary menu in left sidebar', 'twentyfourteen' ),
) ); ) );
/*
* Switches default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list',
) );
/* /*
* Enable support for Post Formats. * Enable support for Post Formats.
* See http://codex.wordpress.org/Post_Formats * See http://codex.wordpress.org/Post_Formats
*/ */
add_theme_support( 'post-formats', array( add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'quote', 'link', 'gallery' 'aside', 'image', 'video', 'quote', 'link', 'gallery',
) ); ) );
/* /*

View File

@ -84,59 +84,6 @@ function twentyfourteen_post_nav() {
} }
endif; endif;
if ( ! function_exists( 'twentyfourteen_comment' ) ) :
/**
* Template for comments and pingbacks.
*
* Used as a callback by wp_list_comments() for displaying the comments.
*
*/
function twentyfourteen_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
?>
<li class="post pingback">
<p><?php _e( 'Pingback:', 'twentyfourteen' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( 'Edit', 'twentyfourteen' ), ' ' ); ?></p>
<?php
break;
default :
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<footer>
<div class="comment-author vcard">
<span class="comment-author-avatar"><?php echo get_avatar( $comment, 32 ); ?></span>
<?php printf( __( '%s', 'twentyfourteen' ), sprintf( '<cite class="fn">%s</cite> says:', get_comment_author_link() ) ); ?>
</div><!-- .comment-author .vcard -->
</footer>
<div class="comment-content">
<?php comment_text(); ?>
<?php if ( $comment->comment_approved == '0' ) : ?>
<p><em><?php _e( 'Your comment is awaiting moderation.', 'twentyfourteen' ); ?></em></p>
<?php endif; ?>
</div>
<div class="comment-meta commentmetadata">
<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><time pubdate datetime="<?php comment_time( 'c' ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s at %2$s', 'twentyfourteen' ), get_comment_date(), get_comment_time() ); ?>
</time></a>
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
<?php edit_comment_link( __( 'Edit', 'twentyfourteen' ), ' ' );
?>
</div><!-- .comment-meta .commentmetadata -->
</article><!-- #comment-## -->
<?php
break;
endswitch;
}
endif; // ends check for twentyfourteen_comment()
if ( ! function_exists( 'twentyfourteen_posted_on' ) ) : if ( ! function_exists( 'twentyfourteen_posted_on' ) ) :
/** /**
* Prints HTML with meta information for the current post-date/time and author. * Prints HTML with meta information for the current post-date/time and author.

View File

@ -1850,33 +1850,32 @@ span > object {
margin: 0 0 48px 0; margin: 0 0 48px 0;
margin: 0 0 4.8rem 0; margin: 0 0 4.8rem 0;
} }
.comment-meta, .comment-metadata,
.comment-author { .comment-author {
font-size: 14px; font-size: 14px;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.7142857142; line-height: 1.7142857142;
} }
.comment-author cite { .comment-author .fn {
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
} }
.comment-author a { .comment-author a {
color: #2b2b2b; color: #2b2b2b;
} }
.comment-meta a, .comment-metadata a,
.comment-list li.trackback a, .comment-list .trackback a,
.comment-list li.pingback a { .comment-list .pingback a {
color: #767676; color: #767676;
} }
.comment-author a:hover, .comment-author a:hover,
.comment-meta a:hover, .comment-metadata a:hover,
.comment-list .trackback a:hover, .comment-list .trackback a:hover,
.comment-list .pingback a:hover { .comment-list .pingback a:hover {
color: #24890d; color: #24890d;
text-decoration: none; text-decoration: none;
} }
.comment-edit-link:before, .comment-edit-link:before {
.comment-reply-link:before {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
content: '\007c\0020'; content: '\007c\0020';
} }
@ -1896,14 +1895,13 @@ span > object {
background: none; background: none;
min-height: 48px; min-height: 48px;
min-height: 4.8rem; min-height: 4.8rem;
position: relative;
} }
.comment-author { .comment-author {
padding-left: 36px; padding-left: 36px;
padding-left: 3.6rem; padding-left: 3.6rem;
position: relative; position: relative;
} }
.comment-author .comment-author-avatar { .comment-author .avatar {
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
padding: 2px; padding: 2px;
padding: 0.2rem; padding: 0.2rem;
@ -1916,10 +1914,10 @@ span > object {
height: 22px; height: 22px;
height: 2.2rem; height: 2.2rem;
} }
.bypostauthor .comment-author .comment-author-avatar { .bypostauthor .avatar {
background-color: #24890d; background-color: #24890d;
} }
.comment-author cite { .comment-author .fn {
font-style: normal; font-style: normal;
} }
.comment-author .avatar { .comment-author .avatar {
@ -1933,7 +1931,7 @@ span > object {
height: 22px; height: 22px;
height: 2.2rem; height: 2.2rem;
} }
.comment-meta, .comment-metadata,
.comment-content { .comment-content {
padding-left: 36px; padding-left: 36px;
padding-left: 3.6rem; padding-left: 3.6rem;
@ -2412,7 +2410,7 @@ span > object {
.content-area .entry-date a:before, .content-area .entry-date a:before,
.content-area .byline a:before, .content-area .byline a:before,
.content-area .comments-link a:before, .content-area .comments-link a:before,
.content-area .edit-link a:before, .entry-meta .edit-link a:before,
.attachment .entry-date:before, .attachment .entry-date:before,
.content-area .full-size-link a:before, .content-area .full-size-link a:before,
.content-area .parent-post-link a:before { .content-area .parent-post-link a:before {
@ -2475,7 +2473,7 @@ span > object {
margin: -1px 2px 0 0; margin: -1px 2px 0 0;
margin: -0.1rem 0.2rem 0 0; margin: -0.1rem 0.2rem 0 0;
} }
.content-area .edit-link a:before { .entry-meta .edit-link a:before {
content: '\F411'; content: '\F411';
margin: -1px 2px 0 0; margin: -1px 2px 0 0;
margin: -0.1rem 0.2rem 0 0; margin: -0.1rem 0.2rem 0 0;
@ -2486,7 +2484,7 @@ span > object {
.content-area .parent-post-link a:before { .content-area .parent-post-link a:before {
content: '\F301'; content: '\F301';
} }
.page .content-area .edit-link a:before { .page .entry-meta .edit-link a:before {
margin: 5px 2px 0 0; margin: 5px 2px 0 0;
margin: 0.5rem 0.2rem 0 0; margin: 0.5rem 0.2rem 0 0;
} }
@ -2605,25 +2603,21 @@ span > object {
margin-top: 0; margin-top: 0;
} }
.comments-area article, .comments-area article,
.comment-list li.trackback, .comment-list .trackback,
.comment-list li.pingback { .comment-list .pingback {
margin-bottom: 36px; margin-bottom: 36px;
margin-bottom: 3.6rem; margin-bottom: 3.6rem;
padding-top: 36px; padding-top: 36px;
padding-top: 3.6rem; padding-top: 3.6rem;
} }
.comment-author {
padding-left: 60px;
padding-left: 6.0rem;
}
.comment-author .comment-author-avatar,
.comment-author .avatar { .comment-author .avatar {
width: 32px; width: 32px;
width: 3.2rem; width: 3.2rem;
height: 32px; height: 32px;
height: 3.2rem; height: 3.2rem;
} }
.comment-meta, .comment-author,
.comment-metadata,
.comment-content { .comment-content {
padding-left: 60px; padding-left: 60px;
padding-left: 6.0rem; padding-left: 6.0rem;
@ -2632,8 +2626,8 @@ span > object {
.no-comments, .no-comments,
.comment-respond, .comment-respond,
.comments-area article, .comments-area article,
.comment-list li.trackback, .comment-list .trackback,
.comment-list li.pingback, .comment-list .pingback,
.post-navigation [rel="prev"], .post-navigation [rel="prev"],
.post-navigation [rel="next"] { .post-navigation [rel="next"] {
padding-right: 9.12778904%; padding-right: 9.12778904%;
@ -2652,8 +2646,8 @@ span > object {
.full-width .comments-title, .full-width .comments-title,
.full-width .comment-respond, .full-width .comment-respond,
.full-width .comments-area article, .full-width .comments-area article,
.full-width .comment-list li.trackback, .full-width .comment-list .trackback,
.full-width .comment-list li.pingback { .full-width .comment-list .pingback {
padding-right: 6.04307432%; padding-right: 6.04307432%;
padding-left: 6.04307432%; padding-left: 6.04307432%;
} }
@ -2728,8 +2722,8 @@ span > object {
.no-comments, .no-comments,
.comment-respond, .comment-respond,
.comments-area article, .comments-area article,
.comment-list li.trackback, .comment-list .trackback,
.comment-list li.pingback, .comment-list .pingback,
.post-navigation [rel="prev"], .post-navigation [rel="prev"],
.post-navigation [rel="next"] { .post-navigation [rel="next"] {
padding-right: 12.39493534%; padding-right: 12.39493534%;
@ -2752,8 +2746,8 @@ span > object {
.full-width .comments-title, .full-width .comments-title,
.full-width .comment-respond, .full-width .comment-respond,
.full-width .comments-area article, .full-width .comments-area article,
.full-width .comment-list li.trackback, .full-width .comment-list .trackback,
.full-width .comment-list li.pingback { .full-width .comment-list .pingback {
padding-right: 11.30926724%; padding-right: 11.30926724%;
padding-left: 11.30926724%; padding-left: 11.30926724%;
} }
@ -2923,8 +2917,8 @@ span > object {
.no-comments, .no-comments,
.comment-respond, .comment-respond,
.comments-area article, .comments-area article,
.comment-list li.trackback, .comment-list .trackback,
.comment-list li.pingback, .comment-list .pingback,
.post-navigation [rel="prev"], .post-navigation [rel="prev"],
.post-navigation [rel="next"] { .post-navigation [rel="next"] {
padding-right: 9.87001616%; padding-right: 9.87001616%;
@ -2943,8 +2937,8 @@ span > object {
.full-width .comments-title, .full-width .comments-title,
.full-width .comment-respond, .full-width .comment-respond,
.full-width .comments-area article, .full-width .comments-area article,
.full-width .comment-list li.trackback, .full-width .comment-list .trackback,
.full-width .comment-list li.pingback { .full-width .comment-list .pingback {
padding-right: 5.882236%; padding-right: 5.882236%;
padding-left: 5.882236%; padding-left: 5.882236%;
} }
@ -2997,8 +2991,8 @@ span > object {
.no-comments, .no-comments,
.comment-respond, .comment-respond,
.comments-area article, .comments-area article,
.comment-list li.trackback, .comment-list .trackback,
.comment-list li.pingback, .comment-list .pingback,
.post-navigation [rel="prev"], .post-navigation [rel="prev"],
.post-navigation [rel="next"] { .post-navigation [rel="next"] {
padding-right: 12.44146986%; padding-right: 12.44146986%;
@ -3035,8 +3029,8 @@ span > object {
.full-width .comments-title, .full-width .comments-title,
.full-width .comment-respond, .full-width .comment-respond,
.full-width .comments-area article, .full-width .comments-area article,
.full-width .comment-list li.trackback, .full-width .comment-list .trackback,
.full-width .comment-list li.pingback { .full-width .comment-list .pingback {
padding-right: 11.21868265%; padding-right: 11.21868265%;
padding-left: 11.21868265%; padding-left: 11.21868265%;
} }
@ -3075,8 +3069,8 @@ span > object {
.full-width .comments-title, .full-width .comments-title,
.full-width .comment-respond, .full-width .comment-respond,
.full-width .comments-area article, .full-width .comments-area article,
.full-width .comment-list li.trackback, .full-width .comment-list .trackback,
.full-width .comment-list li.pingback { .full-width .comment-list .pingback {
padding-right: 0; padding-right: 0;
} }
} }