Jun
2
2011

Thiết kế theme WP phần 5: trích xuất template file và viết header.php

Trong phần 4, chúng ta đã nói về 1 template với đầy đủ thông tin cũng như NhanWeb đã gửi cho các bạn một file template mẫu mà chúng ta sẽ sử dụng để trích xuất ra theme. Dựa vào template này hôm nay chúng ta sẽ đưa dữ liệu vào tạo nên theme nhé.

Đưa file style.css, thư mục hình ảnh của template vào hệ thống template file

Trước khi trình bày giao diện đã viết, NhanWeb sẽ đưa định dạng CSS đã viết vào template file style.css của giao diện như sau:

/*
Theme Name: NhanWeb
Theme URI: http://nhanweb.com/
Description: Theme Demo cho bai viet thiet ke giao dien WordPress
Author: Nguyen Duy Nhan
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Tags: nhanweb, css, thiet ke giao dien
*/
/* CSS Document */
body{
	background:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}
.wrap{
	width:960px;
	background:#FFF;
	padding:0;
	margin: 0 auto;
}
#header{
	height:100px;
}
#menu{
	background:url(images/menu_bg.gif) repeat-x;
	height:32px;
	line-height:32px;
	color:#FFF;
	text-transform:uppercase;
}
#main{
	padding:0;
	margin:0;
}
#content{
	float:left;
	width:627px;
	min-height:400px;
	margin: 10px 10px 10px 0;
}
#slider{
	float:left;
	width:300px;
	margin: 10px 0px 10px 10px;
	border: 0 0 1px 1px solid #999;
      -moz-box-shadow: -5px 0px 5px #ccc;
	  -webkit-box-shadow: -5px 0px 5px #ccc;
	  box-shadow:-5px 5px 5px #ccc;
	padding:5px;
}
.clear_both{
	clear:both;
}
#footer{
	height:50px;
	color:#333;
	line-height:50px;
	padding-left:10px;
	background:#c2f3e1;
}

Đoạn này tương đối dễ hiểu vì ta sẽ copy tất cả vào, đồng thời giữ nguyên định dạng thư mục và file hình ảnh đi kèm.

Trích xuất template file

Việc tiếp theo trong qui trình thiết kế của mình, NhanWeb sẽ trích xuất giao diện của mình ra thành 4 phần như đã nói ở phần 2. Từng phần ấy sẽ được thiết kế riêng để xử lý những công việc cụ thể.

Thành phần giao diện bao gồm:

header.php
index.php
sidebar.php
footer.php

Code chi tiết của từng phần:

header.php

Header.php

Index.php

index.php

sidebar.php

footer.php

Đừng hỏi mình tại sao không để code để các bạn copy cho nhanh nhé, mình muốn các bạn động tay động chân một tí cho dễ nhớ. Có bắt tay vào làm mới nhớ được các bạn ah.

Kết nối các template file lại với nhau

Để kết nối các template file lại với nhau bạn sử dụng các hàm get_header(), get_sidebar() và get_footer() như mình đã nói sơ qua ở phần 2.

Bạn mở file index.php và bổ sung các đoạn code cần thiết như sau:

<?php

	/**
	 * The main template file.
	 *
	 */

	get_header();
?>
<div id="content">Content</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Nếu bạn chưa quen với cách sử dụng các hàm get_header() hay get_footer()… thì bạn có thể tìm hiểu thêm ở phần 2 nhé. Giờ chúng ta tiến hành chạy thử và kiểm chứng kết quả đã.

Các thành phần template file đã kết nối lại với nhau

Như bạn đã thấy, chúng ta đã kết nối được cái file template lại với nhau nhưng phần CSS chưa được kết nối để hiện giao diện chuẩn. Không sao, chúng ta sẽ tiến hành làm việc với file header.php ngay sau đây.

Làm việc với file header.php

Bạn mở file header và bổ sung, chỉnh sửa các dòng code như dưới đây:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );
	?>
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head();?>
</head>

<body>
    <div class="wrap">
        <div id="header">
            <img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="300" height="100" alt="<?php echo bloginfo( 'name' );?>" />
        </div>
        <div id="menu">
           Menu here
        </div>
        <div id="main">

Bạn sẽ thấy file header.php của chúng ta có vài chỗ đổi khác. Chỗ đổi khác ở đây phần lớn mình muốn nói đến đó là sự xuất hiện của một số hàm được sử dụng trong hệ thống của wordpress. Các hàm đó là:

bloginfo(): được sử dụng để lấy ra 1 số giá trị được thiết lập trước đó cho hệ thống WordPress đồng thời xuất dữ liệu đó ra màn hình (ngược lại chúng ta có hàm get_bloginfo() cũng thực hiện công việc tương tự nhưng không xuất ra màn hình). Chi tiết các giá trị có thể lấy ra bạn xem thêm tại đường link dẫn đến document của nó.
wp_title($sep, $echo, $seplocation): hàm này trả về tiêu đề của mỗi trang. Tương ứng các biến đưa vào là $sep: ký tự đứng trước hoặc sau title khi xuất ra, $echo giá trị true hoặc false cho biết bạn muốn xuất ra màn hình hay muốn lưu trữ nó dạng biến để xử lý, $seplocation giúp xác định vị trí hiện của ký tự $sep là bên trái hay bên phải title.
wp head(): hàm này được khai báo bổ sung giúp cho các plugin dễ dàng chèn thêm các tag riêng của nó vào phần head của trang. Bạn chỉ việc khai báo như vậy rồi để đó, khi có plugin nào đó cần sử dụng nó sẽ tự gọi để thực hiện action riêng của nó.

Kiểm tra lại

Giao diện NhanWeb

Coi như là ổn cho việc đưa 1 giao diện từ bên ngoài vào. Trong phần tiếp theo của chuỗi bài viết, NhanWeb sẽ hướng dẫn các bạn lập trình từng phần của nội dung chi tiết cũng như cách chúng ta lập trình giao diện WordPress.

Những phần tiếp theo sẽ bao gồm một chút kiến thức php căn bản. Cho nên bạn nào còn yếu hoặc chưa nắm được PHP thì giành thời gian xem lại nhé.

Bài có liên quan

Tags: design wordpress theme, theme, thiết kế theme, thiet ke web, wordpress

Bài viết liên quan

Tác giả: Nguyễn Duy Nhân

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn.

6 bình luận + Bình luận ngay

duyhen June 3, 2011 at 10:24 am

bác làm gì mà viết lẹ quá vậy, em chưa có thời gian nghiên cứu
nam June 4, 2011 at 8:03 pm

anh nhân ơi.sao forum của anh e vào không được nữa ạ. forum vnwebmaster ý ạ.
- Nguyễn Duy Nhân June 4, 2011 at 8:16 pm
  
  Vẫn truy cập bình thường mà bạn ?
KKfashion July 20, 2011 at 10:46 am

Bài viết hay đó bạn. Gán tiếp tục phát huy nhé. Mình rất thích bài của bạn
L.A.N July 25, 2011 at 3:28 pm

Nếu đã có sẵn theme và muốn thêm header image thì sao hả bạn, bạn có thể hướng dần mình không?
Dung Le October 1, 2011 at 1:52 am

anh Nhân ơi cho em hỏi một chút. Theme của em mới làm muốn có phần Theme_Options để chỉnh sửa thẻ và làm sao hả anh? Vì em muốn cập nhật động cái này.