メインテンプレートファイルにコードを貼り付けるだけですか、またはDrupal 7に新しいJqueryプラグインをアタッチする他の推奨される方法はありますか?
最も簡単な方法は、テーマの.infoファイルに追加することです。
scripts[] = js/my_jquery_plugin.js
唯一の例外は、Jamie Hollernが説明しているように、外部リソース(CDN /ホストされたスクリプト)を追加する場合で、その場合はdrupal_add_js()を使用する必要があります。
DrupalにはJqueryがパッケージされています。
Jsファイルを追加するには、他の投稿で説明されている方法でdrupal_add_jsを使用できます。
これは単純なケースで機能しますが、他のプラグインに依存するプラグインを使い始めた場合。 libraries api を確認することをお勧めします。人気のライブラリをサポートするためにモジュールが作成される予定です。組み込みのJQuery UIがいくつかあります system_library() を参照してください。
この例では、jQuery ui.accordionモジュールを含める drupal_add_library() を使用できます。
drupal_add_library('system', 'ui.accordion');
これにより、CSSとそれに依存するライブラリとともにjsが含まれるようになります。また、ライブラリが1回だけ含まれることも確認します。
使用しているライブラリを指定すると、その定義方法のサンプルコードを提供できます
したがって、最初にライブラリを定義するモジュール(qtipと呼びます)を作成し、モジュールフォルダーの下のjsフォルダーにモジュールをアップロードします。
次に hook_library() を実装します
function qtip_library() (
$libraries['qTip'] = array(
'title' => 'qTip',
'website' => 'http://craigsworks.com/projects/qtip/docs/',
'version' => '1.0.0-rc3',
'js' => array(
drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
),
'dependencies' => array(
array('system', 'jquery'),
),
);
return $libraries;
}
次に、コードに追加したファイルを追加します
drupal_add_library('qtip', 'qtip');
これは単純なライブラリではやり過ぎかもしれませんが、複数のサイトやテーマで多数のライブラリを管理する必要がある場合は、作業がはるかに簡単になります。
すべてではなく一部のページでのみスクリプトをロードする場合は、template.phpファイルを使用してスクリプトを追加できます。次のようなコードを追加するだけです。
function YourTheme_preprocess_node(&$variables) {
$node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
// here you can esily add more pages
) {
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
}
}
Drupal 6。
Js Injector モジュールを使用して、スクリプトをDrupal管理パネルに直接追加できます。または、 drupal_add_js() 関数を使用してjsを追加できますあなたのページにファイルします。
Drupalサイトで使用しているテーマにJavaScriptファイルを追加するには、使用しているテーマの.infoファイルに_script[] =
_行を追加します。これを検討しますカスタマイズされたテーマ、または名前が変更された既存のテーマの変更バージョンを使用している場合のみ。たとえば、Garlandを使用している場合は、そのようにすることはお勧めしません。そのような場合に実行すると、すべて失われますテーマが更新されるたびに変更するか、更新されたテーマファイルをコピーしてから、以前のバージョンのファイルに適用されたのと同じ変更を再適用します。変更が_script[]
_行のみを追加している場合は、変更は最小限であり、実行する価値があるかもしれませんが、JavaScriptファイルがテーマファイルを含むディレクトリに追加されないか、テーマが更新されるたびにJavaScriptファイルを追加する必要があることも意味します。
別の方法として、カスタムモジュールを作成するか、そのサイトで既に使用している既存のカスタムモジュールにコードを追加できます。
プロは、サイトで有効になっているすべてのテーマを変更する必要なく、デフォルトで設定されているすべてのテーマまたは管理テーマにJavaScriptファイルが追加され、ユーザーが自分で選択できることを示しています。
別の回答ですでに報告されているように、 hook_init()
は、実装する必要があるフックです。 hook_library()
は、Drupal 7で追加されたjQueryプラグインなどのJavascriptファイル用の新しいフックです。
単純なカスタムモジュールを作成し、その方法で追加できます。コードは次のようになります。
MYMODULE_init() {
drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}
論理条件を適用したい場合は、単にYOURTHEME_preprocess_theme()
で使用できます。
drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');
yourtheme.infoファイルにも追加します。
scripts[] = js/yourplugin.js
Contextモジュールを使用している場合は、Context Add Assetsをインストールします。グローバルコンテキストまたは特定のコンテキストをセットアップし、新しいリアクションを追加して、パスまたはモジュールごとにJSアセットを追加します。
コーディングは必要ありません。
今日含まれる必要がある多くの外部ライブラリがあります。
それらすべてをテーマのjsディレクトリの下に置くことは、それらのライブラリが複数のjsファイルと複数のcssファイルで構成される場合があるため、常に望ましいとは限りません。
libraries_get_path
ライブラリモジュールの機能を使用して、sites/all/libraries dirからパスを取得します。
以下は、textext.jsに関連する選択したファイルを追加する方法です。
<?php
function MYMODULE_init() {
// Add jQuery library to a specific page.
if (arg(0) == 'messages' && arg(1) == 'new') {
// Add the jQuery TextExt library ( http://textextjs.com/ )
$libdir = libraries_get_path('jquery-textext');
drupal_add_js("$libdir/src/js/textext.core.js");
drupal_add_js("$libdir/src/js/textext.core.js");
drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
drupal_add_js("$libdir/src/js/textext.plugin.Prompt.js");
drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");
drupal_add_css("$libdir/src/css/textext.core.css");
drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
drupal_add_css("$libdir/src/css/textext.plugin.Prompt.css");
drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
}
} ?>
これらのライブラリーがすべて事前定義されている外部リポジトリーがあるかどうかを知りたいので、それぞれを手動で定義する必要はありません。
これは私にとってうまくいきました、jQueryプラグイン用のモジュールを作成したり、インストールしたりする必要はありません-私が追加した私のtemplate.phpに:
function YOURTHEME_js_alter(&$javascript){
// overwriting for newer jQuery version
$javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
// also the min...
$javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
// here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
$javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(
"group" => -100,
"weight" => -18.990,
"version" => "1.1.0",
"every_page" => true,
"type" => "file",
"scope" => "header",
"cache" => true,
"defer" => false,
"preprocess" => true,
"data" => path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
);
}
パブリックGoogle CDNからjQueryをロードすることをお勧めします。詳細については、このリンクを確認してください: http://code.google.com/apis/libraries/devguide.html#jquery 。サイトに同じスクリプトを複数回読み込まないでください。