Chủ Nhật, 31 tháng 1, 2016

Starter Theme: Tùy chỉnh giao diện nâng cao

1/31/2016 11:28:00 CH    No comments


trong Wordpress Development
Bài này thuộc phần 3 của 4 phần trong serie Hướng dẫn Starter Theme
Trong bài viết trước, Sáu đã hướng dẫn cho bạn cách chỉnh sửa và hoàn thiện giao diện HTML5 Blank cơ bản nhất. Trong bài viết này Sáu sẽ thảo luận với bạn phần cài đặt nâng cao cho giao diện.

1. Xử lý menu chính

Menu chính sẽ chứa thông tin các trang hoặc chuyên mục quan trọng nhất, trong bài viết những yếu tố tạo nên sự thành công khi làm SEO với WordPress thì Sáu cũng đã nêu khái niệm cũng như cách bố trí giữa chuyên mục, bài viết và trang như thế nào cho hợp lý. Đối với các tag thì bạn không nên để vào menu này.
Bây giờ bạn mở tập tin header.php lên, sau đó tìm kiếm tới đoạn này:
01
02
03
04
05
        
Đây là đoạn code hiển thị menu của giao diện đã được build sẵn. Bạn cắt đoạn code trên và cho ra ngoài thẻ div với class là wrapper, và vị trí là nằm phía trước wrapper nhé bạn, mục đích của việc này là đưa menu lên trên cùng và cho nó rộng toàn màn hình:
01
02
03
04
05
06
07
08
        
 
class="wrapper">
Bây giờ thì menu đã nằm lên trên cùng của trang, tuy nhiên nó chưa được canh giữa cho đều với nội dung bên dưới, bạn tiếp tục mở phần code chỗ lúc nãy lên và thêm vào một thẻ div với class là page-width:
01
02
03
04
05
06
07
class="page-width">
        
Sau khi hoàn thành xong thì nhớ lưu lại, nhưng menu của bạn vẫn chưa thật sự nằm ra giữa, không phải lo gì hết, tiếp tục mở tập tin custom-style.css trong thư mục con của bạn lên và tìm tới lớp .wrapper:
01
02
03
.wrapper {
    width: 1020px; /* Do rong cua trang la 1020px */
}
Sửa đoạn css ở trên thành đoạn như bên dưới, thêm lớp .page-width vào chung với lớp .wrapper để có cùng độ rộng của trang.
01
02
03
.wrapper, .page-width {
    width: 1020px; /* Do rong cua trang la 1020px */
}
Vẫn chưa thật sự có tác dụng, menu của bạn vẫn chưa được canh giữa, đó là vì bạn còn thiếu thuộc tính margin cho khung này, tiếp tục thêm dòng css sau vào dưới mục vừa sửa bên trên:
01
02
03
04
05
06
07
.wrapper, .page-width {
    width: 1020px; /* Do rong cua trang la 1020px */
}
 
.page-width {
        margin: 0 auto;
}
Dòng css trên nghĩa là bạn sẽ canh cho khung page-width cách phía trên với phía dưới là 0, đối với 2 bên trái và phải sẽ canh tự động, và khung của bạn sẽ nằm ngay ở giữa màn hình thẳng hàng với các mục bên dưới sau khi bạn nhấn f5 để tải lại trang.
Đưa menu lên trên cùng và canh giữa màn hình
Đưa menu lên trên cùng và canh giữa màn hình
Tiếp tục, bây giờ bạn đăng nhập vào bảng điều khiển và ghé vào mục quản lý Menus của giao diện tại Dashboard -> Appearance -> Menus
Bạn tạo một menu với tên là Top Menu và kéo một vài trang hoặc chuyên mục vào đấy, và làm cho menu phân thành 2 cấp như hình mình minh họa bên dưới nhé.
Tạo menu 2 cấp cho WordPress
Tạo menu 2 cấp cho WordPress
Sau khi tạo menu và lưu lại thì bạn sẽ thấy sự thay đổi khá nhiều, hiển thị không còn đẹp như lúc đầu nữa. Bây giờ bạn tìm trong tập tin custom-style.css dòng code sau:
01
02
03
.nav .menu li {
        display: inline; /* Hien thi tren cung mot hang */
}
Thay nguyên đoạn code css sau:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
.nav .menu li {
        display: inline; /* Hien thi tren cung mot hang */
}
 
