web-dev-qa-db-ja.com

CSS / JSファイルをカスタム拡張に含める最良の方法

CSSまたはJSファイルをカスタム拡張に含める必要がある場合、これを達成するための最良かつ最も安全な方法は何ですか。

  1. 拡張Zipファイルの特定のフォルダーに配置する必要がありますか？
  2. XMLマニフェストでファイルを宣言するにはどうすればよいですか？
  3. Joomlaヘッダーにファイルを含める方法（必要な場合のみ）
developmentextensionsxml
8
Bogowoe

最善の方法は、メディアフォルダを使用することです。したがって、最初にモジュールフォルダーにmediaというフォルダーを作成する必要があります。

注：このフォルダーは、インストール後ではなく、インストール前に作成する必要があります。

メディアフォルダー内に、cssとjsの2つのサブフォルダーを作成します。これは必須ではありませんが、物事を分離しておくほうがいいです。

次に、XMLファイルに以下を追加します。

<media folder="media" destination="mod_EXAMPLE">
    <folder>css</folder>
    <folder>js</folder>
</media>

変化する mod_EXAMPLEあなたのモジュールが何であれ。

インストール時に、メディアフォルダーは自動的に移動され、次のようになります。

JOOMLA_ROOT/media/mod_EXAMPLE/js

そして

JOOMLA_ROOT/media/mod_EXAMPLE/css

これまではモジュールについて言及してきましたが、コンポーネントについても同様です。

ファイルを呼び出すには、拡張機能のdefault.phpファイルに次のコードを追加します。

JHtml::_('stylesheet', JUri::root() . 'media/mod_EXAMPLE/css/style.css');  // For CSS files
JHtml::_('script', JUri::root() . 'media/mod_EXAMPLE/js/script.js');       // For JS files

お役に立てれば

7
Lodder

  1. あなたの拡張機能はコンポーネントだと思います。最善の方法は、mediaおよびadminディレクトリの横にsiteディレクトリを作成することです。次に、js、css、imgファイルを次のように別々のディレクトリに配置します。

    index.html
YOUR_COMPONENT_NAME.xml
[+] admin
[+] site
[-] media
   [-] js
      main.js
      index.html
   [+] css
   [+] img

    フォルダーには空のindex.htmlファイル。

  2. XMLマニフェスト（YOUR_COMPONENT_NAME.xml）では、次のようにmediaファイルを宣言できます。

    <media destination="com_YOUR_COMPONENT_NAME" folder="media">
    <filename>index.html</filename>
    <folder>css</folder>
    <folder>js</folder>
    <folder>img</folder>
</media>

  3. デフォルトのビュー（default.php）を編集し、これらの行を追加して、ファイルをJoomla！に含めます。頭：

    $document = JFactory::getDocument();
$document->addStyleSheet(JUri::base() . 'media/com_YOUR_COMPONENT_NAME/css/main.css');
$document->addScript(JUri::base() . 'media/com_YOUR_COMPONENT_NAME/js/main.js');
$test_image_url = JUri::base() . 'media/com_YOUR_COMPONENT_NAME/img/test.jpg';
2
Farahmand