WordPressのコメントフォームやコメント欄周りのstyleをまとめてみた

README

- php wp_list_comments();
- php comment_form();

とテンプレートに書いて、出力されるHTMLのclassとidをまとめてみた。

jsdoit.scss

/* #! scss */
li.comment {
    .comment-body {
        .comment-author.vcard {
            .avatar.photo {
            }

            .fn {
                .url {
                }
            }

            .says {
            }
        }

        .comment-meta.commentmetadata {
            a {
            }
        }

        p {
        }

        .reply {
            .comment-reply-link {
            }
        }
    }

    .children {
        .comment.byuser.bypostauthor {
            .comment-body {
                .comment-author.vcard {
                    .avatar.photo {
                    }

                    .fn {
                        .url {
                        }
                    }

                    .says {
                    }
                }

                .comment-meta.commentmetadata {
                    a {
                    }
                }

                p {
                }

                .reply {
                    .comment-reply-link {
                    }
                }
            }
        }
        
        .odd {
        }

        .even {
        }
        
        .parent {
        }

        .depth-1 {
        } 

        .depth-2 {
        } 

        .depth-3 {
        }
        
        .depth-4 {
        } 

        .depth-5 {
        }
    }
}

#respond {
    #reply-title {
        small {
            #cancel-comment-reply-link {
            }
        }
    }

    #commentform {
        .comment-notes {
            .required {
            }
        }

        .comment-form-email {
            label {
            }

            .required {
            }

            #email {
            }
        }

        .comment-form-url {
            label {
            }

            #url {
            }
        }

        .comment-form-comment {
            label {
            }

            #comment {
            }
        }

        #submit {
        }
    }
}