Create a theme for Drupal 6. Part 1

To create Drupal themes on the Internet, you can find several articles (a good article, I advise you to read ), but usually it all ends with a banal set of templates and an info file. In this topic, I will try to tell in an accessible way how to create a flexible and not the simplest topic.

Start

First, we need to create a directory in the sites / all / themes directory with the name of our theme. I named the theme mytheme and created the sites / all / themes / mytheme directory .
In the created directory we create css directories for styles, js for scripts, images for pictures, templates for templates, preprocess about this later. We also create a template.php file in which we will write all the logic of the topic and mytheme.info to describe the topic. You can also add favicon.ico and logo.png .

mytheme.info

The file contains all the information needed by the kernel to work with the theme.
Create a file with the following contents:

Copy Source | Copy HTML

1. ; Название темы, как оно будет отображаться в админке
2. name = MyTheme
3. ; Описание темы
4. description = Моя новая тема
5. ; Версия ядра
6. core = 6.x
7. ; Шаблонизатор используемый темой, по умолчанию phptemplate
8. engine = phptemplate
9. ; Версия темы
10. version = 6.x-1.01
11.  
12. ; Путь к скриншоту темы
13. screenshot = images/screenshot.png
14.  
15. ; Регионы темы, в которые можно будет вставлять блоки
16. regions[sidebar_right] = Right sidebar
17. regions[sidebar_left] = Left sidebar
18. regions[header_line] = Line in header
19. regions[footer_line] = Line in footer
20. regions[content_top] = Content top
21. regions[content_bottom] = Content bottom
22. regions[content_right] = Content right
23. regions[comments_rigth] = Comments right
24. regions[page_bottom] = Page bottom
25.  
26. ; Настройки темы, которые будут доступны из админки
27. ;features[] = name
28. features[] = node_user_picture
29. features[] = comment_user_picture
30. features[] = search
31. ;features[] = favicon
32. ;features[] = primary_links
33. ;features[] = secondary_links
34.  
35. ; Стили
36. stylesheets[all][] = css/blocks.css
37. stylesheets[all][] = css/comments.css
38. stylesheets[all][] = css/fields.css
39. stylesheets[all][] = css/forms.css
40. stylesheets[all][] = css/html-reset.css
41. stylesheets[all][] = css/layout.css
42. stylesheets[all][] = css/messages.css
43. stylesheets[all][] = css/navigation.css
44. stylesheets[all][] = css/nodes.css
45. stylesheets[all][] = css/pages.css
46. stylesheets[all][] = css/tabs.css
47.  
48. ;stylesheets[print][] = css/print.css
49.  
50. ;stylesheets[handheld][] = css/mobile.css
51. ;stylesheets[only screen and (max-device-width: 480px)][] = css/iphone.css
52.  
53. ; Скрипты
54. ;scripts[] = js/script.js

This is enough for Drupal to see and recognize our topic. I chose this set of styles and regions, because I find it convenient. You can change to your taste.

template.php

The most delicious part of the topic. In this file we will write all the logic - hooks.

First, define HOOK_theme () .

Copy Source | Copy HTML

1. function mytheme_theme(&$existing, $type, $theme, $path) {
2.     // Определяем базовую тему, если наша тема дочерняя
3.     static $base_themes = array();
4.     $base_themes[] = $theme;
5.  
6.     // Добавляем хук "process", который будет вызываться после "preprocess".
7.     if ($type == 'theme') {
8.         foreach (array_keys($existing) as $hook) {
9.             if (function_exists($theme . '_preprocess')) {
10.                 $existing[$hook]['preprocess functions'][] = $theme . '_preprocess';
11.             }
12.             if (function_exists($theme . '_preprocess_' . $hook)) {
13.                 $existing[$hook]['preprocess functions'][] = $theme . '_preprocess_' . $hook;
14.             }
15.             foreach ($base_themes as $base_theme) {
16.                 if (function_exists($base_theme . '_process')) {
17.                     $existing[$hook]['preprocess functions'][] = $base_theme . '_process';
18.                 }
19.                 if (function_exists($base_theme . '_process_' . $hook)) {
20.                     $existing[$hook]['preprocess functions'][] = $base_theme . '_process_' . $hook;
21.                 }
22.             }
23.         }
24.     }
25.  
26.     // Добавляем препроцессы только для данной темы, они не распространятся на дочерние темы
27.     if ($theme == 'mytheme') {
28.         return array(
29.             // Добавляем регион. Это необходимо, чтобы мы могли использовать шаблоны для регионов
30.             'region' => array(
31.                 // Аргументы, которые будут доступны
32.                 'arguments' => array('elements' => NULL),
33.                 // Путь к шаблону
34.                 'path' => drupal_get_path('theme', 'mytheme') . '/templates',
35.                 // Название шаблона. Полное имя файла будет region.tpl.php
36.                 'template' => 'region',
37.                 // Функции, которые будут подготавливать переменные для шаблонизации
38.                 'preprocess functions' => array(
39.                     'template_preprocess',
40.                     'mytheme_preprocess',
41.                     'mytheme_preprocess_region',
42.                     'mytheme_process',
43.                 ),
44.             ),
45.             // Выносим header и footer в отдельные шаблоны
46.             'header' => array(
47.                 'arguments' => array('elements' => NULL),
48.                 'path' => drupal_get_path('theme', 'mytheme') . '/templates',
49.                 'template' => 'header',
50.                 'preprocess functions' => array(
51.                     'template_preprocess',
52.                     'mytheme_preprocess',
53.                     'mytheme_preprocess_header',
54.                     'mytheme_process',
55.                 ),
56.             ),
57.             'footer' => array(
58.                 'arguments' => array('elements' => NULL),
59.                 'path' => drupal_get_path('theme', 'mytheme') . '/templates',
60.                 'template' => 'footer',
61.                 'preprocess functions' => array(
62.                     'template_preprocess',
63.                     'mytheme_preprocess',
64.                     'mytheme_preprocess_footer',
65.                     'mytheme_process',
66.                 ),
67.             ),
68.         );
69.     }
70.     return array();
71. }

