コアのJavascriptとCSSをテーマで使用する

テーマのテンプレートファイルから、テーマのスタイルシートやJavascriptをインクルードする方法がいかにシンプルなものであるかはすでにご紹介しました。concrete5コアのJavascriptやCSSファイルも、同じ方法で読み込むことが可能です。

<!— コアのjQueryをテーマで使用する —>
<script type="text/javascript" src="<?=ASSETS_URL_JAVASCRIPT?>/js/jquery.js"></script>

可能ですと太字にした理由は、これは最適な方法ではないからです。ページに配置したブロックが表示にjQueryを必要としていた場合は？この方法だと、ブロックは、テーマですでにjQueryが読み込まれているのかどうか、判別することができません。同じファイルが２回読み込まれてしまうのはまだ良い方で、ページのリクエストが増えるだけですが、悪い場合には同じJavascriptが２回読み込まれることでエラーを起こし、concrete5のインターフェースが動かなくなってしまうこともあります。

コアのJavascriptやCSSをテーマで使用したい場合は、より良い方法が用意されています。それは、concrete5のアセットシステムを活用することです。concrete5のアセットシステムは、JavascriptやCSSファイルをグループで管理し、２回読み込まれて干渉することや不要なファイルが読み込まれることを防ぎます。また、アセットシステムは複数のファイルを結合して圧縮することができ、サイトの表示速度の向上に貢献します。concrete5はこのアセットシステムはすべてのコアのJavascriptとCSSファイルを読み込むのに使用しています。

以上の理由で、先頭で紹介した方法でコアのJavascriptやCSSを読み込むのは避けてください。代わりに、次の方法で同じことがかのうです。concrete/config/app.php を開いてください。このファイルは、concrete5の様々な設定を定義しているファイルで、CSSやJavascriptなどのアセットについても定義されています。これらは "aseets" というキーで連想配列として定義されています。この配列の中から、jQueryを探してみましょう。最初にあります。

    'jquery'
        => array(
        array(
            'javascript',
            'js/jquery.js',
            array('position' => Asset::ASSET_POSITION_HEADER, 
        'minify' => false, 'combine' => false)
        )
    ),

最初の配列のキー（jquery）はアセットのハンドルです。内側の配列の最初のキー（javascript）は、アセットの種類です。

次に、Font Awesomを探してみましょう。

    'font-awesome'             => array(
        array('css', 'css/font-awesome.css', array('minify' => false))
    ),

このアセットでは、"font-awesome" がアセットのハンドルで、"css" が種類です。

さて、これら2つのアセットのハンドルとタイプを調べられましたので、テーマからこれらを読み込んでみましょう。この設定には、PageTheme クラスを使用します。以前のチュートリアルで作成した page_theme.php を開き、次のコードを追加してください。

public function registerAssets()
{
    $this->requireAsset('css', 'font-awesome');
    $this->requireAsset('javascript', 'jquery');
}

PageTheme クラスが継承している \Concrete\Core\Page\Theme\Theme クラスの requireAsset メソッドを使うことができます。この指定によって、このテーマを使用しているページではjQueryのJavascriptとFont AwesomeのCSSが読み込まれるようになります。コア機能が重複してこれらのアセットを呼び出すことはありません。

原文：Requiring Core JavaScript or CSS in a Theme