Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile

Thảo luận trong 'Wordpress' bắt đầu bởi hoangtrieumanhn, 7/1/15.

Lượt xem: 13,376

Bạn đang xem:

Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Lời đầu tiên cho mình xin cáo lỗi với các bạn là trong thời gian nghỉ tết do ăn chơi dữ quá nên không biết bài mới được, bây giờ mình mới tiếp tục viết bài cho Serie WordPress Toàn Tập này.

    Để có thể review trang web trên các loại thiết bị như mobile, tablet, … ta dùng công cụ sau đây để test trang web ngay trên trình duyệt Firefox. Vào http://lab.maltewassermann.com/viewport-resizer/ click và giữ chuột button “CLICK OR BOOKMARK” kéo vào bookmark toolbar của Firefox, sau đó vào website cần kiểm tra và bấm vào Bookmark vừa được tạo là “<->Resizer” để kiểm tra từng kích thước màn hình khác nhau.

    Nào chúng ta bắt đầu Viết CSS cho Mobile, trước tiên bạn thêm đoạn code sau vào trước thẻ </head> của file index.html.

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" />
    <link rel="stylesheet" type="text/css" href="css/small-tablet.css" media="screen and (min-width: 600px)" />
    <link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width: 768px)" />
    <link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 1024px)" />
    Dòng đầu tiên là để kích hoạt chế độ Responsive của giao diện, các dòng tiếp theo là chèn lần lượt các file css cho riêng từng loại màn hình vào giao diện.

    Tiếp đó ta tạo file mobile.less trong thư mục css ta tạo lúc ban đầu, đừng quên bật Prepros nhé, tạo xong quay lại Prepros bấm Refresh để file mobile.less được cập nhật vào phần mềm.

    Ta vừa làm vừa mở tool Resizer để check cho tiện, hiện tại giao diện nó sẽ như thế này:

    [​IMG]
    Giao diện hiện tại chạy trên Mobile

    Bắt đầu viết những dòng code đầu tiên trong file mobile.less, sau đây là đoạn code dùng để thiết lập một số thuộc tính chung cho giao diện mobile, các bạn sẽ viết code tại /* Viết code CSS tại đây */

    1
    2
    3
    @media screen and (min-width: 18.75em) {
    /* Viết code CSS tại đây */
    }
    Ta bắt đầu viết CSS cho phần Header trước, code phần header như sau:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    #header{
    .top-menu{ul{padding-top: 3px;li{padding-right: 5px;}}}.site-title{.title{text-align: center;padding: 5px 0;}.top-banner{text-align: center;padding-bottom: 3px;
    img{
    width: 98%;
    }
    }
    }
    .header-menu{
    padding-top: 10px;
    min-height: 3em;
    a.mobile-menu{
    background: #dcdcdc;
    margin-left: 40%;
    border: 2px solid #FF0000;
    padding: 5px;
    border-radius: 3px;
    }
    }
    }
    Ở phần này đáng chú ý đó là phần Header Menu, tại giao diện Mobile thì không thể nào làm menu với nhiều thuộc tính như vậy được nên ta tạo một nút Menu và sẽ viết một đoạn jQuery đơn giản để ẩn đi danh sách các menu để lại nút Menu khi click vào nút Menu sẽ hiển thị danh sách các item của Menu. jQuery được thực hiện như sau.

    Trước tiên ta tạo một folder ngang hàng với index.html tên là “js” và tạo một file jquery.js với nội dung như sau:

    1
    2
    3
    4
    5
    6
    $(document).ready(function(){
    $('.header-menu > ul').hide();
    $('a.mobile-menu').click(function(){
    $('.header-menu > ul').slideToggle(100);
    });
    });
    Thêm code sau vào trước thẻ :

    1
    2
    3
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="js/jquery.js"></script>
    Phần Wrapper không thay đổi, Code Footer có nội dung như sau:

    1
    2
    3
    4
    5
    #footer{
    .footer-logo{
    text-align: center;
    }
    }
    Giao diện cuối cùng sẽ như thế này:

    [​IMG]
    Viết CSS cho giao diện Mobile

    Các bạn download code đầy đủ tại đây
    Bài tiếp theo mình sẽ hướng dẫn các bạn viết CSS cho giao diện Tablet.
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, can ho river city, Toyota camry 2017, @@
=