Hướng dẫn cách tạo theme trong học lập trình web Drupal. Với rất nhiều mã nguồn mở như hiện nay thì việc
học lập trình web trở nên dễ dàng hơn rất nhiều. Với Drupal tôi thấy được rất nhiều tiện ích và tính năng nổi bật phù hợp với những thiết kế web về bán hàng hay tin tức. Sau đây là bài hướng dẫn cách tạo theme trong drupal rất dễ hiểu.
Bắt đầu tạo theme
1. tạo thư mục chứa theme
Đầu tiên bạn cần tạo 1 thư mục chứa theme của bạn. Thư mục
này nên đặt trong sites/all/themes haysites/yoursite/themes phụ thuộc vào bạn
muốn theme của mình sẽ được sử dụng trong tất cả các site của bạn hay chỉ một
site nào đấy. Hãy đặt tên duy nhất cho thư mục mô tả về theme của bạn.
Ngoài ra, cũng cần thêm 2
thư mục con là images và CSS để chứa các file tương ứng. Điều này giúp dễ
nhìn hơn cho người thiết kế. 2 thưc mục này nằm trong thư mục theme của bạn như
sau:
+ Theme name
+ css
+ images
2. tạo tập tin .info
từ drupal 6 về sau ,
tất cả các theme đều có tập tin .info , tập tin này chứa những thông tin cơ bản
về theme. Một số thông tin thì được sử dụng
trong trang quản trị. bên cạnh đó nó cũng có những thành phần đặc biệt trong phần
cấu hình cho theme (theme setting)
file này đơn giản chỉ là file text bình thường với phần mở rộng
là info. Tên của file nên trùng với tên theme của bạn. (ví dụ tên file là
yourtheme.info thì tên bên trông mô tả nên là "yourtheme")
Nội dung của file này nên có một số thành phần chính như sau
name - Tên của theme
description - mô tả
sơ lược về theme
core - phiên bản
drupal mà theme tương thích
engine - the
templating engine mà theme sử dụng (có thể là phptemplate)
regions - những vùng
trên giao diện mà ở bài trên đã phân tích. Tên vùng dành cho hệ thống hiểu sẽ
được viết trong 2 dấu ngoặc vuông "[ ]" (ví dụ như regions[sidebar_first]). phần này dùng để
chèn những vùng trong file template. Tên được đặt ở đây sẽ được sử dụng cho tên
các vùng trong phần bố trí block của
giao diện.
Trong drupal 7 phải
bao gồm vùng content để tùy chỉnh cho những
vũng khác mà bạn cầ. Và cũng nên sử dụng những tên chuẩn cho những vùng sidebar
như ("sidebar_first" va "sidebar_second"
trongDrupal 7). ở đây cũng nên enable
Drupal để thêm những vào trong <body> để chỉ định sidebar nào được sử dụng
(no-sidebars, sidebar-right, sidebar-left). Nha hang au tai ha noi
features - các thành
phần của theme. tính năng này có thể bật
hay tắt trong giao diện của admin ví dụ như chỉ định về tên của site, trạng
thái, logo.....) Chỉ những đặc tính list trong file info thì mới có tác dụng
trong trang admin và tùy biến trong template của trang .Nếu bạn muốn xóa tắt cả
các feature thì nên để trống ở đây.
Sử dụng tùy chỉnh những
cấu hình cho theme(features)
Một vài thành phần được chỉ định trong từ khóa feature có thể
không cần thiết cho theme của bạn. Mặc định, các block sẽ có tác dụng trong các
menu điều khiển chuẩn là ( main menu và secondaru menu. giao diện sẽ tự lấy tập
tin favicon.ico trong thư mục theme của bạn. nếu không thích, có thể viết code
cho phần hình của logo trong theme của bạn thay vì sử dụng qua giao diện upload
của admin.
Một số việc cần
làm :
1. viết lệnh cho một số biến trong template file và /hoặc
2. Cho phép người dùng tùy chỉnh chúng trong admin.
Trong phần logo và favicon thì nên thiết kế form cho upload
lên nếu bạn muốn dể dàng thay đổi.
Nhiều theme có rất nhiều thành phần tùy chỉnh (ví dụ
như theme Bartik và Garland ). Nếu thật sự thấy cần thiết
thì nên làm điều này
stylesheets - những tập tin CSS . cú pháp chính như sau (ví
dụ stylesheets[all][] hay
stylesheets[print][])
scripts - các file
script (javacript/js...)mà bạn sử dụng (chú ý drupal đã có sẳn jQuery, vì thế bạn
không cần thêm ở đây) nha hang ha au noi
sang trong
Các tập tin CSS và JS
được đặt trong thư mục tương ứng của theme thì càng tốt. Điều này giúp dễ quảnl
ý hơn đây là một ví dụ của file.info :
name = My Cool Theme
description = Custom theme for my site
core = 7.x
engine = phptemplate
regions[header] = Header
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
features[] = name
features[] = main_menu
3. Tìm hiểu thêm về
file template
giao diện của drupal dựa trên chính vào các file template,
có phần mở rộng là .tpl.php. Những file này chứa HTML và những biến giá trị để lấy những thông tin
từ drupal
Nếu muốn tạo 1 theme đơn giản, bạn thật sự không cần một
file template nào cả. theme chỉ cần có CSS cũng đã đủ. Drupal sẽ dùng template
chuẩn cho tất cả những code được viết ra.
Những mặt định gồm có cả những module được phát sinh của một thành phần
bất kỳ trong nội dung. Ví dụ , mặc định cho một node drupal sẽ lấy từ module node như là
node.tpl.php. HTML cho block cũng vậy sẽ được lấy từ module block trong
block.tpl.php
Bạn cũng chỉ cần tạo những
tập tin template cần thiết cho theme của bạn nếu muốn thay đổi so với mặc
định, những phần khác sẽ được tự động
đưa vào. Tuy nhiên chú ý không bao giờ thây đổi vào core của drupal. Chỉ nên sử
dụng những phương thức để overriding chuẩn
thôi.
để an toàn thì nên copy những tập tin theme từ module chuẩn
và thêm vào trong thư mục theme của mình.
đọc thêm về module theme developer.
Một tập tin template
quan trong mà sẽ làm việc nhiều là
page.tpl.php. tập tin này chứ code cho phần chính của trang . tập tin
này mặc định trong module system. Mặc định
thì tập tin này chứa rất nhiều code có thể không cần vì thế phần này sẽ có hướng
dẫn để viết từ đầu.
Ngoài ra trong drupal 7 cũng có tập tin html.tpl.php, nó bao
gồm nhiều cấu trúc của trang. (đó là những
phần như <head>, các tag mở đống <body> <html>). Thật sự
chúng ta không quan tâm nhiều đến file này vì nó không có nhiều code. Vì thế muốn
thay đổi gì thì nên tạo riêng ra 1 file trong thư mục theme của mình.
Bay giờ bắt đầu tìm hiểu về cấu trúc của page.tpl.php
3.1 tạo tập tin page.tpl.php
Tạo mới tập tin có
tên là page.tpl.php. Tập tin này chứa tất
cả các code cho phần body chính của theme. nó bao gồm:
1. Các lệnh HTML cho
theme(gồm cả các div và bất cứ thành phần chính của cấu trúc)
2. Định nghĩa các
vùng
3. Bient61 cho các
thành phần của nội dung (ví dụ như title(tiêu đề), các navigation tabs)
đây là một file HTML đơn gian
<div
id="header">
</div>
<div
id="wrapper">
<div
id="content">
</div>
<div
id="sidebar">
</div>
</div>
<div
id="footer">
</div>
3.2 Tạo các vùng
Các phần trong trang sẽ có thể được điều chỉnh thông qua
giao diện của block với tên đại diện là các vùng (region). Trong trang mẫu ở
trên bao gồm header, right sidebar,
content area, và footer. Chú ý các vùng này phải được mô tả trong file
.info.
Thật sự thì bạn không
cần định nghĩa các vùng này cũng được vì drupal sẽ tự thêm vào. Ở đây gồm có
header, highlighted, help, content, sidebar_first và sidebar_second.
Trong drupal 7, biến
gồm cả vùng được đưa vào sử dụng
trong Render Arrays. THật sự thi
bạn không cần hiểu hết tất cả thành phần này ngay bây giờ, bạn chỉ cần hiểu 1 vài thành phần cho điều chỉnh
ở đây thôi. Sẽ có một bài khác nói về vấn đề này.
Trong theme sẽ có những lúc các vùng không có nội dung, vì vậy
cần phải quản lý lúc có thì thể hiện còn nếu không có thì không thể hiện ra. Cần
thêm code để kiểm tra và thể hiện như sau
Đây là ví dụ cho việc
kiểm tra xem phần region footer có hay không có để thể hiện, trong file info có
định nghĩa region là footer vì thế sử dụng tên footer để kiểm tra thông qua biến
$page['footer']) (chú ý tên footer là tên phần máy hiểu(năm trong ngoăc vuông))
<?php if ($page['footer']): ?>
<?php print render($page['footer']);
?>
<?php endif; ?>
*)Thực hiện tiếp cho các phần con lại của theme
Ngoài ra, khi định nghĩa div trong giao diện thì nếu region
này không có thì bạn có muốn hiển thị ra hay không?
đây là file page.tpl.php đã định nghĩa xong:
<div id="header">
</div>
<div
id="wrapper">
<div
id="content">
<?php print render($page['content']); ?>
</div>
<?php
if ($page['sidebar_first']): ?>
<div
id="sidebar">
<?php
print render($page['sidebar_first']); ?>
</div>
<?php
endif; ?>
</div>
<div
id="footer">
<?php if
($page['footer']): ?>
<?php
print render($page['footer']); ?>
<?php
endif; ?>
</div>
3.3 Thêm biến cho những thành phần cơ bản của trang
Có rất nhiều phần sẽ
không tồn tại trong region. ở phần này sẽ hướng dẫn cách thêm các biến cho các
thành phần chính của trang, gồm tiêu đề trang và các navigation tabs. như mô tả
ở trên thì có rất nhiều biến trong drupal có tác dụng trong page.tpl.php. Phụ
thuộc vào những chức năng gì mình muốn trong theme. Ví dụ bạn có muốn
breadcrumbs. nếu muốn thì thêm biến $breadcrumbs vào:
Một số biến như sau :
$site_name
$logo (đây là biến được sử dụng thông qua chức năng upload của
trang admin và phần feature định nghĩa trong info)
$title (tiêu đề trang)
$main_menu
$secondary_menu
$breadcrumbs
thêm một số biến chỉ có trong phần quản trị của drupal
$tabs (menu used for edit/view admin menus, among other
things; often used by modules)
$messages
$action_links
và đây là một số biến rất thường dùng
$base_path (đường dẫn chính của site)
$front_page (đường dẫn chính đến trang chủ)
$directory (đường dẫn chính đến theme)
biến chèn vào thì sử
dụng hàm của Render API, giống như sau:
<?php print
render($tabs); ?>
Một chú ý cho phần menu và điều chỉnh cấu hình theme.
những menu điều khiển (navigation menu) như là main menu
và secondary menu thì mặc định cũng có
những biến tương ứng. Vì thế có thể chèn vào trong template dưới dạng code. Còn
nếu muốn tùy biến giao diện thì sau này sẽ tùy chỉnh trong block cũng được. Tùy
bạn. Vấn đề tương tự cho phần logo cũng vậy... có thể viết trực tiếp trong code
luôn hoặc tùy chỉnh trong chức năng của
giao diện admin
Nếu mục đích muốn giao diện có khả năng khả chuyển cho nhiều
site khác nhau thì vấn đề tùy chỉnh được của menu và logo là cần thiết. Còn nếu
thiết kế site cho khách hàng và không muốn họ can thiệp qua nhiều vào tính năng
này để thay đổi thì bạn nên cứng hóa trong code.
Một điểm quan trong nữa là những liên hết đến menu thì trả về
là một mảng. Khi viết vào trong template, cần phải tách từng thành phần thông
qua hàm theme() để thể hiện:
<?php if ($main_menu): ?>
<?php print
theme('links__system_main_menu', array('links' => $main_menu, 'attributes'
=> array('id' => 'main-menu'))); ?>
<?php endif; ?>
Ở trong bài này tôi chèn logo thông qua <img>, chứ không dùng biến $logo , Vì
tôi không muốn upload logo qua giao diện admin. vì cần tập trung vào sử dụng
vào các biến như $base_path, $directory, và $site_name.
chú ý trong drupal 7
thì có 2 biến$title_prefix và $title_suffix. Nhiều module có thể sử dụng nó,
nên chú ý khi sử dụng chúng trong theme.
Một điều nữa là mộtso61
biến được thể hiện ra giao diện thông qua hàm render(). Trong khi các thành phần khác lại thông qua print. bạn thấy khác biệt như thế nào? nếu có biến trong mảng (xem danh sách trong
page.tpl.php reference page) nên dùng
render(). Ngoài ra sử dụng hàm print (<?php print $variable; ?>). nếu gặp
trục trặc hay xem file mặc định
page.tpl.php để xem chúng sử dụng như thế nào.
đây là tâp tin
page.tpl.php của tôi trong bài hướng dẫn này :
<div
id="wrapper">
<div id="header">
<a href="<?php print $front_page;?>">
<img src="/<?php print $directory;?>/images/logo.png"
alt="<?php print $site_name;?>" height="80"
width="150" />
</a>
<?php if ($main_menu): ?>
<?php print theme('links', $main_menu); ?>
<?php endif; ?>
</div>
<div
id="content">
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1><?php print $title;
?></h1><?php endif; ?>
<?php print render($title_suffix); ?>
<?php print render($messages); ?>
<?php if ($tabs): ?><div
class="tabs"><?php print render($tabs);
?></div><?php endif; ?>
<?php if ($action_links): ?><ul
class="action-links"><?php print render($action_links);
?></ul><?php endif; ?>
<?php print render($page['content']); ?>
</div>
<?php if ($page['sidebar_first']): ?>
<div
id="sidebar">
<?php print render($page['sidebar_first']); ?>
</div>
<?php endif; ?>
<div
id="footer">
<?php if ($page['footer']): ?>
<?php print render($page['footer']); ?>
<?php endif; ?>
</div>
</div>
4. xây dựng CSS
Bước này thì tôi
không cần nhắc vì bạn đã có kinh nghiệm về CSS...
5. thử nghiệm nào!
Bây giờ thì trang mẫu
đã được tạo, vào trong phần appearance để enable nó lên. sau đó vào xóa cache
trong Site Configuration > Performance
6. Create your screenshot
Tạo một hình ảnh cho
phần screenshot với kích cở là 150x90, đặt nó vào trong thư
mục theme của bạn. tên nên là screenshot.png.
Vậy là chúng ta đã hoàn thành xong những bước để tạo theme trong Drupal rồi. Những tài liệu lập trình web là vô tận, hãy tận dụng 1 cách tốt nhất để tạo nên những trang web có nét riêng của chính mình.
>>> Xem thêm: