Bài này sẽ hướng dẫn từng bước xây dựng 1 theme
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 themedescription - mô tả sơ lược về themecore - phiên bản drupal mà theme tương thíchengine - 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).
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)
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
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
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
stylesheets[print][] = css/print.css
features[] = name
features[] = main_menu
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>
<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="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>
<?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. Download theme files
đây là file đã làm xong ở đây: mycooltheme.tar.tz.
Không có nhận xét nào:
Đăng nhận xét