Bây giờ chúng tôi có một thiết kế Photoshop để làm việc cho trang chủ của khu vực Đoạn mã. Nó dễ duyệt hơn rất nhiều so với trước đây, nhưng vẫn giữ tinh thần cầu vồng mà nó có trước đây. Bây giờ chúng ta có thể bắt đầu xây dựng nó trong các mẫu WordPress của mình. Viết tất cả HTML và PHP và CSS và BẠN BIẾT KHOAN!
Bước một là di chuyển qua tiêu đề tùy chỉnh của chúng tôi, chúng tôi đã sẵn sàng đi vào thiết kế tĩnh của chúng tôi. Điều đó có nghĩa là thay đổi một chút HTML để có các phần tử trình bao bọc chính xác. Nó cũng có nghĩa là đảm bảo rằng logic có điều kiện trong tiêu đề được đặt để tải CSS cụ thể cho khu vực này là tốt. Điều này luôn khiến tôi nghĩ đến quy tắc 1, 2 hoặc 3 mà tôi có đối với tệp CSS và tệp JavaScript trên bất kỳ trang web nhất định nào. CSS-Tricks là một ví dụ hoàn hảo về trang web “2” trong đó chúng tôi có các kiểu toàn cầu và một CSS cho từng phần đặc biệt của trang web nơi nó có khá nhiều kiểu riêng cho nó. Bố cục đoạn trích này chắc chắn là duy nhất.
Để có được tất cả đầu ra trên trang này mà chúng ta cần, chúng ta sử dụng lại một loạt các lệnh gọi wp_list_pages (). Chúng tôi nói về việc điều này có thể có vấn đề như thế nào vì đây là một cuộc gọi chuyên sâu và chúng tôi đã từng gặp vấn đề với nó trong quá khứ khi chúng tôi tạo vùng Almanac. Tuy nhiên, vì chúng tôi đã tăng mức sử dụng bộ nhớ và đang sử dụng bộ nhớ đệm nên đó không phải là vấn đề lớn.
Chúng tôi kết thúc video màn hình với mọi thứ chúng tôi cần xuất trên trang và thiết lập lưới rất cơ bản. Bây giờ chúng ta có thể chuyển sang làm cho nó trông giống như mô hình của chúng ta và cuối cùng là thêm các tương tác.