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