# 122: Xây dựng kho lưu trữ video, Phần 1 - Thủ thuật CSS

Anonim

Trang lưu trữ video là một phần của trang web nơi mọi người có thể duyệt qua tất cả các video miễn phí có sẵn để xem. Nó để duyệt, phải giống như trang chủ cho các đoạn trích hoặc trang chủ cho các bản demo.

Các trang này là mẫu của riêng chúng, chúng tôi có thể rất nhanh chóng và dễ dàng chỉnh sửa thành hình như chúng tôi đã làm nhiều lần trước đây. Chúng tôi đặt trình bao bọc của riêng mình xung quanh mọi thứ và sử dụng cấu trúc lưới của chúng tôi để tạo cho nó một bố cục 2/3 1/3.

Điều rất thú vị đối với tôi ở đây là chúng tôi có cơ hội tách ra một số đánh dấu thô cũ và thay thế nó bằng đánh dấu thông minh hơn và được tạo tự động. Trước đây, tôi đã viết tay từng mục nhập vào kho lưu trữ video dưới dạng danh sách định nghĩa. Đối với người mới bắt đầu, đó có lẽ không phải là đánh dấu ngữ nghĩa phù hợp cho danh sách video, đặc biệt khi mỗi mục bắt đầu một danh sách mới.

Thay vào đó, chúng tôi trích xuất tất cả các đánh dấu cũ đó và thay vào đó chạy một truy vấn được tạo cẩn thận để lấy tất cả dữ liệu chúng tôi cần từ WordPress. Chúng tôi chạy một vòng lặp trên truy vấn đó và xuất ra đánh dấu mới rõ ràng hơn (chỉ div với các lớp). Điều này sẽ giúp chúng tôi tiết kiệm thời gian trong tương lai, không cần phải duy trì các trang lưu trữ này bằng tay.

Trong khi chúng tôi viết đánh dấu mới này, chúng tôi đang bổ sung nó bằng các hàm WordPress điền vào các bit mà chúng tôi cần để trở nên năng động. Các tiêu đề là the_title(). Các liên kết là the_permalink(). Các hình thu nhỏ là các trường tùy chỉnh. Dễ dãi.

Các div sử dụng tên lớp từ hệ thống lưới của chúng tôi để tất cả các thứ tự động hoạt động và định cỡ. Chúng ta không hiệu quả sao? Mặc dù vậy, một số CSS cần phải được tùy chỉnh và chúng tôi viết những gì chúng tôi cần. Ví dụ, điều chỉnh phần đệm cho các mô-đun cụ thể trong phần này (nó quá nhiều, chúng tôi đã giảm bớt nó). Loại điều này rất dễ thực hiện thông qua các tên lớp có sẵn cho chúng tôi vì chúng tôi đã sử dụng một body_class()cách thông minh cách trở lại khi chúng tôi làm việc trên đầu.