В интернете полно мануалов о том, как создать собственный шаблон (тему оформления) под Drupal 7, некоторые предлагают делать на основе готовой базовой темы, кто-то предлагает пилить с нуля. Рассмотрим второй вариант. Видел несколько уроков, в которых при создание своей темы с нуля предлагается подключать скрипты и файлы стилей прямо в файле шаблона page.tpl.php, что на мой (и не только) взгляд неправильно, ибо приводит к дублированию тегов и тому, что теги, которым положено быть в <head></head> оказываются в <body></body>, что не есть хорошо.
Почему-то, многие умалчивают, что css-файлы и js-скрипты можно подключать в info-файле шаблона, это удобнее и правильнее потому что:
- скрипты и файлы подключатся там, где и должны, т.е. между
<head></head>; - пропадет дублирование;
- если у вас свой шаблон на каждый тип материала, то пропадет надобность подключать их в каждом из tpl-файлов.
Открываем файл /sites/all/themes/nametheme/nametheme.info и дописываем необходимые строки.
Чтобы подключить стили добавляем строку:
stylesheets[all][] = css/style.css
чтобы подключить скрипт:
scripts[] = js/script.js
Следует также учесть, что путь к файлам указывается относительно темы, т.е. в каталоге темы, нужно будет создать папки css и js, куда и поместить файлы. После добавления нужных строк, сохраняем файл и чистим кэш на сайте. Должно работать.
И, чтобы два раза не вставать, сразу напишу, как добавлять метатеги в тот же <head></head>. Это уже делается через файл template.php, который нужно будет создать в каталоге вашей темы (если он уже есть, то просто добавьте код в него). Нижеследующий пример кода не мой, потому что мне лень, а он и так прекрасного работает.
/**
* Implements hook_preprocess_html().
*/
function THEMENAME_preprocess_html(&$vars) {
drupal_add_html_head(array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width, initial-scale=1.0',
)
), 'meta_viewport');
}
Этот код добавляет на сайт в хеад строку <meta name="viewport" content="width=device-width, initial-scale=1.0" />