[Lập trình theme WordPress] Viết CSS cho theme – Phần 3

[Lập trình theme WordPress] Viết CSS cho theme – Phần 3

Ở phần này, chúng ta sẽ đi qua việc viết CSS cho khung nội dung, các hình ảnh chèn trong post và author box ở cuối mỗi post. Xem bài viết CSS cho theme tại đây!

https://www.youtube.com/watch?v=y-YGHTl5x8M

Tiếp tục ở phần viết CSS cho theme trong serie Lập trình theme WordPress, chúng ta sẽ viết CSS cho việc hiển thị ở phần nội dung được tốt hơn.

Bây giờ bạn có thể thấy khung hiển thị nội dung chưa được chia cột vì chúng ta dự định phần hiển thị nội dung sẽ có hai cột, bên trái là ảnh thumbnail của post và bên phải là thông tin của post. Vậy thì chúng ta có thể viết thêm CSS như thế này vào để chia cột phần đó ra.

Sẵn tiện chúng ta viết thêm CSS trang trí cái nút Read More lại cho đẹp hơn nữa.

Kết quả ta có:

laptrinhtheme-finish-chiacotpost
Ảnh. Viết CSS cho theme – Thêm CSS của nút Read More
Tuy nhiên, ta có một vấn đề là khi vào trong xem nội dung bài viết, nó vẫn thừa một khoảng trắng bên tay trái nội dung bởi vì ở trong single và ngoài home sử dụng các class HTML giống với nhau nên nó cũng sẽ áp dụng CSS. Nhưng may mắn là khi code phần header.php, chúng ta đã thêm hàm body_class() vào trong thẻ body nên bây giờ chúng ta có thể viết CSS như sau để nó xóa khoảng trắng khi vào trang single.

Và trang trí lại font chữ, màu chữ của phần thông tin của post.

Và viết CSS chia cột cho cái phần Author Box nữa chứ nhỉ.

Kết quả ở author box:

laptrinhtheme-finish-authorbox
Ảnh. Viết CSS cho theme – Kết quả của author box
Và một điều quan trọng nữa là các post có chứa Post Format ở ngoài trang chủ cũng sẽ hiển thị theo kiểu chia cột và thừa khoảng trắng bên trái, do vậy chúng ta sử dụng một class riêng của từng post format và xóa đi cái khoảng trắng đó nhé:

CSS hiển thị hình ảnh trong post

WordPress, khi chúng ta chèn ảnh vào bài thì nó sẽ có một số class riêng của nó, chẳng hạn như khi chọn ảnh nằm bên trái thì sẽ có class alignleft chẳng hạn. Mà nếu chúng ta không viết CSS cho nó thì nó cũng sẽ không hiển thị đúng, vì vậy bạn hãy chèn thêm đoạn CSS này vào:

Nếu bạn thích thì cứ tùy biến thêm nhé. Bây giờ thì xem lại những bài viết có ảnh, có phải là nó đã hiển thị tốt hơn rồi chứ?

laptrinhtheme-finish-imagestyle
Ảnh. Hiển thị viết CSS cho theme
Được rồi, trong bài này tạm thời chúng ta chỉ làm như thế thôi, qua phần sau sẽ viết CSS tiếp nhé.

Các bài viết liên quan:

WordPress FAQ  » Học WordPress > Lập trình WordPress > Lập trình Themes


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin

Ảnh. [Lập trình theme WordPress] Viết CSS cho theme – Phần 3
Ảnh. [Lập trình theme WordPress] Viết CSS cho theme – Phần 3

Chia sẻ bài viết

Bình luận