[Theme] những bước cơ bản để tạo theme

Submitted by hoaiphan on Thu, 09/06/2012 - 09:12
Forums: 
Web với Drupal

 

Tiếp theo bài cấu trúc giao diện trước, 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 hay sites/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).

 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

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

 

đọc thêm tại đây,

 

 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. 

 

Download theme files

 

đây là file đã làm xong ở đây: mycooltheme.tar.tz.

 lược dịch từ http://www.apaddedcell.com/how-create-drupal-7-theme-scratch