Define theme_blocks ($ region) . The function returns the set of blocks available for the current user in the specified region.

Copy Source | Copy HTML

1. function mytheme_blocks($region) {
2.     if ($region) {
3.         $output = '';
4.  
5.         if ($list = block_list($region)) {
6.             foreach ($list as $key => $block) {
7.                 $output .= theme('block', $block);
8.             }
9.         }
10.  
11.         // Контент для данного региона
12.         $output .= drupal_get_content($region);
13.  
14.         $elements['#children'] = $output;
15.         $elements['#region'] = $region;
16.  
17.         // Возвращаем темизированный регион с блоками. Используется region.tpl.php
18.         return $output ? theme('region', $elements) : '';
19.     }
20. }

Define template_preprocess (& $ variables, $ hook) . The function prepares the variables that will be passed to the template.

Copy Source | Copy HTML

1. function mytheme_preprocess(&$vars, $hook) {
2.     $key = ($hook == 'page' || $hook == 'maintenance_page') ? 'body_classes' : 'classes';
3.  
4.     if (array_key_exists($key, $vars)) {
5.         if (is_string($vars[$key])) {
6.             $vars['classes_array'] = explode(' ', $vars[$key]);
7.             unset($vars[$key]);
8.         }
9.     }
10.     else {
11.         $vars['classes_array'] = array($hook);
12.     }
13.  
14.     // Тут немного магии.
15.     // Для каждого хука типа hook_preprocess_anything() мы ищем соответствующий файл
16.     // в каталоге preprocess и вызываем его
17.     $name = 'preprocess/preprocess-'. str_replace('_', '-', $hook) .'.inc';
18.     if (is_file(drupal_get_path('theme', 'mytheme') . '/' . $name)) {
19.         include($name);
20.     }
21. }

Define the HOOK_process () described earlier.

Copy Source | Copy HTML

1. function mytheme_process(&$vars, $hook) {
2.     if (array_key_exists('classes_array', $vars)) {
3.         // Сливаем в строку все стили для элемента
4.         $vars['classes'] = implode(' ', $vars['classes_array']);
5.     }
6. }
7.  

Define a function that returns the path to our topic.

Copy Source | Copy HTML

1. function _mytheme_path() {
2.     static $path = FALSE;
3.     if (!$path) {
4.         $matches = drupal_system_listing('mytheme\.info$', 'themes', 'name',  0);
5.         if (!empty($matches['mytheme']->filename)) {
6.             $path = dirname($matches['mytheme']->filename);
7.         }
8.     }
9.     return $path;
10. }
11.  

And finally, add a couple of functions for handling classes and id for pages

Copy Source | Copy HTML

1. if (!function_exists('drupal_html_class')) {
2.     function drupal_html_class($class) {
3.         $class = strtr(drupal_strtolower($class), array(' ' => '-', '_' => '-', '/' => '-', '[' => '-', ']' => ''));
4.  
5.         $class = preg_replace('/[^\x{002D}\x{0030}-\x{0039}\x{0041}-\x{005A}\x{005F}\x{0061}-\x{007A}\x{00A1}-\x{FFFF}]/u', '', $class);
6.  
7.         return $class;
8.     }
9. }
10.  
11. if (!function_exists('drupal_html_id')) {
12.     function drupal_html_id($id) {
13.         $id = strtr(drupal_strtolower($id), array(' ' => '-', '_' => '-', '[' => '-', ']' => ''));
14.         $id = preg_replace('/[^A-Za-z0-9\-_]/', '', $id);
15.         return $id;
16.     }
17. }

Part 2 , Part 3