Ví dụ tự viết theme cho wordpress: viết css - bài cuối

Ví dụ tự viết theme cho wordpress: viết css - bài cuối là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tự viết theme cho wordpress: viết css - bài cuối sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Phần này chúng ta sẽ cùng nhau thêm một số đoạn CSS để cho việc hiển thị các widget trên sidebar được thân thiện hơn, hầu hết các widget đều có các cấu trúc HTML giống nhau và mang một class chung tên là .widget nên chúng ta sẽ tiến hành viết CSS cho class này để nó được áp dụng trên toàn bộ các widget.

Trước tiên, chúng ta nên reset lại các style có sẵn trên sidebar bằng đoạn sau:

/*---:[SIDEBAR]:---*/
#sidebar {
        font-size: 0.9em;
}
#sidebar ul,
#sidebar ol,
#sidebar li {
        margin: 0;
        list-style: none;
        padding: 0;
}  

Tiếp đến là thêm CSS cho class .widget:

/* CSS chung cho toàn bộ widget */
.widget {
        background: #f7f7f7;
        border: 1px solid #e8e8e8;
        padding: 1em !important;
        margin: 15px 0 !important;
}
.widget ul {
        list-style: square !important;
        padding-left: 1.7em !important;
}
.widget ul li {
        list-style: square !important;
        margin-bottom: 8px !important;
} 

Thế nhưng widget tên Calendar có thể sẽ nhìn hơi xấu một chút do ta chưa viết CSS cho thẻ table, do vậy chúng ta nên thêm một chút CSS cho thẻ table của widget Calendar để nó hiển thị tốt hơn:

/* Calendar Widget */
.widget_calendar {}
.widget_calendar table {
        width: 100%;
}
.widget_calendar table #today {
        background: #7C7C7C;
        color: #FFF;
}
.widget_calendar table caption {
        font-weight: bold;
        font-size: 1.1em;
}  

và đây là kết quả:

Ví dụ tự viết theme cho wordpress: viết css - bài cuối

Lời kết

Như vậy là kết thúc bài này, cũng là lúc chúng ta đã kết thúc việc viết CSS cho theme này vì qua vài bài thì chúng ta cũng đã viết CSS xong một số thành phần quan trọng trong một theme WordPress rồi. Tiếp tục ở bài sau, mình sẽ hướng dẫn các bạn làm một công việc mới đó là cách tạo file ngôn ngữ cho theme mà chúng ta đã làm từ đầu serie tới giờ.

Hy vọng với bài viết về Ví dụ tự viết theme cho wordpress: viết css - bài cuối đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!