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

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

bởi Thạch Phạm
20 bình luận 5904 views
Khuyến mãi hosting

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:

<!-- nav -->
<nav class="nav" role="navigation">
	<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->

Đâ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:

<!-- nav -->
<nav class="nav" role="navigation">
	<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->

<!-- wrapper -->
<div 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:

<!-- nav -->
<nav class="nav" role="navigation">
<div class="page-width">
	<?php html5blank_nav(); ?>
</div>
</nav>
<!-- /nav -->

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:

.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.

.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:

.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:

.nav .menu li {
	display: inline; /* Hien thi tren cung mot hang */
}

Thay nguyên đoạn code css sau:

.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:

.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:

<h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>

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:

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.

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:

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:

<div class="author-wrap">
	<div class="author-gravatar">
		<?php echo get_avatar( get_the_author_meta( 'ID' ), 100 ); ?>
	</div>
	<div class="author-info">
		<div class="vcard author author-title">
			<span class="fn">
				<a target="_blank" class="ext-link" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm website của <?php the_author_meta('user_login'); ?>" rel="author external nofollow"><?php the_author_meta('display_name'); ?></a>
			</span>
		</div>
		<div class="author-description"><?php the_author_meta('description'); ?></div>
		<ul>
			<li class="first">
				<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">Xem bài của <?php the_author_meta('user_login'); ?> <span class="meta-nav">→</span></a>
			</li>
			<li>
				<a target="_blank" class="ext-link" rel="external nofollow" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm trang chủ của <?php the_author_meta('user_login'); ?>">Blog</a>
			</li>
			<li>
				<a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'twitter' ); ?>" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Twitter" rel="external nofollow">Twitter</a>
			</li>
			<li>
				<a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'facebook' ); ?>" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Facebook" rel="external nofollow">Facebook</a>
			</li>
			<li>
				<a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'googleplus' ); ?>" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Goolge Plus" rel="external nofollow">Google Plus</a>
			</li>
		</ul>
	</div>
</div>

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:

/* ==========================
	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:

.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:

/* ============================
 *	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.

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é.

20 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
20 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Khanh Duy

Cảm ơn anh Thạch Phạm đã có những hướng dẫn rất chuyen sâu. nhưng em không biết tí tẹo gì về code nên không ứng dụng được. Hiện tại em đang tập làm một website nho nhỏ, sử dụng theme Frontier, nhưng không biết làm thế nào để căn giữa Menu chính và nội dung trong Footer của theme. Mong anh và mọi người hướng dẫn Custom CSS giúp em căn giữa hai đối tượng này nhé.
Cảm ơn anh nhiều.

king

Ở đây là tùy chỉnh trên Star Theme. Vậy các theme khác chỉnh như vậy được không bạn?

1Ty40

Bạn ơi giúp mình với. Mình có sử dụng theme có sẵn, sau đó mình chỉnh sửa để thành giao diện web của mình. Khi mình vào mục Menu, mình có xóa hết các menu có sẵn và bổ sung menu theo ý mình. Nhưng khi xem thử thì không hiện tên menu gì cả (vẫn có thanh chứa menu màu xanh, thuộc phần header). Mình tìm cách sửa mãi mà không được, kiến thức IT của mình cũng làng nhàng. Mong bạn giúp đỡ. Cảm ơn bạn nhiều. Trang web của mình: dautu-chungkhoan.com

1Ty40

Mình có sử dụng theme có sẵn. Lúc đang chỉnh sửa web. mình có vào mục Menu sau đó xóa hết các menu có sẵn. Sau đó mình thêm menu mới vào, nhưng sau khi thêm thì menu không hiện thị trên Thanh Menu (nằm ngang, trên đầu Web). Giúp mình với, mình IT không giỏi, toàn làm mò mẫn, tìm mãi không biết cách sửa.

kiu12

Anh Thạch Phạm cho em hỏi là làm thế nào để tìm được file mã nguồn template để chỉnh sửa nhỉ?

Tong Lieu

bạn cho mình hỏi 1 theme đã có sẵn slideshow mình muốn sửa ảnh theo í của mình thì vào đâu để thay đổi slide mẫu được nhỉ

minh công

phần bảng tin e muốn hiển thị bài biết xem nhiều nhất hoặc bài viết ngẫu nhiên, hoặc của 1 cagetories nào đấy thì làm thế nào ạ? chứ nó toàn hiển thị bài viết mới nhất thôi ạ.

nam

voi theme chi cho 2 menu thi lam sao de them menu moi duoc ak?

Phạm Gia Bắc

bạn ơi, mình muốn sửa css, chọn phần tử rồi click chuột phải chọn kiểm tra. nó k hiện thư mục cụ thể mà hiện Index.php. Vậy sửa css cho phần tử đó ntn ?

Nguyễn văn liêm

Chào bạn mình muốn nhờ bên bạn chỉnh sửa lại site của mình hk biết bên bạn có dịch vụ này không ? có thì liên hệ với mình nhé

Kim Trinh

Anh cho em hỏi, muốn menu nó đổi màu khi di chuột qua thì làm thế nào ạ.

Kim Trinh

Em cảm ơn anh!

Kim Trinh

#secondary-nav .sf-menu li li a:hover {
color: #333;
background: #007bb6;
}
Em đã sửa trong file style.css thế này nhưng nó không thay đổi gì, anh xem giúp em với ạ!

Quốc Vũ

Sửa form bình luận giống như của thạch phạm thì làm như thế nào nhỉ?

20
0
Would love your thoughts, please comment.x
()
x