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


8

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

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

回答:


7

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

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

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

次に、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

お役に立てれば


2
またJHtml::stylesheet("mod_EXAMPLE/style.css", array(), true)、ロードmedia/mod_EXAMPLE/css/style.css(追加css/部分に注意)とJHtml::script("mod_EXAMPLE/script.js", false, true)ロードmedia/mod_EXAMPLE/js/script.js(追加js/部分に注意)を行うこともできます。
Flimm

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

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

JHtml輸入CSSに使用してJSファイルではなく、しなければならないaddStyleSheetaddScriptdocs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder

@Lodderいいえ、それはいけません。ポイントのパラメータということであるJHtml::script()とは、JHtml::stylesheet()変更された:docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2
Farahmand

@Lodderあなたの参照についてJHtml offers much more flexibility than JDocument, whilst using the same base functionality - indeed at the end of the day JHtml will call JFactory::getDocument()->addStyleSheet() or JFactory::getDocument()->addScript().
ファラーマンド2014

1
@Fariパラメータが2.5から変更されただけで、1.5の方法のサポートが削除されました。3.xパラメータを使用すると、2.5で正常に動作します。また、あなたが参照したJoomla Docsページを書いたので、人々がスクリプトを簡単に上書きできるようにメディアフォルダーにコンテンツを配置する場合はJHtmlを使用することを強くお勧めします(JDocumentでは不可能なことです)。あなたが言うようにそれは強制的ではありませんが。
ジョージウィルソン

1
@GeorgeWilson上記のリンクで述べたように、If you wish to just include a straight file path, in a template for example, then you are better using JDocument. However if you wish to take into account whether debug is enabled to include a compressed script or take advantage of template overridable scripts and stylesheets then using JHtml is generally better. It is recommended all 3rd Party Developers use JHtml to allow template overrides of their CSS and javascript for template designers.J!サイト開発者はJDocumentを使用し、サードパーティのパブリックエクステンション開発者はJHtmlを使用できます。
Farahmand 2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.