こんにちは、長友です。
今回はレイアウトファイルの修正方法について解説します。
Magento1との違い
Magento1から大きく変わった点は、local.xmlがなくなったことです。
Magento1では各種変更点をlocal.xmlにまとめて書くことができましたが、Magento2ではlocal.xmlがなくなったため、修正をするにはそれぞれのxmlファイルを作成したテーマ内にコピーしてきたファイルで上書きすることになります。
レイアウトファイルの修正方法
cssファイルとjsファイルの追加と削除を例に修正方法を以下にまとめます。
静的ファイルの追加（JavaScriptやCSS、フォント）
まず、「default_head_blocks.xml」を作成したテーマ内にコピーします。
対象ファイル：app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
コピー先：app/design/srontend/ベンダー/テーマ/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--ローカルファイルの追加方法-->
<css src="css/my-styles.css"/>
<!--ローカルのJavaScriptファイルを追加するには、以下の2通りの方法があります-->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!--外部ファイルの追加方法-->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
外部のリソースを追加指定する場合、src_typeを src_type=”url” にする必要があります。
JavaScriptファイルを追加するには、＜link src=”js/sample.js”/> または ＜script src=”js/sample.js”/> のどちらかを使用することができます。
静的ファイルの削除（JavaScriptやCSS、フォント）
静的ファイルを削除するには、次のような変更を行います。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--ローカルファイルの削除-->
<remove src="css/styles-m.css" />
<remove src="my-js.js"/>
<remove src="Magento_Catalog::js/compare.js" />
<!--外部ファイルの削除-->
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
</head>
</page>
変更点をひとつのファイルにまとめることができなくなったことは少し不便に感じますが、Magento2ではこのように必要なファイルを作成したテーマ内にコピーして上書きするという方法になりましたのでぜひ参考にしてみてください。