.nav .menu a {
    color: rgba(255, 255, 255, 0.75); /* Mau chu cua duong dan tren menu */
    display: inline-block; /* Hien thi cung hang va nhay xuong hang khi het cho */
    font-size: 13px;
    font-weight: bold; /* Dinh dang kieu chu in dam */
    padding: 20px;
    text-transform: uppercase; /* Luon luon xuat chu IN HOA ra man hinh */
}
 
.nav .menu a:hover {
        text-decoration: underline /* Gach chan khi dua chuot ngang qua */
}
Thay đoạn code css trên thành như bên dưới:
01
02
03
04
05
06
07
08
09
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
35
36
37
38
39
40
.nav .menu li, .nav li {
        display: inline-block; /* Hien thi tren cung mot hang */
        vertical-align: top;
        position: relative;
}
 
.nav .menu a, .nav li a {
    color: rgba(255, 255, 255, 0.75); /* Mau chu cua duong dan tren menu */
    display: inline-block; /* Hien thi cung hang va nhay xuong hang khi het cho */
    font-size: 13px;
    font-weight: bold; /* Dinh dang kieu chu in dam */
    padding: 20px;
    text-transform: uppercase; /* Luon luon xuat chu IN HOA ra man hinh */
}
 
.nav .menu a:hover, .nav li a:hover {
        text-decoration: underline /* Gach chan khi dua chuot ngang qua */
}
 
.nav ul ul {
    background-color: #CC3300;
    display: none;
    left: 0;
    min-width: 180px;
    position: absolute;
    top: 100%;
    z-index: 9999;
}
 
.nav li li {
        display: block;
}
 
.nav li.menu-item-has-children:hover > ul {
        display: block;
}
 
.nav li li:hover {
        background-color: #B72D00;
}
Vậy là bạn đã hoàn thành xong việc tạo menu 2 cấp cho WordPress, cũng tương tự như trên bạn có thể tùy biến để tạo ra menu 3 cấp hoặc nhiều hơn thế, tuy nhiên Sáu không khuyến khích bạn làm như vậy, nên để menu ở con số 2 cấp là được rồi, đừng lên cấp 3 hay cấp 4 làm gì :).

2. Tùy biến hiển thị xem bài viết

Đầu tiên bạn mở tập tin index.php của giao diện lên và xóa đi dòng bên dưới:
01

'Latest Posts', 'html5blank' ); ?>

Dòng này thật sự không cần thiết đối với một số bạn, tuy nhiên nếu bạn cảm thấy nên để lại thì khỏi cần xóa nhé. Tiếp tục, mở lại tập tin custom-style.css lên và sửa đoạn code sau:
01
02
03
main section h1 {
        display: none; /* An di dong chu Latest Posts */
}
Thành dòng code như bên dưới để hiện thị lại tiêu đề khi bạn vào xem bài viết hoặc trang.
01
02
03
main section h1 {
        display: block;
}
Bây giờ thì bạn đã xem được tiêu đề của bài viết rồi, nhưng mà bạn có thể tùy chỉnh thêm 1 chút để trang bài viết của bạn được bắt mắt hơn bằng cách thêm vào khung giới thiệu tác giả ngay bên dưới bài viết. Bạn mở tập tin single.php lên và tìm tới dòng:
01
edit_post_link();
Thêm vào bên dưới dòng đó đoạn code sau để lấy thông tin tác giả của bài viết:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class="author-wrap">
        
class="author-gravatar">
                echo get_avatar( get_the_author_meta( 'ID' ), 100 ); ?>
        
        
class="author-info">
                
class="vcard author author-title">
                        class="fn">
                                "_blank" class="ext-link" href="" title="Ghé thăm website của " rel="author external nofollow">'display_name'); ?>
                        
                
                
