Hướng dẫn tạo themes theo ý muốn trong Drupal

Các file cơ bản của themes

Khi chúng ta không hài lòng về 1 themes vừa enable, và muốn chỉnh sửa, chúng ta sẽ phải can thiệp 1 số file. tùy theo yêu cầu của chúng ta về giao diện và bố cục mà chúng ta sẽ thay đổi nhiều hay ít. về cơ bản chúng bao gồm:

template.php
theme-settings.php
html.tpl.php
node.tpl.php
themes_name.info
page.tpl.php

template.php: File này khai báo các hàm sẽ được dùng trong themes. Chúng ta có thể bỏ qua nếu xem mà không hiểu gì hết. vì 99% chúng ta sẽ không can thiệp vào file này.

theme-settings.php: File này khai báo các tùy chỉnh, config của theme. Chúng ta có thể bỏ qua nếu xem mà không hiểu gì hết. vì 99% chúng ta sẽ không can thiệp vào file này.

html.tpl.php: File này hiển thị các thông tin cơ bản của website. Những gì bạn thay đổi trong đây sẽ ảnh hưởng hết tất cả các trang trong Drupal.

node.tpl.php: File này hiển thị các thông tin của tất cả các node trong drupal. Đa phần chúng ta cũng ít khi can thiệp vào file này. Trường hợp chúng ta cần tùy chỉnh, cấu hình, bố cục 1 content type nào đó thì ta sẽ tạo ra 1 file node--machine_name.tpl.php, sau đó copy toàn bộ thông tin của node.tpl.php vào file vừa tạo, và sau đó thay đổi file này thế nào thì tùy ý chúng ta. Khi đó nó chỉ ảnh hưởng đến 1 content type duy nhất với machine_name đã khai báo khi đặt tên file.

themes_name.info: File này hiển thị các thông tin chính của themes, thường dùng để khai báo các files css, js, regions mà mặc định themes không đáp ứng đủ cho chúng ta. Khi tùy chỉnh themes, chúng ta thường có can thiệp vào file info này, chủ yếu là khai báo thêm các file để cho drupal hiểu.

page.tpl.php: File này hiển thị cấu trúc chính của giao diện website trong Drupal, rất quan trọng giống như node.tpl.php hiển thị cấu trúc của node. Thông thường chúng ta có can thiệp vào file này vì giao diện, cấu trúc, bố cục của themes ta enable thường không đáp ứng 100% yêu cầu của chúng ta.

Bài học này tập trung hướng dẫn chúng ta những can thiệp cơ bản vào 2 file themes_name.info và page.tpl.php

Themes_name.info

Về cơ bản, khi làm việc với themes, chúng ta thường khai báo thêm 1 số file *.css và *.js để làm việc. Lý do ư? vì themes mặc định không đáp ứng đủ đối với yêu cầu khắc khe của chúng ta. Đặc biệt là việc phải thêm các regions vào.

Để khai báo 1 file css, js mới, ta chỉ cần thêm 1 dòng vào

stylesheets[all][] = css/custome_name.css
scripts[] = js/custome_name.js

custome_name là tên của file css do mình đặt. khi khai báo xong, tất cả những đoạn code css hay javascript/jquery ta chỉ nên thực hiện trên file này để sau này dễ sửa, dễ thay đổi.

Lưu ý: 1. [all] cho ta thấy file css này load ở tất cả các trang của website. Trong tương lai, có thể chúng ta muốn những file này load ở những khu vực xác định để tăng tối đa, tối ưu hết mức cho performance của website.
2. css/ hay js/ chứng tỏ file ta đặt và khai báo phải nằm trong thư mục css hay js của themes.

Ngoài ra còn có regions cũng là thứ mà chúng ta thường khai báo và thêm vào website. Cách thêm region thì cũng đơn giản như khai báo thêm file js và css

regions[region_machine_name]         = Region Label

region_machine_name là cực kỳ quan trọng và không được phép trùng.
Region Label là tiêu đề, nhãn của region.

Khi khai báo xong 1 khu vực như trên thì ta sẽ được phép sử dụng nó. còn sử dụng nó như thế nào thì ta chỉ việc in ra trong file page hay file node thôi. Xem thêm phần page.tpl.php ngay bên dưới bài học này để biết cách sử dụng 1 regions đã khai báo.

Page.tpl.php

