Cách tạo một theme đơn giản cho ứng dụng WordPress!
Để bắt đầu xây dựng theme của bạn, đầu tiên cần tạo một thư mục con nằm trong thư mục wp-content/themes trong thư mục WordPress của bạn. Trong bài hướng dẫn này, chúng ta sẽ đặt thu mục đó là “tutorial_theme”. Tên của thư mục nên tương ứng với tên của them mà bạn tạo. Để làm điều này bạn có thể dụng công cụ FPT client hoặc File Manager trong cPanel của máy chủ của bạn.
Trước khi bạn bắt đầu tạo theme, bạn nên có ý tưởng về cách bố trí giao diện website của bạn. Trong bài này chúng ta sẽ xây dựng một thêm bao gồm các phần header, sidebar, vùng nội dung (Main Area) và phần footer như bên dưới:
Để làm điều này chúng ta sẽ tạo các file vào trong thư mục tutorial_theme:
- header.php – file sẽ chứa code của phần header của theme.
- index.php – đây là file chính của theme. Nó sẽ chứa code của phần Main Ảea và sẽ chỉ định các file khác được gắn vào.
- sidebar.php – đây là file chứa thông tin về slidebar.
- footer.php – tập tin này xử lý phần footer của bạn.
- style.css – là file chứa các định dạng cho theme mới này.
Bạn cũng có thể tạo những file này ở máy của bạn cùng với sử dụng một trình soạn thảo đơn giản (ví dụ như notepad) và upload chúng theo giao thức FPT hoặc sử dụng công cụ File Manager trọng cPanel để tạo trực tiếp các file trên tài khoản máy chủ của bạn.
Bây giờ chúng ta sẽ bắt đầu với nội dung của mỗi file:
File header.php
Trong file này bạn nên add các dòng code sau:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
Về cơ bản đây là code HTML với một dòng code phph và một hàm chuẩn của WordPress. Trong file này bạn có thể chỉ định các thẻ meta như tiêu đề website của bạn, các thẻ meta môt vả và các từ khoá (keywords) cho trang của bạn.
Sau phần title chúng ta add:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
để báo cho WordPress nạp file style.css. Nó thực hiện định dạng cho website của bạn.
Câu lệnh:
<?php bloginfo('stylesheet_url'); ?>
là cách gọi một hàm trong WordPress để nap file stylesheet.
Kế tiếp chúng ta thêm thẻ “div” với thuộc tính class = wrapper, nó sẽ chứa định dạng cho phần giao diện chính của website, class này chúng ta có thể chỉnh sửa trong file style.css.
Sau đó chúng ta thêm thẻ “div” với class “header” được đặc tả trong file stylesheet.
File index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Code bắt đầu bời dòng:
<?php get_header(); ?>
thực hiện việc nhúng file header.php vào code của trang chính. Nó sử dụng hàm của WordPress để làm việc này. Chúng ta sẽ diễn giải chi tiết ở phần sau. Rồi chúng ta đặt dòng “Main Area” để chỉ rõ đây là phần nội dung sẽ được hiển thị ở đây.
Các dòng tiếp theo bao gommf các dòng code PHP và các hàm chuẩn của WordPress. Dòng code này kiể tra khi có một bài mới được đăng lên qua trang quản trị của WordPress thì sẽ hiển thị bài các bài đó.
Kế tiếp, chúng ta nhúng file sidebar.php với dòng
<?php get_sidebar(); ?>
Trong file này bạn có thể hiển thị các bài post phân theo chủng loại hoặc theo nơi lưu trữ, v.v.
Sau dòng này, chúng ta sẽ inser một thẻ “div” trống để ngăn cách phần “Main Area” và phần Sidebar với phần footer.
Cuối cùng chúng ta thêm một dòng cuối
<?php get_footer(); ?>
mà sẽ nhúng file footer.php vào trang của bạn.
Trong file sidebar.php chúng ta sẽ thêm các dòng code sau:
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Trong file này chúng ta sủ dụng các hàm bên trong WordPress để thiển thị các bài đăng theo các phân loại bài (categories) và nơi lưu trữ (archives). Hàm WordPress sẽ trả về danh sách các bài đã được sắp xếp theo tên và được đánh đầu mục (thẻ <ul>).
Bạn nên thêm các dòng này vào file footer.php:
<div id="footer">
<h1>FOOTER</h1>
</div> </div>
</body>
</html>
Với dùng code này, chung ta chỉ làm một việc thêm một nhãn FOOTER. Bạn cũng có thể thêm các dòng code khác như các liên kết, thông tin hỗ trợ hay thông tin về bản quyền, v.v.
File style.css
Thêm các dòng sau vào file style.css:
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; } #content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; } #delimiter { clear: both; } #footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
Đây là file css đơn giản thiết lập các định dạng cho theme của bạn. Những dòng này thiết lập màu nền cho trang của bạn và các phần xung quanh cửa số chính và đường viền cho trang..
Lúc này bạn có thể nhìn thấy giao diện của bạn như sau:
Như chúng tôi đã đề cập trước, các hàm bên trong WordPress thường được sử dụng trong code của theme. Bạn có thể xem toàn bộ các hàm tại website của WordPress để có thêm thông tin về các hàm này.
Từ đây bạn có thể chỉnh sửa file CSS, thêm ảnh, các hiệu ứng và các nội dung khác tới them của bạn để đạt được giao diện như bạn mong muốn.
Chúc các bạn thành công!