class="author-description">'description'); ?>
                
                            
  • class="first">
    •                                 "">Xem bài của 'user_login'); ?> class="meta-nav">→
                            
                            
  •                                 "_blank" class="ext-link" rel="external nofollow" href="" title="Ghé thăm trang chủ của ">Blog
                            
                            
  •                                 "_blank" class="ext-link" href="" title="Theo dõi trên Twitter" rel="external nofollow">Twitter
                            
                            
  •                                 "_blank" class="ext-link" href="" title="Theo dõi trên Facebook" rel="external nofollow">Facebook
                            
                            
  •                                 "_blank" class="ext-link" href="" title="Theo dõi trên Goolge Plus" rel="external nofollow">Google Plus
                            
                    
            
    Bây giờ thì bạn lại mở tập tin custom-style.css lên và cho vào những dòng định dạng sau:
    01
    02
    03
    04
    05
    06
    07
    08
    09
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    /* ==========================
            CSS cho box tac gia
       ========================== */
     
    .author-wrap {
        background: none repeat scroll 0 0 #E8E8E8;
        border: 1px solid #C6C6C6;
        display: block;
        margin: 10px 0 30px;
        overflow: hidden;
        padding: 10px;
    }
    .author-gravatar {
        border-radius: 50px;
        float: left;
        height: 60px;
        line-height: 1;
        margin: 0 25px 0 0;
        width: 60px;
    }
    .author-gravatar img {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 50%;
        height: 60px;
        padding: 2px;
        width: 60px;
    }
    .author-info {
        float: left;
        width: 86%;
    }
    .author-title {
        color: #555555;
        display: block;
        font-family: Raleway,sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 26px;
        margin: 0 0 10px;
    }
    .author-title a {
        color: #454545;
        font-size: 1.375rem;
        font-weight: 700;
    }
    .author-description {
        display: block;
    }
    .author-description p {
        margin: 0;
    }
    .author-wrap ul {
        list-style: none outside none;
        margin: 8px 0 0;
        overflow: hidden;
        padding: 0;
    }
    .author-wrap ul li {
        border-left: 1px solid #DFD5B5;
        display: inline-block;
        margin: 0;
        padding: 0 5px 0 7px;
    }
    .author-wrap ul li:first-child {
        border: medium none;
        padding: 0 0 0 1px;
    }
    .author-wrap ul li a {
        color: #4183C4;
        font-size: 16px;
    }
    .author-wrap ul li a:hover {
        color: #1B93DF;
        text-decoration: none;
    }
    Kết quả bạn sẽ có một box có thông tin về tác giả bài viết như hình bên dưới.
    Box tác giả cho bài viết
    Box tác giả cho bài viết
    Chú ý, trong box có vài thông tin liên quan tới tài khoản mạng xã hội, nếu như blog của bạn không có những thông tin này trong tài khoản người dùng thì đường link sẽ không được hiển thị.
    Bạn tiếp tục thêm vào tập tin custom-style.css những dòng code sau để định dạng cho khung bình luận và nội dung bình luận:
    01
    02
    03
    04
    05
    06
    07
    08
    09
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    .comments h2 {
        border-bottom: 1px solid #DFDFDF;
        margin-top: 10px;
        padding-bottom: 10px;
    }
    .comments ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    .comments ul ul {
        border-top: 1px solid #DFDFDF;
        margin-left: 0;
        margin-top: 10px;
        padding-left: 40px;
        padding-top: 10px;
    }
    .comments li {
        border-bottom: 1px solid #DFDFDF;
        margin-bottom: 10px;
    }
    .comments li:last-child {
            border: medium none;
    }
    .comments img.avatar {
        border: 1px solid #DDDDDD;
        border-radius: 50%;
        float: right;
        margin-left: 10px;
        padding: 2px;
    }
    .comments .fn a, .comments .fn {
        font-size: 25px;
        font-style: normal;
    }
    .comments .comment-meta a {
        color: #999999;
        font-style: italic;
    }
    .comment-form label {
        display: inline-block;
        margin-left: 10px;
        margin-top: 6px;
    }
    .comment-form input, .comment-form textarea {
        clear: both;
        display: block;
        float: left;
    }
    .comments .form-allowed-tags {
        clear: both;
    }
    .comments p {
        overflow: hidden;
    }
    .comment-respond {
        border-top: 1px solid #DFDFDF;
        margin-top: 20px;
    }
     
    .comments .required, .comments .comment-form-comment label {
            display: none;
    }

    3. Định dạng sidebar và những thẻ HTML mặc định

    Phần này thì bạn không cần phải chỉnh sửa gì nhiều trong code của giao diện, chủ yếu là thêm vào 1 số định dạng css để sidebar của bạn hiển thị được gọn hơn. Bạn mở tập tin custom-style.css lên và thêm vào những dòng css sau:
    01
    02
    03
    04
    05
    06
    07
    08
    09
    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
    35
    /* ============================
     *      Dinh dang CSS cho sidebar
     * ============================ */
     
    .search input[type="search"] {
        background: none repeat scroll 0 0 #F3F3F3;
        border: 1px solid #E3E3E3;
        padding: 5px;
        width: 95%;
    }
    .search .search-submit {
            display: none;
    }
    .sidebar-widget ul {
        padding-left: 25px;
        padding-right: 10px;
    }
    .sidebar-widget > div {
        background: none repeat scroll 0 0 #F9F9F9;
        border-color: #C4C4C4 #E8E8E8 #E8E8E8;
        border-style: solid;
        border-width: 4px 1px 1px;
        margin-bottom: 8px;
    }
     
    .sidebar-widget > div:first-child {
        margin-top: 8px;
    }
    .sidebar-widget > div h3 {
        background: none repeat scroll 0 0 #FFFFFF;
        border-bottom: 1px solid #CFCFCF;
        color: #444444;
        margin: 0;
        padding: 5px;
    }
    Phần cuối cùng Sáu muốn gửi đến các bạn trong bài viết này là định dạng css cho các thẻ HTML hay dùng trên blog. Điều này rất quan trọng nhé bạn, nên rà soát lại mọi thứ cho nó chuẩn trước khi đưa giao diện vào sử dụng. Bạn thêm vào đầu tập tin custom-style.css những dòng sau để định dạng cho các thẻ HTML còn lại mà từ đầu serie tới giờ bạn chưa làm.
    01
    02
    03
    04
    05
    06
    07
    08
    09
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    input.button {
        padding: 2px 10px;
    }
     
    hr {
        background: url("img/dotted-line.png") repeat scroll center top / 4px 4px rgba(0, 0, 0, 0);
        border: 0 none;
        height: 1px;
        margin: 0 0 24px;
    }
     
    input.file, input[type=text], textarea, input[type=password] {
        border: 2px solid #D4D0BA;
        font-family: inherit;
        padding: 5px;
    }
     
    select {
        padding: 3px 2px;
    }
    table {
        border-bottom: 1px solid #EDEDED;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
        line-height: 2;
        margin: 0 0 20px;
        width: 100%;
    }
    caption, th, td {
        font-weight: normal;
        text-align: left;
    }
    th {
        font-weight: bold;
        text-transform: uppercase;
    }
    td {
        border-top: 1px solid #EDEDED;
        padding: 6px 10px 6px 0;
    }
    pre {
        background: none repeat scroll 0 0 #F5F5F5;
        color: #666666;
        font-family: monospace;
        font-size: 14px;
        margin: 20px 0;
        overflow: auto;
        padding: 20px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    blockquote {
        font-size: 17px;
        font-style: italic;
        font-weight: normal;
        margin: 24px 40px;
    }
    Giao diện WordPress với HTML5 Blank
    Giao diện WordPress với HTML5 Blank

    Tóm lại

    Vậy là bạn đã hoàn thành xong phần 3 của serie hướng dẫn viết giao diện WordPress với Start Theme, qua bài viết này thì bạn đã có được 1 giao diện khá đơn giản nhưng không kém phần đẹp mắt, bạn cũng có thể tải tập tin Sáu đính kèm bên dưới về để tiện cho việc học tập.
    Tải giao diện: html5blank_part3.zip
    Trong bài viết kế tiếp Sáu sẽ kèm theo một video hướng dẫn để các bạn tiện bề theo dõi và học tập, nội dung của bài viết tới sẽ là hoàn tất giao diện và tạo phần cài đặt cho giao diện. Nhớ đón xem bạn nhé.

    0 nhận xét:

    Đăng nhận xét