Những bước cơ bản để tạo theme trong Drupal. Hiện
nay, việc học thiết kế web đã trở lên đơn giản hơn rất nhiều với các phần mềm hỗ
trợ, và các mã nguồn có sẵn: Worpress hay Drupal, Joomla… Qua thời gian làm việc
trên mã nguồn Drupal, tôi nhận thấy tài liệu Drupal là mã nguồn tuyệt với cho những
trang web bán hàng. Vì tính mềm dẻo trong thiết kế và tính bảo mật cao. Hôm
nay, tôi muốn chia sẻ với các bạn bài viết tài liệu drupal về cách cơ bản để tạo
theme trong Drupal 7. Giúp các bạn hiểu rõ hơn về cách thức sử dụng theme trong
khi thiết kế web với Drupal 7.
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, ađặt nó vào trong thư
mục theme của bạn. tên nên làscreenshot.png.
Hy vọng bài chia sẻ sẽ giúp cho các bạn
cảm thấy tự tin hơn khi muốn bỗung thêm kiến thức lập trình web. Chúc các bạn
thành công!
Bài tham khảo:
Không có nhận xét nào:
Đăng nhận xét