Home � lập trình wordpress , WordPress � [Theme Development] Phần 8: Viết CSS cho giao diện Mobile-first phần cuối

[Theme Development] Phần 8: Viết CSS cho giao diện Mobile-first phần cuối

Admin | 3:08 PM | 0 comments

Chào mọi người, mấy hôm nay cũng lu bu mấy việc nên cũng không thể viết bài đăng được, và bây giờ mình xin trở lại bằng việc tiếp tục bài hướng dẫn viết CSS cho giao diện để tiến hànhtự làm một theme WordPress. Và bài này cũng là phần cuối của bài hướng dẫn viết CSS, tức là viết CSS cho giao diện Desktop sau khi tạo xong hai giao diện dành cho Mobile và Tablet.

Về phần Desktop thì chúng ta sẽ không cần viết quá nhiều lắm đâu, vì như mình đã mô tả ngay từ đầu là chúng ta viết theo quy trình Mobile-first nên các loại giao diện về sau sẽ thừa hưởng những yếu tố của bản giao diện trước mà nếu cần thay đổi gì thì chúng ta chỉ cần viết thêm hoặc đè lên giá trị cũ bằng cách viết thêm !important sau mỗi thuộc tính cần đè.

Như hai lần trước, bạn sẽ cần mở file desktop.less lên và khai báo đầy đủ những đoạn sau:

@media screen and (min-width: 48em) {

        @import "../less_file/grid.less";

        @import "../less_file/variables.less";

        @total-width: 100%;

}

Khỏi cần giải thích chắc bạn cũng hiểu ý nghĩa của các đoạn trên rồi đúng không nào? Nếu bạn chưa hiểu thì xem lại phần 7 và 8 nhé.

Bây giờ ngay dưới đọan @total-width: 100%;, bạn tiếp tục viết thêm đoạn này vào để tùy chỉnh kích thước chữ về 94% để chữ nó to ra 1 xíu trên giao diện desktop.

body {

        font-size: 94% !important;

}

Bây giờ việc quan trọng nhất mình cần làm trên giao diện desktop đó là chuyển menu từ dạng cũ sang dạng dành cho desktop, tức là mình sẽ làm 1 kiểu menu bình thường chứ không cần hiệu ứng gì cả. Đầu tiên ta có:

#header {

        width: 100%;

        margin: 0;

        .site-title {

                .push(1); //Thêm margin-left

         }

        .header-menu {

                .push(2); //Thêm margin-left

                .column(6,12);

                .show-menu { display:none !important }

                        & > ul {

                        display: block !important;

                        position: relative;

                                &:after {

                                        content: " ";

                                        clear: both;

                                        display: block;

                                }

                        li {

                                display: inline;

                                background: transparent !important;

                                a:hover { font-weight: normal !important;}

                                ul { // Menu con

                                        display: none; //Ẩn menu con khi mặc định.

                                        position: absolute;

                                        top: 35%; left: 15%;

                                        li {

                                                a { font-size: 0.8em }

                                        }

                                 }

                                &:hover ul { //Rê chuột vào menu

                                        display: block; //Hiện menu con

                                }

                        } // end .header-menu ul li

                } // end .header-menu ul

        } // end .header-menu

} // end #header

Cho dễ hiểu, mình xin giải thích từng dòng cho luôn nhé, dòng nào không quan trọng mình xin bỏ qua:

Dòng 2: Dòng này là mình đưa tổng chiều rộng của phần #header về 100% bởi vì ở 2 phần trước mình đặt cho nó hàm .row(12) nên nó sẽ có kích thước là 103%, gây thừa trang.

Dòng 5: Mình cần một đoạn margin bên tay trái để tạo khoảng trống cho nó.

Dòng 8: Cũng là thêm margin nhưng nhiều hơn so với đoạn 5.

Dòng 9: Đưa menu qua nằm bên phải của trang, mình không làm bước này cho .site-title là vì nó có sẵn rồi, mình đã làm ở phần 7 đó thôi.

Dòng 10: Cho cái nút Menu để mình ấn vào ẩn đi, vì không cần dùng tới nữa.

Dòng 11 và dòng 18: Các đoạn code trong phần này sẽ được viết cho class .header-menu > ul li. Bạn có thể xem output CSS.

Dòng 12: Đưa cả đối tượng này về dạng block, từ đó phần này cũng sẽ được hiển thị lên. Bởi vì ở phần 6 ta viết jQuery cho nó thì trình duyệt đã tự thêm display: none cho nó ở mặc định.

Dòng 13: Mục đích ra thêm position cho chỗ này là vì tí nữa ta cần viết position: absolute cho menu con. Lúc đó vị trí menu con sẽ dựa vào đối tượng có position: relative gần nó nhất để hiển thị chính xác chứ không trôi đi lung tung.

Dòng 20: Đưa các đối tượng trong menu nằm thẳng hàng mà không cần float.

Dòng 21: Xóa bỏ background màu đỏ.

Dòng 22: Xóa bỏ hiệu ứng làm đậm chữ khi rê chuột vào menu.

Từ 24 tới 31: Các đoạn trong đây sẽ viết cho toàn bộ menu con.

Dòng 25: Cho nó ẩn đi.

Dòng 26: Thiết lập vị trí menu con nằm trong block của menu mẹ. Xem giải thích dòng 13.

Dòng 27: Căn chỉnh vị trí của menu con.

Dòng 29: Thu nhỏ font chữ của menu con.

Dòng 34: Cho menu con hiển thị khi rê chuột vào menu mẹ.

Sau khi Save lại, chúng ta có kết quả trông như thế này

Kế tiếp, phần toàn bộ nội dung trong trang ta chỉ có một đoạn CSS như thế này:

#wrapper {

        overflow: hidden;

        margin-bottom: 1em !important;

        width: 75%;

        margin: 0 auto;

        .featured-post {

                padding: 0;

        }

        .content {

                .row(12);

                .content-main {

                        .column(8,12);

                        .post-below { display: block }

                } //end .content-main

                /*--SIDEBAR--*/

                .sidebar {

                        .column(4,12);

                        clear: none;

                        padding-top: 0;

                        .recent-post {

                                li { .column(12); }

                        }

                } //end .sidebar

        } //end .content

} //end #wrapper

Trong đọan trên không có gì khó hiểu phải không nào, với các kiến thức CSS cơ bản thì bạn có thể hiểu rất rõ mà mình không cần phải giải thích thêm cho dài dòng.

Kết quả ở phần nội dung ta có thế này. Xin lỗi mình không thể chụp hết vì cái Snagit của mình có tí vấn đề

Và cuối cùng ta chỉ cần một vài đoạn CSS ngắn ngủn để chia cột lại phần #footer thôi vì ở phần đó ta không cần làm thêm gì trên giao diện desktop.

/*--FOOTER--*/

#footer {

        overflow: hidden;

        .col-1, .col-2 { .column(3,12) }

        .col-3 { .column(6,12); clear: none }

}

Kết quả

Ta tự hỏi, phần này ta viết CSS bằng LESS thấy nó ngắn quá vậy khi in ra CSS thì nó trông như thế nào nhỉ? Cũng ngắn thôi..

Toàn bộ code CSS trong phần 8

@media screen and (min-width: 48em) {

  body {

    width: 100%;

    *zoom: 1;

  }

  body:before,

  body:after {

    content: "";

    display: table;

  }

  body:after {

    clear: both;

  }

  /*

        # Thiết lập các biến cần dùng thường xuyên

  */

  /*--COLOR--*/

  /*--MISC--*/

  body {

    font-size: 94% !important;

  }

  /*--Menu--*/

  #header {

    width: 100%;

    margin: 0;

  }

  #header .site-title {

    margin-left: 9.374999999999998%;

  }

  #header .header-menu {

    margin-left: 17.708333333333332%;

    display: inline;

    float: left;

    width: 47.91666666666667%;

    margin: 0 1.0416666666666665%;

  }

  #header .header-menu .show-menu {

    display: none !important;

  }

  #header .header-menu > ul {

    display: block !important;

    position: relative;

  }

  #header .header-menu > ul:after {

    content: " ";

    clear: both;

    display: block;

  }

  #header .header-menu > ul li {

    display: inline;

    background: transparent !important;

  }

  #header .header-menu > ul li a:hover {

    font-weight: normal !important;

  }

  #header .header-menu > ul li ul {

    display: none;

    position: absolute;

    top: 35%;

    left: 15%;

  }

  #header .header-menu > ul li ul li a {

    font-size: 0.8em;

  }

  #header .header-menu > ul li:hover ul {

    display: block;

  }

  /*--CONTENT--*/

  #wrapper {

    overflow: hidden;

    margin-bottom: 1em !important;

    width: 75%;

    margin: 0 auto;

  }

  #wrapper .featured-post {

    padding: 0;

  }

  #wrapper .content {

    display: block;

    width: 102.08333333333333%;

    margin: 0 -1.0416666666666665%;

    *zoom: 1;

    /*--SIDEBAR--*/

  }

  #wrapper .content:before,

  #wrapper .content:after {

    content: "";

    display: table;

  }

  #wrapper .content:after {

    clear: both;

  }

  #wrapper .content .content-main {

    display: inline;

    float: left;

    width: 64.58333333333334%;

    margin: 0 1.0416666666666665%;

  }

  #wrapper .content .content-main .post-below {

    display: block;

  }

  #wrapper .content .sidebar {

    display: inline;

    float: left;

    width: 31.25%;

    margin: 0 1.0416666666666665%;

    clear: none;

    padding-top: 0;

  }

  #wrapper .content .sidebar .recent-post li {

    display: inline;

    float: left;

    width: 97.91666666666666%;

    margin: 0 1.0416666666666665%;

  }

  /*--FOOTER--*/

  #footer {

    overflow: hidden;

  }

  #footer .col-1,

  #footer .col-2 {

    display: inline;

    float: left;

    width: 22.916666666666664%;

    margin: 0 1.0416666666666665%;

  }

  #footer .col-3 {

    display: inline;

    float: left;

    width: 47.91666666666667%;

    margin: 0 1.0416666666666665%;

    clear: none;

  }

}

