Ví dụ tự viết theme cho wordpress: Viết CSS - Bài 1

Ví dụ tự viết theme cho wordpress: Viết CSS - Bài 1 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 1 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.

Tiếp phần này, mình sẽ hướng dẫn các bạn làm một việc rất quan trọng để quyết định theme của bạn có đẹp hay không, đó là viết CSS cho theme để nó ra được giao diện hoàn chỉnh. Và ở bài mở đầu mình đã có yêu cầu bạn chuẩn bị kiến thức HTML cơ bản và CSS cơ bản vì trong các phần CSS mình sẽ không nói về các vấn đề cơ bản như cú pháp, các thuộc tính cơ bản,…mà chỉ tập trung vào những gì quan trọng mà thôi.

Tham khảo:

  • Kinh nghiệm tự học CSS
  • Học gì để thiết kế theme WordPress?

Trước khi bắt đầu bài này, đó là mình khuyến khích bạn đã theo serie này đến đây rồi thì viết cái gì thì bạn nên làm cái đó, vì mục đích mình viết serie này là để giúp bạn hiểu cách làm được một theme. Còn theme đó có đẹp hay không thì do kỹ năng Front-end Development của bạn như CSS, Javascript, jQuery,….Mình trả lời độc giả thường xuyên nên mình cũng đoán được phần nào thói quen xem tutorial của nhiều bạn nên mình nhắc trước hờ như vậy để bạn biết.

Nếu bạn muốn làm một theme chuyên nghiệp hơn, thì hãy chắc chắn bạn đã hiểu hết serie này, cùng với việc cải thiện kỹ năng CSS sẽ giúp bạn làm tất cả những gì bạn muốn.

Ok, chúng ta bắt đầu vào nội dung chính nhé. Và tất cả những đoạn CS mà chúng ta sẽ làm là viết vào file style.css trong theme, chèn bên dưới các đoạn comment khai báo thông tin theme.

Thêm Reset CSS

Reset CSS là tên chung để chỉ các đoạn CSS có chức năng đưa các giá trị của một số thành phần HTML về giá trị ban đầu. Bởi vì mỗi trình duyệt nó sẽ có một số quy tắc để xử lý CSS riêng nên nếu không reset CSS thì giao diện của bạn có thể sẽ không hiển thị tốt trên các trình duyệt.

Do vậy, bạn hãy chèn đoạn dưới đây vào file style.css nhé:

  /*! normalize.css v1.0.0 | MIT License | git.io/normalize */  
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}     

Đừng quan tâm nó là cái gì và đừng hiểu nó làm gì luôn, cứ chèn vào đi rồi sau này muốn sửa style gì thì cứ khai báo lại là được.

Giao diện sau khi reset CSS.

Viết CSS cho các thuộc tính quan trọng

Ban đầu, chúng ta sẽ cần thiết lập một số thuộc tính CSS cho các phần tử quan trọng trong website như kiểu chữ, màu chữ, màu liên kết,….Chúng ta có đoạn sau:

/*---:[GLOBAL CSS]:---*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
        font-size: 100%;
        font-family: Helvetica Neue, Arial, sans-serif;
        font-color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img {
        max-width: 100%;
        height: auto;
}
a {
        color: #F6591C;
        text-decoration: none;
}
        a:hover, a:visited, a:active {
                color: #FF3F00;
                text-decoration: underline;
        }
input,input[type="submit"],button {
        border: 1px solid #C8C8C8 !important;
        padding: 5px 10px;
}
h1 {
        font-size: 2.2em;
}
h2 {
        font-size: 2em;
}
h3 {
        font-size: 1.8em;
}
h4 {
        font-size: 1.55em;
}
h5 {
        font-size: 1.3em;
}
table, table tr, table td {
        border: 1px solid #e7e7e7;
        padding: 8px;
} 

Ở đoạn này, chúng ta sẽ thiết lập một số giá trị cho giao diện của mình như kích thước size chữ, màu chữ và các màu liên kết. Các bạn lưu ý ở chỗ phần tử img, mình đặt max-width: 100% nghĩa là dù ảnh có to cách mấy thì nó sẽ không thể tràn ra khỏi cái khung mẹ của nó được, còn height: auto nghĩa là chiều dài của hình ảnh sẽ căn theo kích thước gốc của ảnh để ảnh hạn chế bị méo mó.

CSS chia cột website

Như lúc code theme này, chúng ta phân rõ trang ra làm 2 cột đó là cột hiển thị nội dung #main-content và #sidebar. Và tất cả thành phần trong website được bao bọc trong một vùng chọn là #container. Vậy thì bây giờ, chúng ta sẽ viết CSS thiết lập chiều rộng của theme ở vùng chọn #container:

/*---:[WEBSITE COLUMNS]:---*/
#container {
        width: 1024px;
        margin: 0 auto;
        background :#ffffff;
        border: 1px solid #D1D1D1;
        padding: 10px 25px;
}
.content {
        overflow: hidden;
}
#main-content {
        width: 620px;
        float: left;
        margin-right: 10px;
}
#sidebar {
        width: 320px;
        float: right;
        margin-left: 20px;
        padding-left: 20px;
} 

