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é.
Phụ mục
Đư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:
[css] /*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;
}
[/css]
Đ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
sidebar.php
footer.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] <?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:
[php] <!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">
[/php]
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ác làm gì mà viết lẹ quá vậy, em chưa có thời gian nghiên cứu :D
anh nhân ơi.sao forum của anh e vào không được nữa ạ. forum vnwebmaster ý ạ.
Vẫn truy cập bình thường mà bạn ?
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
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?
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.
Anh Nhân cho em hỏi. Dòng này ý nghĩa như thế nào và có tác dụng gì vậy?
global $page, $paged;
Đây là sử dụng các biến bên ngoài của hệ thống. Thông thường các biến bên trong hàm không liên quan gì đến hệ thống biến bên ngoài, khai báo global cho phép sử dụng các biến bên ngoài vào bên trong hàm.
Anh Nhan da viet nhieu bai rat cong phu va huu ich
nhung em la nguoi moi bat dau vao WordPress nen doc co nhieu dieu chua hieu duoc.
Mong anh cho them chi tiet de de hieu va de hanh hon
(anh thong cam, em dung Opera Browser khong hieu sao viet Unicod bo dau khong duoc)
Da ta
Chỗ nào không hiểu bạn cứ comment lại để mình giải thích thêm. Cũng là một cách để mình rút kinh nghiệm cho các bài viết sau. Thanks.
Ở file css mình có để đường dẫn hình images/bg.png, lúc chạy không nhận được hình này.
Mình phải lấy đường dẫn chính xác thì nó mới load được, có cách nào để lấy đường dẫn tương đối không chứ nếu không thì qua mỗi domain mình lại phải vào file css chỉnh lại từng đường dẫn?