[D7] Tạo dựng một theme của riêng mình - Remake a drupal custom theme

Post Reply
tthlan
Quản trị viên
Posts: 76
Joined: Tue Aug 23, 2016 8:13 am

[D7] Tạo dựng một theme của riêng mình - Remake a drupal custom theme

Post by tthlan »

Folder những Theme mặc định có sẵn trong D7 nằm ở folder_cài_đặt\themes

Trong hướng dẫn này sẽ dùng theme bartik để custom lại dùng cho project của mình.

Image

Copy toàn bộ folder bartik vào folder_cài_đặt\sites\all\themes, đặt lại name, ở đây là craftin

Sau khi đúng như hình bên dưới ...

Vào D7 admin site > Appreance:

- Ở phần 'Disable Themes', chọn 'Enable and set default' theme craftin, để craftine sẽ là default theme (front side);

- Và administrator theme cứ để là theme nào đó có trong hệ thống, ở đây là Bartik.

Image
tthlan
Quản trị viên
Posts: 76
Joined: Tue Aug 23, 2016 8:13 am

Re: [D7] Tạo dựng một theme của riêng mình - Remake a drupal custom theme

Post by tthlan »

Trước khi bắt tay chỉnh sửa gì đó, tìm hiểu sơ vài file có trong folder theme

file '.info' : thông tin có cấu trúc giống như info file của Drupal

Tuy nhiên sẽ có nhiều dòng khai báo các vùng regions (trong .info) tương ứng mà theme sẽ định nghĩa và thể hiện các regions theo đúng name (trong page.tpl.php) này từ khi system dùng khi theme.

Ở đây craftin chỉ khai báo và dùng

regions[header] = Header
regions[nav] = Navigation
regions[breadcrumb] = Breadcrumb
regions[sidebar_first] = First sidebar

regions[content] = Content
regions[under] = Under_Content
regions[history] = History

regions[footer] = Footer

Có thể định nghĩa thêm hoặc xóa bớt, thứ tự rất quan trọng tương ứng với thứ tự display trên Dural Admin Site: admin/structure/block, hãy đối chiếu với hình bên dưới

Image

screenshot.png : Hình ảnh đại diện hiển thị trên Appearance trong Drupal Admin Side.

template.php : khuyến cáo ko nên chỉnh sửa gì trong đây, có gì nên để vậy,
- Duy có function craftin_preprocess_html, có thể chèn file css, js dùng chung cho tất cả các trang
drupal_add_css(path_to_theme() . '/css/style.css');
drupal_add_js(path_to_theme() . '/js/jquery-1.11.1.min.js');

Các file tpl.php trong folder templates của theme
- comment.tpl.php : template layout dùng cho từng comment
- comment-wrapper.tpl.php : template layout chứa phần comment
- maintenance-page.tpl.php : template layout trên admin side
- node.tpl.php : template layout hiển thị node
- page.tpl.php : template layout một trang trên front side

+++ ngoài ra còn có thể copy dùng các tpl hệ thống khác vào folder templates và chỉnh sửa layout theo ý muốn
- page--front.tpl.php : layout nội dung trang index (trang mặc định) khi vào.


Khi có chỉnh sửa bất kỳ gì trong template thì phải clear cache trong Drupal Admin Side để theme hiển thị đúng nhất.
tthlan
Quản trị viên
Posts: 76
Joined: Tue Aug 23, 2016 8:13 am

Re: [D7] Tạo dựng một theme của riêng mình - Remake a drupal custom theme

Post by tthlan »

Một số function lệnh thường dùng trong template

* - render : để in nội dung html region ra trang
* - hide : để ẩn nội dung html region ra trang
* - module_invoke : gọi in một block view ra trang
* - print : để in nội dung ra màn hình
* - drupal_get_path('theme', 'craftin') : lấy đường dẫn tuyệt đối đến thư mục theme của theme_name
Ở đây dùng drupal_get_path để trỏ đúng đường đên trong thư mục themes/craftin/ dẫn để đưa image, file js, file css đặt để sử dụng

Code: Select all

$path_theme = [b]drupal_get_path[/b]('theme', 'craftin');
<img src="/$path_theme/img/logo.jpg" alt="Craftin">

Một số thông số trong templates files

* - $base_path: The base URL path of the Drupal installation. At the very
* least, this will always default to /.
* - $directory: The directory the template is located in, e.g. modules/system
* or themes/craftin.
* - $is_front: TRUE if the current page is the front page.
* - $logged_in: TRUE if the user is registered and signed in.
* - $is_admin: TRUE if the user has permission to access administration pages.
*
* Site identity:
* - $front_page: The URL of the front page. Use this instead of $base_path,
* when linking to the front page. This includes the language domain or
* prefix.
* - $logo: The path to the logo image, as defined in theme configuration.
* - $site_name: The name of the site, empty when display has been disabled
* in theme settings.
* - $site_slogan: The slogan of the site, empty when display has been disabled
* in theme settings.
* - $hide_site_name: TRUE if the site name has been toggled off on the theme
* settings page. If hidden, the "element-invisible" class is added to make
* the site name visually hidden, but still accessible.
* - $hide_site_slogan: TRUE if the site slogan has been toggled off on the
* theme settings page. If hidden, the "element-invisible" class is added to
* make the site slogan visually hidden, but still accessible.
*
* Navigation:
* - $main_menu (array): An array containing the Main menu links for the
* site, if they have been configured.
* - $secondary_menu (array): An array containing the Secondary menu links for
* the site, if they have been configured.
* - $breadcrumb: The breadcrumb trail for the current page.
*
* Page content (in order of occurrence in the default page.tpl.php):
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title: The page title, for use in the actual HTML content.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
* - $messages: HTML for status and error messages. Should be displayed
* prominently.
* - $tabs (array): Tabs linking to any sub-pages beneath the current page
* (e.g., the view and edit tabs when displaying a node).
* - $action_links (array): Actions local to the page, such as 'Add menu' on the
* menu administration interface.
* - $feed_icons: A string of all feed icons for the current page.
* - $node: The node object, if there is an automatically-loaded node
* associated with the page, and the node ID is the second argument
* in the page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - $page['header']: Items for the header region.
* - $page['featured']: Items for the featured region.
* - $page['highlighted']: Items for the highlighted content region.
* - $page['help']: Dynamic help text, mostly for admin pages.
* - $page['content']: The main content of the current page.
* - $page['sidebar_first']: Items for the first sidebar.
* - $page['triptych_first']: Items for the first triptych.
* - $page['triptych_middle']: Items for the middle triptych.
* - $page['triptych_last']: Items for the last triptych.
* - $page['footer_firstcolumn']: Items for the first footer column.
* - $page['footer_secondcolumn']: Items for the second footer column.
* - $page['footer_thirdcolumn']: Items for the third footer column.
* - $page['footer_fourthcolumn']: Items for the fourth footer column.
* - $page['footer']: Items for the footer region.
Post Reply