Chỗ này nghĩa là mình sẽ đặt chiều rộng của website với kích thước là 1024px cho toàn website và đặt khoảng cách bên trong khung (padding) là 10px với top và bottom, 25px cho left và right vì #container là nó bao quát toàn bộ nội dung trong website.

Kế tiếp là mình sẽ cho chiều rộng của khung #main-content là 620px rồi nhảy qua trái với thuộc tính float: left, sau đó phần #sidebar sẽ có chiều rộng là 300px, cũng nhảy qua trái với float: left, còn dư 30px thì mình cho nó làm khoảng cách bên ngoài (margin) ở lề trái. Điều quan trọng là do #main-content và #sidebar là hai thẻ div nên khi nó float, thẻ nằm bao bọc nó phải tiến hành clear float, ở đây mình dùng cách clear float đó là sử dụng thuộc tính overflow để kiểm soát nội dung bị tràn tràn khỏi box, mình sẽ có bài phân tích cụ thể vào dịp khác.

Bây giờ ta có giao diện website thế này:

Được rồi, bây giờ chúng ta sẽ viết CSS cho từng thành phần trên website từ trên xuống dưới, từ trái sang phải nhé.

Viết CSS cho tiêu đề website ở header

Bây giờ việc đầu tiên là hãy viết lại cái header cho website đẹp hơn một chút (không bao gồm banner). Ta có đoạn CSS như sau:

/*---:[LOGO]---*/
.logo {
        margin-bottom: 30px;
        line-height: 2;
}
.logo .site-name {}
.logo .site-name h1 {
    margin: 0;
    font-size: 0;
}
.logo .site-name a {
    color: rgb(0, 100, 212);
    font-size: 32px;
    font-weight: bold;
}
.logo .site-description {
        margin-top: -1em;
        color: rgb(111, 111, 111);
        font-family: Time New Roman,serif;
        font-size: 1.04em;
        font-style: italic;
} 

Lúc này, cái tên website của bạn ở header sẽ chuyển sang màu xanh và mô tả website sẽ chuyển sang màu xám, kiểu chữ có chân và in nghiêng.

Nếu bạn muốn sử dụng logo dạng ảnh riêng của bạn thì hãy chờ đến cuối serie, sẽ có bài hướng dẫn làm theme option để thiết lập hiển thị logo hình ảnh hoặc chữ tùy thích, còn nếu bạn vẫn muốn dùng CSS thì có thể viết cái vùng chọn .logo .site-name a thành thế này:

.logo .site-name a {
    display: block;
    width: 220px; /*chiều rộng của logo*/
    height: 90px; /*chiều cao của logo*/
    background: url('link của logo') left top no-repeat;
    text-indent: -969696px;
} 

Kết thúc phần 1 của CSS

Viết CSS tới đây thì chắc cũng khá dài rồi nhỉ, do vậy mình xin kết thúc phần 1 tại đây và ở phần sau chúng ta sẽ viết tiếp CSS cho các thành phần khác, để tránh việc cô đọng quá nhiều nội dung cho người đọc.

Hy vọng với bài viết về Ví dụ tự viết theme cho wordpress: Viết CSS - Bài 1 đã 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!