Hook Themes no Drupal 8

Publicado em 14 de julho de 2017 às 19:05

No Drupal, em algum momento, temos a necessidade de alterar algum comportamento padrão do core ou de módulos contrib. Porém, essa alteração não pode ser feita diretamente no código original. Para isso, devemos utilizar os hooks.

Se tratando de temas, existem diversos hooks voltados para sua manipulação, como por exemplo:
  • hook_preprocess
  • hook_preprocess_HOOK
  • hook_element_info_alter
  • etc...
Veja a lista completa dos hooks voltados para temas em theme.api.php.

O que são hooks?
 
Hooks são as funções que conseguem interceptar uma determinada ação ou informação disponibilizada pelo core ou módulos contribs. Ao implementar um Hook, você consegue ter acesso a variáveis, podendo fazer alterações em seus valores.
 
Saiba mais sobre Hooks aqui.
 
Como e onde implementar um hook?
 
Um hook pode ser implementado dentro do seu módulo, ou, caso seja um hook relacionado ao tema, você pode deixá-lo dentro do arquivo "<seu-tema>.theme" localizado na raiz do tema.

Para implementar um hook, você deve substituir a palavra inicial "hook" da função pelo nome do seu módulo ou tema. 

Exemplo de como implementar o hook "hook_preprocess":

Dentro do módulo:

 
function my_module_name_preprocess(&$variables, $hook)
 
Dentro do tema:
 
function my_theme_name_preprocess(&$variables, $hook)

Quando saber se o hook deve ser implementado dentro do módulo ou do tema?

Isso vai depender da finalidade de sua implementação. Por exemplo:

Você precisa utilizar um hook para adicionar um JavaScript, e esse JavaScript tem que funcionar independentemente do tema que estará sendo utilizado. Neste caso, a implementação do hook deverá ser feita dentro do módulo e não do tema.

 
Exemplo prático

Neste exemplo, vou mostrar como implementar uma configuração (Theme Settings) dentro do seu tema custom.
 
Para tal implementação, vamos seguir o seguinte cenário:
 

O administrador ao entrar na página de configuração do tema (admin/appearance/settings/<theme-name>), terá um campo de checkbox com a opção de exibir ou não os títulos dos Nodes.

 
Vamos à implementação:
 
Crie o arquivo "theme-settings.php" dentro da raíz do seu tema:
 
Hooks no Drupal 8

 

Dentro deste arquivo, vamos implementar o campo checkbox responsável por exibir ou não o título dos Nodes. Para fazer isso, vamos utilizar o hook "hook_form_system_theme_settings_alter":

 
/**
 * Implements hook_form_system_theme_settings_alter().
 */

 

function custom_bootstrap_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id = NULL) {
  // Work-around for a core bug affecting admin themes. See issue #943212.
  if (isset($form_id)) {
    return;
  }
 
  $form['hide_node_title'] = array(
    '#type' => 'checkbox',
    '#title'         => t('Hide node title'),
    '#default_value' => theme_get_setting('hide_node_title'),
    '#description'   => t("Hide title from node types"),
  );
}
 
Limpe o cache do site e acesse a página de configuração do seu tema (admin/appearance/settings/<theme-name>) para ver o campo implementado:
 
Hooks no Drupal 8
O próximo passo é implementar a regra de exibição. Para fazer isso vamos utilizar o hook "hook_preprocess_page_title".​

Crie o arquivo "<theme-name>.theme" dentro da raiz do seu tema:

 

 
Hooks no Drupal 8
Dentro do arquivo ""<theme-name>.theme" faça a seguinte implementação:
 
/**
 * Implements hook_preprocess_page_title().
 */
function custom_bootstrap_preprocess_page_title(&$variables) {
  if(\Drupal::routeMatch()->getParameter('node')) {
    //Recupera o valor do campo hide_node_title
    $hidden = theme_get_setting('hide_node_title') ? 'hidden' : '';
    $variables['title_attributes']['class'][] = $hidden;
  }
}

 

 
No código acima, eu recupero o valor do campo checkbox criado e caso ele esteja checado, eu aplico a classe "hidden" ao título, ocultando sua exibição.

Limpe o cache do site e faça o teste.

Lembrando que essa implementação poderia ser feita de outras maneiras, utilizando outros hooks.

Espero que tenha ajudado.

Até o próximo tutorial!