Как добавить новую позицию (регион) блока в тему (шаблон) Друпал 7.
Добавление новой позиции в тему Друпал 7 для большей функциональности. Создание нового региона в шаблоне Друпал 7.
Иногда просто необходимо слегка поправить шаблон для Друпал 7, например, чтобы добавить новый регион в тему Друпала. Зачем? Допустим для вывода рекламного блока в начале, или в конце статьи, или списка похожих материалов, социальных кнопок, да мало ли для чего. Сделать это можно, отредактировав всего два файла в вашей теме. Это файл с расширением INFO(название_темы.info), page.tpl.php. Давайте начнем по порядку и придумаем название вашего региона для блока. Экспериментировать я буду на популярной теме Друпал 7 — Zen, поэтому иду в /sites/all/themes/zen и нахожу файл zen.info, правлю его с помощью notepad ++, или другого текстового редактора. Вставляем туда следующий код:
regions[NEW_region] = NEW region
Это название выводится в пунктах меню «структура — блоки«(/admin/structure/block)
<?php print render($page['NEW_region']); ?>
для примера я вставил вывод нового региона после шапки и перед остальным содержимым шаблона.
Незабываем сохранить и переходим в раздел Блоки(/admin/structure/block) здесь создаем новый блок и размещаем его в нашем новом регионе, сохраняем все это дело и проверяем результат…
Ну вот собственно и все. Главное не забываем почистить кеш и правильно написать имя вашей темы. Можно сделать хоть сто таких позиций. Можете обернуть все в свой отдельный див (div) и применить CSS стили, сделав ваш блок на свой вкус и цвет. Благодарю за внимание.
Выпадающее главное меню в Drupal 7
В случае необходимости темизировать сайт на Drupal 7 на котором установлена тема которая не поддерживает опцию второго уровня для «Главное меню», и установка опции «Показать раскрытым» (Show as expanded) для родительских элементов в разделе настройки меню не помогает.
Есть два способа решения этой задачи:
- Установка стороннего модуля и при его помощи настроить вывод второго уровня меню (например модуль —Superfish, который позволяет настраивать выпадающие меню с jQuery эффектами.)
- Добавление нового региона , в который нужно будет поместить меню.
Но если вы не стороник установки сторонних модулей для реализатции только одной не сложной задачи, а использование отдельного региона только для одного-единственного меню считаете не приемлемым, то в этом случае есть и третий способ о котором мы и поговорим подробнее в этой статье.
Первым делом проверьте в page.tpl.php доступна ли переменная $main_menu.
Затем нам необходимо получить имя меню, которое выбрано главным. Для этого нужно воспользоваться функцией variable_get:
$main_menu = variable_get('menu_main_links_source', 'main-menu');
Далее нам понадобиться получить массив пунктов меню при помощи функции menu_tree_all_data. Обратите внимание, что в данном случае будут отображаться ВСЕ подпункты главного меню вне зависимости от текущей страницы и отмеченной галочки «Show as expanded». В случае если Вам необходимо, чтобы поведение главного меню учитывала эти параметры, то Вам следует использовать функцию menu_tree_page_data.
$main_menu_expanded = menu_tree_all_data($main_menu);
function zen_preprocess_page(&$variables) {
$main_menu = variable_get('menu_main_links_source', 'main-menu');
$main_menu_expanded = menu_tree_all_data($main_menu);
$variables['main_menu_expanded'] = menu_tree_output($main_menu_expanded);
}
<?php print render($main_menu_expanded); ?>
Настройка и оформление (Темизация) комментариев в Drupal
Если вас не устраивает внешний вид вывода комментариев в шаблоне вашей темы вы можете настроить и оформить их на свой вкус, для этого скопируйте базовые шаблоны в папку вашей темы(/sites/all/themes/ваша тема).
Базовыми шаблонами для комментариев в Drupal являются файлы comment.tpl.php и comment-wrapper.tpl.php.
Оригиналы файлов базовых шаблонов comment.tpl.php и comment-wrapper.tpl.php по умолчанию находятся в /modules/comment/comment.tpl.php и соответсвенно /modules/comment/comment-wraper.tpl.php.
Фаил comment.tpl.php отвечает за вывод отдельного комментария, а фаил comment-wraper.tpl.php отвечает за вывод списка комментариев.
Если вы будете редактировать выше перечисленные файлы то ваши изменения будут применятся ко всем комментариям на всем сайте. А что делать если нужно сделать разные комментарии для разных типов материалов ?
В таком случае вам нужно будет создать шаблон комментария для конкретного типа материала, который будет иметь следующий вид: comment—<имя нужного вам типа материала>.tpl.php
comment—<имя нужного вам типа материала>.tpl.php позволит изменить шаблон для всех комментариев принадлежащих к материалам указанного типа.
Например вы решили сделать разный вид вывода для комментариев типа blog и типа forum, следовательно нужно создать два файла в папке вашей темы: comment—blog.tpl.php и comment—forum.tpl.php
Далее давайте рассмотрим переменные которые могут пригодиться для редактирования базовых шаблонов:
Стандартные переменные шаблона comment.tpl.php:
- $author — автор комментария.
- $content — массив полей комментария.
- $created — дата и время создания комментария.
- $changed — дата и время публикации комментария.
- $classes, строка — CSS классы применяемые к комментарию. Используется для стилизации, по умолчанию содержит следующие варианты:
- comment — тип шаблона
- comment-by-anonymous- комментарий не авторизованного пользователя.
- comment-by-node-author — комментарий автора материала, к которому оставлен комментарий.
- comment-preview — предпросмотр и редактирование комментария.
- comment-unpublished — неопубликованный комментарий.
- comment-by-viewer — комментарий оставленный текущим пользователем (для авторизованных пользователей).
- comment-new — комментарий оставленный после последнего визита (для авторизованных пользователей).
- $new- если ИСТИНА, то комментарий новый.
- $permalink — ссылка-якорь на комментарий.
- $submitted — информация о публикации комментария, содержит имя автора и время публикации комментария.
- $picture — аватар автора комментария.
- $signature — подпись автора комментария.
- $status — статус комментария. Может принимать значения: comment-published, comment-unpublished или comment-preview.
- $title — заголовок комментария, в виде ссылки-якоря.
- $title_prefix, массив — содержит текст для вывода перед заголовками.
- $title_suffix, массив — содержит текст для вывода после заголовков.
Переменные шаблона comment.tpl.php используемые для связи:
- $comment- комментарий.
- $node- материал, к которому относится комментарий.
Прочие переменные шаблона comment.tpl.php:
- $classes_array, массив — CSS классы.
Стандартные переменные шаблона comment-wrapper.tpl.php:
- $content, массив — массив связанных данных материала. Используйте render($content) для вывода всех данных или render($content[‘comment_form’]) для вывода частей.
- $classes, строка — CSS классы одной строкой, применяемые для контекстноых стилей. Для ищменения используйте переменную $classes_array в препроцессинге. Значение по умолчанию «comment-wrapper». Текущий тип шаблона «theming hook».
- $title_prefix, массив — содержит данные для вывода перед заголовками.
- $title_suffix, массив — содержит данные для вывода после заголовков.
Следующие переменные шаблона comment-wrapper.tpl.php предназначены дляконтекстной информации:
- $node- материал, к которому относятся комментарии.
Константы шаблона comment-wrapper.tpl.php:
- $display_mode — режим отображения комментариев:
- COMMENT_MODE_FLAT — отображать списком.
- COMMENT_MODE_THREADED — отображать деревом.
Прочие переменные шаблона comment-wrapper.tpl.php:
- $classes_array, массив — CSS классов. Преобразуются в строку сохраняясь в $classes.
Ну и небольшой бонус напоследок.
Если вам нравиться вид комментариев как на изображение выше, скачайте архив распаковав его вы найдете в нем следующие файлы и папки:
- img (папка) — содержит изображение иконок, скопировать папку в корень вашей темы(www.ваш_сайт.ru/sites/all/themes/ваша тема)
- templates/comment-wrapper.tpl.php — скопировать одноименную папку в корень вашей темы если таковая имеется либо в корневую папку темы (www.ваш_сайт.ru/sites/all/themes/templates/ваша тема или www.ваш_сайт.ru/sites/all/themes/ваша тема)
- templates/comment.tpl.php — расположение такое же как и у предыдущего файла (www.ваш_сайт.ru/sites/all/themes/templates/ваша тема или www.ваш_сайт.ru/sites/all/themes/ваша тема)
- comments.css — скопируйте в корень вашей темы или в папку css если таковая имеется, при этом не забудьте вставить следующую строку stylesheets[all][] = comments.css или stylesheets[all][] = css/comments.css соответствено в файл имя_вашей_темы.info , либо откройте фаил styles.css вашей темы и вставьте в него следующий код:
/*-----------------------------comments styles--------------------------------- */
#comments {
margin-left: 40px;
}
#comments ul.links{
margin: -10px 0px 0px 0px;
padding: 0px;
text-align: right;
display: block;
}
#comments ul.links li{
margin-right: 3px;
padding: 2px 0px 2px 20px;
}
.comment{
margin-bottom:20px;
}
.comment-content{
padding: 10px;
position: relative;
}
.arrow {
height: 0;
width: 0;
position: absolute;
top: 10px;
left: -28px;
}
.arrow-border {
height: 0;
width: 0;
position: absolute;
top: 10px;
left: -38px;
}
.comment .user-picture img{
float: left;
margin: 0px 10px 2px 0px;
}
.comment h3{
margin-bottom: 5px;
}
.comment .submitted{
margin-bottom: 10px;
}
.user-signature p{
margin-top:3px;
}
/*----------------------------Look & Feel---------------------------------- */
li.comment-add, li.comment-reply{
background: url(../img/icons/comment_add.png) no-repeat left center;
}
li.comment-delete{
background: url(../img/icons/comment_delete.png) no-repeat left center;
}
li.comment-edit{
background: url(../img/icons/comment_edit.png) no-repeat left center;
}
li.comment-forbidden{
background: url(../img/icons/block_16.png) no-repeat left center;
}
.arrow{
border-style: solid;
border-width: 15px;
}
.arrow-border{
border-style: solid;
border-width: 15px;
}
.odd .comment-content{
border: 8px solid #dff0fc;
background: #f2f9fe;
}
.even .comment-content{
border: 8px solid #e8e8e8;
background:#f6f8f9;
}
.odd .arrow{
border-color: transparent #f2f9fe transparent transparent;
}
.even .arrow{
border-color: transparent #f6f8f9 transparent transparent;
}
.odd .arrow-border{
border-color: transparent #dff0fc transparent transparent;
}
.even .arrow-border{
border-color: transparent #e8e8e8 transparent transparent;
}
.comment .submitted{
font-size: 0.9em;
}
.user-signature{
font-style:italic;
color: #979696;
}
#content .inline li{
padding-left: 25px !important;
}
На этом все. Всем удачи!
Если для стандартного типа материала Page, то нужно перейти по следующему пути: Структура » Типы материалов » Страница(или ваш тип материала), затем перейти на вкладку: «Поля комментария» найти поле Comment и нажать изменить, преименовать метку поля на нужное название
Сылка для правки полей комментария типа материала Page: /admin/structure/types/manage/page/comment/fields
С фоном тоже все просто, фон комментариев задается через css проверте в вашей теме названия класса в котором размещается каждый комментарий и задайте ему фон к примеру: background: #f6f8f9 none repeat scroll 0 0;
Подборка тем для Drupal
Важность красивого и удобного дизайна сайта я думаю понятна каждому и углубляться в эту тему в этой статье мы не будем, сегодня мы поговорим о темах для Drupal на базе которых можно разработать свою уникальную тему с нуля
Ситуация с темами для Drupal 7 в общем не такая радужная как в других бесплатных CMS, но отчаиваться не стоит, все что требуется для создания своего уникального дизайна сайта в Drupal уже есть.
Темы для Drupal 7 можно разделить на 3 типа:
- Темы для разработки с нуля (базовые темы).
- Темы для быстрой разработки (то есть необходимы минимальные трудозатраты для получения желаемого результата).
- Готовые темы, которые просто красивы и их можно использовать на любом сайте.
Давайте рассмотрим примеры, чтобы понять разницу:
Темы для разработки с нуля (базовые темы).
Zen
На сегодняшний день это самая популярная тема в Drupal для разработчиков — мощная и вместе с тем простая. В этой теме используются элементы HTML5, Sass CSS 3. В Zen предусмотрено вариант адаптивной верстки и статической верстки для этого нужно всего лишь подключить нужный вам css фаил. У Zen довольно хорошая документация и файлы с подробными комментариями.
AdaptiveTheme
Вам нужен сайт с адаптивным дизайном? Скачивайте и устанавливайте AdaptiveTheme и вы не ошибетесь в вашем выборе. Эта тема разработана для адаптивной верстки имеет удобную систему схем страниц и поддержку HTML5, а также данная тема адаптирована для мобильных устройств.
Fusion
Fusion является мощной базовой темой, с макетом и имеет широкие опции настройки стилей которые можно контролировать с помощью пользовательского интерфейса Drupal. Она имеет статический вариант шириной 960px или адаптивный вариант, дизайном также адаптирован для мобильных устройств. В тему включенны многочисленные полезные стили для блоков.
Omega
Omega — это один из флагманов среди базовых тем для разработки, в этой теме одной из первых применяются новые технологии в Web, эта тема довольно часто обновляется и имеет много полезных интеграций (например, с Drush и модулем Panels). Сейчас поддерживаются 2 версии Омеги, это 3-я и 4-я. Омега 4.x направлена на темизацию с помощью кода, ну а если вы испытываете затруднения при работе с кодом вы можете использовать Omega 3.x которая больше ориентирована для настроек через панель управления
Темы для быстрой разработки
Business
Если нужен строгий дизайн для делового сайта тогда Business — то, что нужно. В теме есть возможность легко экспериментировать с цветовой гаммой — можно в настройках темы менять цвета ссылок, меню и блоков. Эта тема из разряда уже готовых, то есть вам не нужно устанавливать другие базовые темы или же специальные модули.
Corolla
Данная тема разработана на базе выше упомянутой AdaptiveTheme и является ее подтемой, имеет множество настроек, которые позволят полностью настроить внешний вид сайта.
Zero Point
Zero Pointимеет в настройках 8 цветовых стилей, множество иконок, и еще, как утверждает разработчик, тема оптимизирована под поисковые системы.
Готовые темы
Rubik
Rubik это красивая тема для админки в Drupal. Rubik имеет множество красивых и качественных иконок, а также у нее приятный интерфейс.
Professional Theme
Professional Theme подойдет для корпоративных сайтов. В теме есть адаптивная верстка.
Andromeda
Andromeda еще одна готовая тема с большим количеством регионов, красивым меню, слайдшоу и многого другого.
SimpleCorp
С первого взгляда дизайн темы SimpleCorp кажется стандартным, но не все так просто. В ней есть все для оригинального сайта: например, слайдшоу и приятные шрифты; а еще здесь можно выбрать одно из цветовых решений. Адаптивный дизайн прилагается.
Итог
В данном блоге мы выделили 3 типа тем и рассмотрели по 4 популярных примера каждой из них. Конечно же, есть много других образцов, которые, возможно, используете вы. Если хотите поделиться полезной информацией с сообществом — оставляйте свои комментарии под этим блогом!
И всегда помните, что оформление сайта очень сильно влияет на его посещаемость, а поэтому дизайн сайта должен быть уникальным, удобным и понятным.
