Adicionar arquivos JavaScript às páginas administrativas


18

Como adiciono arquivos JavaScript / CSS em todas as páginas de administração, usando um módulo?

Respostas:


25

Usando um módulo, você pode seguir dois métodos:

O primeiro método permitiria adicionar arquivos JavaScript (ou CSS) extras a qualquer página de administração, enquanto o segundo método permitiria adicionar esses arquivos apenas a páginas que contenham formulários.

function mymodule_init() {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');
    drupal_add_js($path . '/mymodule.js');
    drupal_add_css($path . '/mymodule.css');
  }
}
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');  
    $form['#attached']['css'][] = $path . '/mymodule.css';
    $form['#attached']['js'][] = $path . '/mymodule.js';
  }
}

Substitua "mymodule" pelo nome abreviado do seu módulo; substitua "mymodule.js" e "mymodule.css" pelos nomes reais dos arquivos JavaScript e CSS.

system_init () contém o seguinte código, para adicionar arquivos específicos às páginas administrativas.

  $path = drupal_get_path('module', 'system');
  // Add the CSS for this module. These aren't in system.info, because they
  // need to be in the CSS_SYSTEM group rather than the CSS_DEFAULT group.
  drupal_add_css($path . '/system.base.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

  // Add the system.admin.css file to the administrative pages.
  if (path_is_admin(current_path())) {
    drupal_add_css($path . '/system.admin.css', array('group' => CSS_SYSTEM));
  }

  drupal_add_css($path . '/system.menus.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.messages.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.theme.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

path_is_admin () é a função que em sua documentação é descrita como:

Determine se um caminho está na seção administrativa do site.

Considere que alguns caminhos relacionados ao nó, como node/<nid>/edit, podem ser incluídos na seção administrativa, dependendo da configuração encontrada em admin / aparência.

captura de tela

A lista dos caminhos do nó que podem ser incluídos nas páginas administrativas é retornada de node_admin_paths () .

  if (variable_get('node_admin_theme')) {
    $paths = array(
      'node/*/edit' => TRUE, 
      'node/*/delete' => TRUE, 
      'node/*/revisions' => TRUE, 
      'node/*/revisions/*/revert' => TRUE, 
      'node/*/revisions/*/delete' => TRUE, 
      'node/add' => TRUE, 
      'node/add/*' => TRUE,
    );
    return $paths;

Se, por qualquer motivo, você precisar evitar qualquer página com um caminho como node / *, precisará adicionar um código específico para evitá-los, se estiver usando path_is_admin(). Considere que qualquer módulo pode alterar as páginas consideradas parte das páginas administrativas.

Nos dois casos, a alternativa seria usar uma biblioteca, se o módulo implementasse hooks_library () com código semelhante ao seguinte.

function mymodule_library() {
  $path = drupal_get_path('module', 'mymodule');

  $libraries['mymodule.library'] = array(
    'title' => 'MyModule Library', 
    'version' => '1.0', 
    'js' => array(
      $path . '/mymodule.js' => array(),
    ), 
    'css' => array(
      $path . '/mymodule.css' => array(
        'type' => 'file', 
        'media' => 'screen',
      ),
    ),
  );

  return $libraries;
}

Nesse caso, a implementação anterior de hook_form_alter()se tornaria a seguinte.

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $form['#attached']['library'][] = array('mymodule', 'mymodule.library');
  }
}

Em vez de chamar drupal_add_js()e drupal_add_css(), o código deve chamar drupal_add_library('mymodule', 'mymodule.library').

O profissional do uso hook_library()é:

  • Dependências entre bibliotecas são tratadas automaticamente. É o que acontece no caso de system_library (), que define duas bibliotecas usando as seguintes definições.

      // Drupal's form library.
      $libraries['drupal.form'] = array(
        'title' => 'Drupal form library', 
        'version' => VERSION, 
        'js' => array(
          'misc/form.js' => array(
            'group' => JS_LIBRARY,
            'weight' => 1,
          ),
        ),
      );
    
      // Drupal's collapsible fieldset.
      $libraries['drupal.collapse'] = array(
        'title' => 'Drupal collapsible fieldset', 
        'version' => VERSION, 
        'js' => array(
          'misc/collapse.js' => array('group' => JS_DEFAULT),
        ), 
        'dependencies' => array(
          // collapse.js relies on drupalGetSummary in form.js
          array('system', 'drupal.form'),
        ),
      );

    As chamadas drupal_add_library('system', 'drupal.collapse')misc / collapse.js e misc / form.js seriam incluídas.

  • Os arquivos CSS associados à biblioteca seriam carregados automaticamente juntos os arquivos JavaScript.

  • Sempre que a biblioteca usasse mais arquivos JavaScript ou CSS, o código para incluir a biblioteca não mudaria; ainda estaria usando $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, ou drupal_add_library('mymodule', 'mymodule.library').

 

Não há necessidade de usar current_path () quando você pode usar arg () . Se o caminho para a página atual for admin / structure / block, então

  • arg(0) retornará "admin"
  • arg(1) retornará "structure"
  • arg(2) retornará "block"

Atualizar

hook_init()não é usado mais do Drupal 8. A alternativa para Drupal 8 está a utilizar hook_form_alter(), hook_page_attachments(), ou hook_page_attachements_alter(). hook_page_build()e hook_page_alter()não são mais usados ​​no Drupal 8.
O que eu disse sobre o uso de uma biblioteca JavaScript ainda é verdadeiro, mesmo que seja sugerido o uso #attachedpara anexar uma biblioteca (ou um arquivo Javascript ou arquivo CSS) a uma página. O Drupal 8 não permite mais anexar apenas arquivos JavaScript ou CSS a uma página; você sempre deve anexar uma biblioteca, com um conjunto de arquivos JavaScript e CSS, eventualmente feitos apenas de arquivos JavaScript ou CSS.


E se eu quiser adicionar em todas as páginas se eu quiser acessar o drupal "user_access ('acessar páginas de administração')"?
confiq

11
Substitua arg(0) == 'admin'por user_access('access administration pages').
kiamlaluno

4
A maneira correta de verificar se a página atual é uma página de administrador seria a path_is_adminfunção. Os caminhos de algumas páginas de administração não começam com 'admin'. Por exemplo, dependendo da configuração, as node/add/<content-type>páginas podem ser de configuração.
Pierre Buyle

Post incrível, super completo, obrigado por realmente abordar este, muito útil e apreciado.
DrCord

O comentário de Pierre Buyle é muito, muito útil!
Moshe Shaham 27/02

3

Aqui estão duas abordagens para adicionar JS / CSS às páginas.

Você pode adicionar JavaScript e CSS diretamente ao arquivo de modelo page.tpl.php, já que os arquivos de modelo são arquivos PHP, é possível verificar a URL usando arg () e apresentar de acordo.

Como alternativa, e melhor como é independente do tema, crie um módulo que implemente hook_init () e chame drupal_add_js () ou drupal_add_css () com base no current_path () .

Algo como o código a seguir funcionaria.

// Runs on every page load.
function mymodule_init() {
  // Check if current path is under "admin"
  if (substr(current_path(), 0, 5) == 'admin') {
    drupal_add_css('path/to/my/css');
    drupal_add_js('path/to/my/js');
  }
}

1

Criei um módulo usando as etapas descritas aqui: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Copiou o texto do módulo conforme descrito nessa página:

    function mymodule_preprocess_html(&$variables) {
// Add conditional stylesheets for admin pages on admin theme.
  if (arg(0)=="admin") {
    // reference your current admin theme  
    $theme_path = drupal_get_path('theme', 'commerce_kickstart_admin');
    // reference your own stylesheet    
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css', array('weight' => CSS_THEME));
  }
}

No entanto, a verificação do administrador estava com defeito quando eu (como uma das coisas) quis estilizar os botões de envio em todas as páginas, bem como o formulário de edição do nó. Como esse caminho vai para o nó / edição e não para o administrador, a verificação me fez coçar a cabeça por horas.

Então, eu vim com esta versão para criar meu módulo simples chamado admin_css.

admin_css.info

name = admin_css
description = Custom css alterations for editor interface
core = 7.x
version = 7.x-1.01

admin_css.module

function admin_css_preprocess_html(&$variables) {
    if (path_is_admin) {
        $theme_path = drupal_get_path('theme', 'seven');
        drupal_add_css(drupal_get_path('module', 'admin_css') . '/css/admin_css.css', array('weight' => 0));
    }
}

O que é diferente da resposta aqui é verificar se o caminho está na parte administrativa do site com path_is_admin em vez de usar arg . O uso de arg fez com que meu arquivo css não fosse carregado nas páginas de edição do nó e outras.


1

É considerado uma prática ruim adicionar JS e CSS hook_init(). Em vez disso, você usaria hook_page_build():

/**
 * Implements hook_page_build().
 */
function MYMODULE_page_build(&$page) {

  if (path_is_admin(current_path())) {

    drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/scripts/magic.js');
  }
}

1

Acabei de usar outro método que pode apelar para desenvolvedores front-end. Subtema seu tema de administrador preferido e adicione um simples:

scripts[] = myscripts.js

ao seu arquivo theme.info que contém o javascript necessário para suas páginas de administração. Se desejar, você pode adicionar mais substituições, pois isso herdará os recursos do seu tema de administrador favorito.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.