web-dev-qa-db-ja.com

JavaScriptファイルを管理ページに追加する

モジュールを使用して、すべての管理ページにJavaScript/CSSファイルを追加するにはどうすればよいですか？

7javascripttheming
17
Onita

モジュールを使用すると、次の2つの方法を実行できます。

最初の方法では、追加のJavaScript（またはCSS）ファイルを任意の管理ページに追加できますが、2番目の方法では、これらのファイルをフォームを含むページにのみ追加できます。

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';
  }
}

「mymodule」をモジュールの短い名前に置き換えます。 「mymodule.js」と「mymodule.css」を、JavaScriptファイルとCSSファイルの実際の名前に置き換えます。

system_init（） には、特定のファイルを管理ページに追加するための次のコードが含まれています。

  $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（） は、そのドキュメントで次のように説明されている関数です。

パスがサイトの管理セクションにあるかどうかを確認します。

Admin/appearanceにある設定によっては、node/<nid>/editなどの一部のノード関連パスが管理セクションに含まれる可能性があることを考慮してください。

screenshot

管理ページに含めることができるノードパスのリストは 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;

何らかの理由で、node/*のようなパスを持つページを回避する必要がある場合、path_is_admin()を使用している場合、それらを回避するために特定のコードを追加する必要があります。どのモジュールも、管理ページの一部と見なされるページを変更する可能性があることを考慮してください。

どちらの場合も、モジュールが hooks_library（） を次のようなコードで実装している場合は、ライブラリを使用することになります。

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;
}

この場合、以前のhook_form_alter()の実装は次のようになります。

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

drupal_add_js()およびdrupal_add_css()を呼び出す代わりに、コードはdrupal_add_library('mymodule', 'mymodule.library')を呼び出す必要があります。

hook_library()を使用する利点は次のとおりです。

  • ライブラリ間の依存関係は自動的に処理されます。これは、次の定義を使用して2つのライブラリを定義するsystem_library（）の場合に起こります。

      // 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'),
    ),
  );

    drupal_add_library('system', 'drupal.collapse')の呼び出し、misc/collapse.jsおよびmisc/form.jsの両方が含まれます。

  • ライブラリに関連付けられているCSSファイルは、JavaScriptファイルとともに自動的に読み込まれます。

  • ライブラリがより多くのJavaScriptまたはCSSファイルを使用するときはいつでも、ライブラリを含めるコードは変更されません。それでも$form['#attached']['library'][] = array('mymodule', 'mymodule.library');またはdrupal_add_library('mymodule', 'mymodule.library')を使用します。

arg（） を使用できる場合、 current_path（） を使用する必要はありません。現在のページのパスがadmin/structure/blockの場合、

  • arg(0)は"admin"を返します
  • arg(1)は"structure"を返します
  • arg(2)は"block"を返します

更新

Drupal 8から、hook_init()は使用されなくなりました。Drupal 8の代替は、hook_form_alter()を使用しています- hook_page_attachments() 、または hook_page_attachements_alter() 。 hook_page_build() および hook_page_alter() は、Drupal 8.では使用されなくなりました。
#attached を使用してライブラリ（またはJavaScriptファイル、またはCSSファイル）をページに添付するように勧められている場合でも、JavaScriptライブラリの使用について私が言ったことはまだ当てはまります。 Drupal 8では、JavaScriptまたはCSSファイルのみをページに添付することはできなくなりました。JavaScriptとCSSファイルのセットであり、最終的にはJavaScriptまたはCSSファイル。

25
kiamlaluno

JS/CSSをページに追加する2つの方法を次に示します。

テンプレートファイルはPHPファイルであるため、JavaScriptとCSSをテンプレートファイルpage.tpl.phpに直接追加できます。 arg（） を使用してURLを確認できますそれに応じて提示します。

または、テーマに依存しないため、より良い hook_init（） を実装するモジュールを作成し、以下に基づいて drupal_add_js（） または drupal_add_css（） を呼び出します。 current_path（） 。

次のコードのようなものが機能します。

// 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');
  }
}
3
Jason Smith

hook_init()からJSとCSSを追加することは悪い習慣だと考えられています。代わりに 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
leymannx

フロントエンドの開発者にとって魅力的な別の方法を使用しました。 Subtheme 好みの管理テーマを作成し、シンプルなものを追加します：

scripts[] = myscripts.js

管理ページに必要なJavaScriptを含むtheme.infoファイルに追加します。必要に応じて、オーバーライドを追加できます。これは、お気に入りの管理テーマのリソースを継承するためです。

1
Screenack

ここで説明されている手順を使用してモジュールを作成しました： http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

そのページに記述されているようにモジュールのテキストをコピーしました：

    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));
  }
}

しかし、私が（1つのこととして）すべてのページの送信ボタンとノード編集フォームのスタイルを設定したいと思ったとき、管理チェックに問題がありました。そのパスは管理者ではなくノード/編集に行くので、チェックにより何時間も頭を悩ませました。

そこで、このバージョンを思いついて、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));
    }
}

ここでの答えと異なるのは、パスがサイトの管理部分にあるかどうかをargを使用する代わりに path_is_admin で確認することです。 argを使用すると、css-fileがnode-editページや他のページに読み込まれなくなりました。

1
Valross.nu