File này là file thể hiện cấu trúc chính của website. Cực kỳ quan trọng và là file mà chúng ta thường xuyên tương tác khi làm mới 1 giao diện. Ví dụ: chúng ta muốn Logo, Site name, Site slogan, Main menu, Footer, sidebar left, sidebar right, Regions ..... đặt ở đâu, hiển thị thế nào thì đều thay đổi và tùy chỉnh ở file page.tpl.php này.

Sử dụng file page.tpl.php (và cả node.tpl.php) như thế nào tùy thuộc vào giao diện của từng dự án chúng ta làm nên mình không thể nói nhiều ở mục này. Khi bạn tương tác quen với Drupal rồi tự khắc sẽ biết can thiệp. ở đây mình chỉ các bạn vấn đề quan trọng nhất là đưa regions đã khai báo ở file themes_name.info vào page.tpl.php này (và cả node.tpl.php).

<?php print render($page['region_machine_name']); ?>

Đoạn code trên là để in ra regions mà mình đã khai báo ở file themes_name.info, bạn đặt machine name là gì thì giờ chỉ cần đưa đúng machine name đó vào. Sau khi xong việc, bạn đã có 1 Regions đặt nơi bạn muốn, thường thì phải kết hợp css nữa để làm đẹp block này.

Để dễ ví dụ cho phần này, chúng ta thử xem 1 ví dụ cụ thể và cũng có tác dụng thực tế như sau:

Khách hàng muốn chúng ta làm cho họ 1 block để chứa tấm ảnh Quảng cáo, nằm bên trái của website. Vậy chúng ta phải làm thế nào??? Xem nhé, ta làm các bước sau:

1. Khai báo 1 regions quảng cáo. Mục đích là để ta quăng block chứa tấm ảnh vào đó. Đương nhiên là khai báo trong file themes_name.info.

regions[quang_cao]         = Quảng Cáo

2. Để sử dụng region Quảng Cáo vừa khai báo ở trên, ta vào file page.tpl.php để in nó ra.

<div class="quang-cao"> <?php print render($page['quang_cao']); ?> </div>

lệnh print đơn giản để in region quang_cao này trong file page.tpl.php. Tùy theo yêu cầu của ta mà đặt region này ở đâu. nhưng đối với ví dụ này thì block quảng cáo đặt ở cuối cùng của file là tốt nhất. vì ta còn phải sử dụng css để đưa nó về bên trái của màn hình.

3. Save lại và clear caches. vào admin/structure/block để thấy kết quả.

Theo hình ảnh trên, sau 3 bước, ta đã tạo ra 1 region Quảng cáo. Từ đây ta có thể dễ dàng quăng block vào đó được rồi. Đừng quên thêm lệnh css như sau để block này hiển thị đúng vị trí nhé:

.region-quang-cao {
    position:fixed;
    left:0;
    top:100px;
    width:180px;
}

Kết quả cuối cùng sẽ như tấm ảnh sau. bạn có thể kéo scroll chuột lên xuống, lệnh fixed của css giúp cho block vẫn ở vị trí đó của màn hình.

Tổng kết

Khi làm 1 dự án website, tùy thuộc vào giao diện như thế nào mà chúng ta sẽ phải can thiệp bao nhiêu file trong drupal. Nhưng bạn sẽ phải luôn đụng đến file .info và file page.tpl.php

Và quan trọng nhất: Bạn phải thực hiện 1 số lệnh css để giao diện website theo ý bạn.

Đến đây là bài học cuối cùng về các vấn đề cơ bản của Drupal, các định nghĩa cơ bản của drupal 7. Các bài tiếp theo là loạt bài bạn xem không cần thứ tự, giúp bạn làm 1 website đa năng, hoàn chỉnh, nhiều chức năng.

Về cơ bản, để làm được 1 website bằng drupal, bạn chỉ cần hiểu taxonomy, content type, menu, block và view là được. Bạn tiếp nhận yêu cầu của khách hàng như: "Tôi muốn website mình thế này, thế kia, phải như vậy..." Bạn nghe + hiểu xong thì hãy hiện thực yêu cầu khách hàng bằng 5 vấn đề trên (có thể có thêm permission). Khi hiện thực xong hết rồi, vấn đề còn lại của bạn là tập trung làm giao diện. Thế là xong 1 dự án.