Темизация формы поиска Drupal 7

Для темизации форм Drupal 7 использует хуки в частности  hook_form_alter.  Более подробно о использовании функции function hook_form_alter можно прочитать на оф. сайте.

Сейчас на примере, продемонстрирую как темизировать форму поиска. Каждая форма на сайте имеет свой идентификатор form id. Узнать его можно просмотрев исходный код страинцы, или используя дополнение firebug для браузера firefox.

Пример как выглядит исходный код формы поиска до темизации.  Тема Garland. Добавлю placeholder и заменю кнопку.

<form action="/" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline">
<h2 class="element-invisible">Форма поиска</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2">Поиск </label>
<input title="Введите ключевые слова для поиска." type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text">
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Поиск" class="form-submit"></div><input type="hidden" name="form_build_id" value="form-_JhGdoDVnjSxeRODP07pWt973XogC7vXF0BzTghv8wE">
<input type="hidden" name="form_token" value="BIWsqZ-z78f88mvsp5iv2l0Ak2MNVCY_WZ-klu3opUA">
<input type="hidden" name="form_id" value="search_block_form">
</div>
</div>
</form>
 
Значение form_id = search_block_form - необходимый для темизации идентификатор формы.
Получив id формы приступаем к темизации. Для этого нужно добавить несколько строк кода в файл template.php. 
function garland_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
$form['search_block_form']['#title'] = t('Search'); // Текст заголовка
$form['search_block_form']['#title_display'] = 'invisible'; // Отключение вывода заголовка
$form['search_block_form']['#size'] = 20;  // Длина поля ввода
$form['actions']['submit']['#value'] = t('Поиск'); // Изменение текста кнопки поиска, в случае испльзования изображение в этом нужды нет
$form['search_block_form']['#class'] = 'search-form';  // класс текстового поля для 
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/button.png'); // Путь к изображению кнопки, если заменять текст на картинку
$searchtext = 'Поиск по сайту'; // Текст внутри поля. 
$form['search_block_form']['#default_value'] = t($searchtext);
// Добавляем дополнительные атрибуты к текстовому полю. Убирает текст при наведении курсора в форму и возвращает его назад
$form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '" . t($searchtext) ."';}";
$form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '" . t($searchtext) . "') {this.value = '';}";
// Предотвращает от поиска текста по умолчанию
$form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='" . t($searchtext) . "'){ alert('" . t('Please enter a search') . "'); return false; }";
 // Атрибут placeholder, вместо использования javascript
$form['search_block_form']['#attributes']['placeholder'] = t($searchtext);
 }
}
в результате добавилось фоновое изображение кнопки submit и добавленное значение  placeholder - Поиск по сайту. В коде описания хука добавлено подробное описание строк.
В принципе хук hook_form_alter, можно использовать для любых форм. Стоит только обратиться к id формы, и добавить функцию в файл template.php. Если не использовать значения id, настройки будут глобальными для всех форм
 
function моя_тема_айди_формы_form_alter(&$form, &$form_state, $form_id) {
//Настройка формы
}

 

 

Оставить комментарий

Похожие материалы