Toàn bộ code CSS trong phần 8
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135	`@media` `screen` `and (min-width:` `48em) {` `body {` `width:` `100%;` `zoom:` `1;` `}` `body:before,` `body:after {` `content:` `"";` `display: table;` `}` `body:after {` `clear:` `both;` `}` `/` `# Thiết lập các biến cần dùng thường xuyên` `/` `/--COLOR--/` `/--MISC--/` `body {` `font-size:` `94%` `!important;` `}` `/--Menu--/` `#header {` `width:` `100%;` `margin:` `0;` `}` `#header .site-title {` `margin-left:` `9.374999999999998%;` `}` `#header .header-menu {` `margin-left:` `17.708333333333332%;` `display:` `inline;` `float:` `left;` `width:` `47.91666666666667%;` `margin:` `0` `1.0416666666666665%;` `}` `#header .header-menu .show-menu {` `display:` `none` `!important;` `}` `#header .header-menu > ul {` `display:` `block` `!important;` `position:` `relative;` `}` `#header .header-menu > ul:after {` `content:` `" ";` `clear:` `both;` `display:` `block;` `}` `#header .header-menu > ul li {` `display:` `inline;` `background:` `transparent` `!important;` `}` `#header .header-menu > ul li a:hover {` `font-weight:` `normal` `!important;` `}` `#header .header-menu > ul li ul {` `display:` `none;` `position:` `absolute;` `top:` `35%;` `left:` `15%;` `}` `#header .header-menu > ul li ul li a {` `font-size:` `0.8em;` `}` `#header .header-menu > ul li:hover ul {` `display:` `block;` `}` `/--CONTENT--/` `#wrapper {` `overflow:` `hidden;` `margin-bottom:` `1em` `!important;` `width:` `75%;` `margin:` `0` `auto;` `}` `#wrapper .featured-post {` `padding:` `0;` `}` `#wrapper .content {` `display:` `block;` `width:` `102.08333333333333%;` `margin:` `0` `-1.0416666666666665%;` `zoom:` `1;` `/--SIDEBAR--/` `}` `#wrapper .content:before,` `#wrapper .content:after {` `content:` `"";` `display: table;` `}` `#wrapper .content:after {` `clear:` `both;` `}` `#wrapper .content .content-main {` `display:` `inline;` `float:` `left;` `width:` `64.58333333333334%;` `margin:` `0` `1.0416666666666665%;` `}` `#wrapper .content .content-main .post-below` `{` `display:` `block;` `}` `#wrapper .content .sidebar {` `display:` `inline;` `float:` `left;` `width:` `31.25%;` `margin:` `0` `1.0416666666666665%;` `clear:` `none;` `padding-top:` `0;` `}` `#wrapper .content .sidebar .recent-post li {` `display:` `inline;` `float:` `left;` `width:` `97.91666666666666%;` `margin:` `0` `1.0416666666666665%;` `}` `/--FOOTER--/` `#footer {` `overflow:` `hidden;` `}` `#footer .col-1,` `#footer .col-2` `{` `display:` `inline;` `float:` `left;` `width:` `22.916666666666664%;` `margin:` `0` `1.0416666666666665%;` `}` `#footer .col-3` `{` `display:` `inline;` `float:` `left;` `width:` `47.91666666666667%;` `margin:` `0` `1.0416666666666665%;` `clear:` `none;` `}` `}`

Ok, xong rồi đó. Bây giờ bạn có thể test thử cái giao diện mà bạn vừa làm xong trên di động, máy tính bảng và desktop nhé. Để test kỹ hơn, đừng quên sử dụng tính năng Remote có trong Prepros để truy cập xem giao diện trên các thiết bị di động nha.

Tổng kết phần viết CSS

Trong bốn phần vừa qua các bạn chắc cũng đã nắm được kha khá kiến thức liên quan tới CSS rồi đúng không nè? Dựa vào các kiến thức đó, mình tin chắc các bạn sẽ có thể dễ dàng tự tạo ra các giao diện mobile-first dành cho riêng mình mà không còn phải bối rối nên bắt đầu từ đâu.

Tiếp theo của serie này, chúng ta sẽ bắt đầu tiên hành đi vào phần quan trọng nhất để tạo một theme cho WordPress đó là quy trình chuyển giao diện HTML/CSS qua WordPress sử dụng PHP. Trong phần này chúng ta sẽ có nhiều đinh nghĩa cần xem qua, vì vậy mình khuyến khích bạn nên tranh thủ mấy hôm mình bận để học qua PHP cơ bản nếu bạn chưa biết nhé, sẽ dễ dàng hơn cho bạn rất nhiều khi bắt đầu đấy.

Hẹn gặp lại bạn trong phần kế tiếp!.

Tải source phần 8

Category: lập trình wordpress, WordPress

GROUP VIỆT

[Theme Development] Phần 8: Viết CSS cho giao diện Mobile-first phần cuối

Tổng kết phần viết CSS

0 comments

Nhập nội dung cần tìm:

Trang xã hội của Group Việt

Xem nhiều nhất

Followers

Xem theo tháng