Thiết kế cho các bình luận có thể trông rất đơn giản. Và nó là! Nhưng tôi nghĩ đơn giản là hiệu quả trong trường hợp này. Nhận xét là một phần quan trọng của CSS-Tricks, tôi muốn chúng thật dễ đọc và thoải mái.
Bây giờ chúng ta sẽ chuyển sang WordPress và biến chuỗi bình luận này thành hiện thực. Điều đầu tiên chúng tôi làm là tìm một mẫu mà chúng tôi sẽ hiển thị các nhận xét. single.phpcó lẽ là quan trọng nhất (các bài đăng trên blog cá nhân). Chúng tôi tìm thấy trong mẫu đó rằng hàm comments_template()là tất cả những gì chúng tôi cần gọi để có được toàn bộ khu vực nhận xét. Về cơ bản những gì chức năng đó làm là lấy tệp comments.phpvà đặt nó vào đó. Vì vậy, chúng tôi bắt đầu xem xét điều đó.
Mã trong tệp đó bắt đầu bằng . Điều đó rất thích hợp. Các bình luận chắc chắn là một phần và nó phải có một định danh. Hãy nhớ rằng chúng tôi không thực hiện bất kỳ kiểu nào dựa trên ID, nhưng nhận xét của bạn được bao bọc trong một phần tử có ID nhận xét là tốt vì:
- Bạn luôn có thể băm liên kết xuống các nhận xét bằng cách thêm #comments vào URL.
- Những người ghét nhận xét có thể ẩn chúng trong biểu định kiểu người dùng của họ với một ID có thể đoán được.
Chúng tôi tiếp tục xem qua mã trong tệp này. Chúng tôi xóa một số nội dung mà chúng tôi khá chắc chắn rằng chúng tôi sẽ không sử dụng. Chúng tôi thay đổi một số thứ để phù hợp với những gì chúng tôi đã thiết kế trong Photoshop.
Sau đó, chúng ta đi qua một hàm wp_list_comments()là hàm chịu trách nhiệm đưa ra toàn bộ chuỗi bình luận. Sau đó, nó tiếp tục phun ra những thứ như mẫu bình luận. Trong khi đó, luôn có logic để hiển thị mọi thứ trong các tình huống khác nhau, chẳng hạn như khi nhận xét bị đóng hoặc khi nhận xét đang mở nhưng không có bất kỳ nhận xét nào.
Chúng tôi tìm thấy một chức năng hơi kỳ lạ được gọi là cancel_comment_reply_link()mà chúng tôi xem xét và thấy nó xử lý chức năng di chuyển biểu mẫu nhận xét xuống dưới cùng trong trường hợp liên kết Trả lời đã được nhấp và biểu mẫu đã di chuyển lên, nhưng chúng tôi không muốn nó để.
Sau đó, chúng tôi đào sâu vào HTML mà chúng tôi lấy từ đó wp_list_comments(). Không cần làm gì cả, chúng ta sẽ lấy HTML từ hàm này là hoàn toàn hợp lý. Nhưng cũng có thể, nó là gì và sẽ không phù hợp với mọi thiết kế có thể. Cá nhân tôi thích có toàn quyền kiểm soát đối với việc đánh dấu. Vì vậy, thay vì chỉ lấy những gì nó cung cấp cho chúng tôi, chúng tôi kiểm soát nó bằng cách sử dụng một hàm tùy chỉnh trong functions.phptệp của chúng tôi để ghi đè đánh dấu mặc định.
Bây giờ chúng ta có quyền kiểm soát HTML, chúng ta có thể vào kinda "chế độ thiết kế" nơi chúng ta chuyển qua lại giữa CSS và HTML để hoàn thành thiết kế của mình. Nhận xét CSS, giống như bất kỳ CSS mô-đun nhỏ nào khác trong dự án này, chúng tôi sẽ chuyển xuống tệp _comments.scss mà chúng tôi có thể đưa vào toàn cầu. Trường hợp hoàn hảo khi tách CSS thành tệp riêng của nó có ý nghĩa. Mặc dù vậy, chúng ta nên sử dụng nhiều kiểu toàn cầu nhất có thể. Ví dụ, mỗi chú thích chắc chắn là a .module, các kiểu tiêu đề sẽ hoàn toàn ổn ở đây đối với tên và kiểu chữ nói chung chỉ nên đến từ các kiểu chữ toàn cầu.
Chúng tôi thậm chí còn sử dụng hệ thống lưới của chúng tôi trong các nhận xét vì mỗi nhận xét về cơ bản là một lưới hai cột. Những điều nhỏ nhặt khác hoàn toàn tùy chỉnh đối với nhận xét, như vị trí và cách chúng tôi định vị các liên kết trả lời.
Ở phần cuối của screencast, chúng tôi phát hiện ra rằng thiết kế Photoshop của chúng tôi có một lỗ hổng nghiêm trọng. Các nhận xét lồng nhau nằm trong nhận xét gốc và khá khó để làm cho các mô-đun lồng nhau của chúng ta trông như thể chúng tách biệt. Chúng tôi có thể phải thực hiện một số thỏa hiệp ở đây.