Bootstrap 4をMagento 2テーマに追加する方法は？

回答:

23

カスタムテーマでBootstrap 4をMagento 2.2.3（テスト済み）以上に追加するには、以下の手順に従います

1）Webフォルダー内のブートストラップcssファイル

注：THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

default_head_blocksのブートストラップcssファイルを呼び出します

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

CSSを追加する

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!--Bootstrap css-->
        <css src="css/bootstrap.css" />
    </head>
</page>

2）個人が機能しないため、個別ではなくバンドル形式でJsファイルを追加する

ここからbootstrap.bundle.jsファイルをダウンロードできます 

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js

Bootstrap Jsをrequirejs-config.jsに呼び出します

THEME_LOCATION\Magento_Theme\requirejs-config.js

のコード 

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

既に存在するスクリプトタグの後に、header.phtmlに以下のコードを追加します

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

コード：

<script type="text/javascript">require(['bootstrap']);</script>

以下のコマンドを実行：

php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

注：Magento 2.2.3および最新バージョン2.2.6でテスト済み。2.3.3でもテスト済み

更新：ここからコンパイルされたブートストラップをダウンロードし、バンドルjsを使用します

— マノジ・デスワル
ソース
はい、ありがとう。この解決策を試してみます。ところで、bootstrap.bundle.jsとbootstrap.jsの違いは何ですか？
— Magecode
Popper.jsは、バンドルjsファイルに含まれて.....とjQueryは、Magentoの内側にすでにある....ポッパーだけでは動作しませんが、それはバンドルとして使用して動作します
— ManojさんDeswal
@MagecodeはMagento 2.2.4で動作しますか？
— マノジデズワル
1
私はついにそれを考え出した...私の代わりのMY_THEME /ウェブ/ JSでJSを置いMY_THEME / Magento_Theme /ウェブ/ JS申し訳ありませんイム
— ブラック
1
これは2.2.3以前の標準的な動作方法でしたが、2.2.3では動作せず、上記の方法を発見しました。しかし、それはまだ2.3.2で動作します....あなたがそれをした方法は適切な方法です
— マノジ・デスワル
11

この方法でBootstrapを追加できます。以下の手順に従って ください：注：このソリューションは、Magento 2.2.3以降では機能しません。

1）JSとCSSを下の場所に配置します

/ app / design / frontend / vendor-name / theme-name / web / css

/ app / design / frontend / vendor-name / theme-name / web / js

2）default_head_blocks.xmlのファイルを呼び出します

app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml

これらのコード行を追加します

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

3）以下のコマンドを実行する 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
— マユール・ラトッド
ソース
そして、Magento 2.2.3以降ではどのように機能しますか？
— ブラック
6

bowerパッケージマネージャーを使用して、テーマWebフォルダーにブートストラップ4を追加する必要があります。

どうして？ 常に更新され、管理が簡単だからです。更新コマンドを実行すると、Bootstrap 4が更新されます。

また 、ブートストラップ4でLESSまたはSCSSを使用することを好みます。その堅牢でリファクタリングが容易です。

以下の手順に従って、bowerをインストールします。

1）https://nodejs.org/en/からそれぞれのOSにLTS nodeJSをインストールします

2）bowerパッケージマネージャーをグローバルにインストールします。 npm install -g bower

3）https://git-scm.com/gitからインストールします

4）ブートストラップ4をインストールします。

でwebあなたのMagentoのカスタムテーマのディレクトリ

例：ターミナルを開く <Magento root>/app/design/frontend/MyCustom/theme/web/

次のコマンドを実行して、ブートストラップ4をインストールします。 bower install bootstrap4

5）この後、デフォルトのレイアウトノードにフォント、ブートストラップCSSおよびブートストラップJSを追加Magento_Themeして、カスタムテーマのモジュール内のすべてのページでブーストラップを機能させる必要があります。

gulpを使用してSCSSをCSSにコンパイルします。

— アナント
ソース
bowerパッケージマネージャーの使用方法
— Magecode
ここからリンクをダウンロードする必要があります：リンク。Linuxを使用している場合は、それぞれのパッケージマネージャーを使用します。次に、次のコマンドを使用してbowerをインストールしますsudo npm install -g bower。bowerをインストールしたら、テーマディレクトリにjs / cssパッケージをインストールしますapp/design/frontend/My/Theme/
— 。– Ananth
ここで、デフォルトのインストールディレクトリを.bowerrc構成ファイルbower_componentsをweb使用するように変更する必要があります。
— アナント
1
バウアーはもはや関係ないと思う。Bowerチームは、フロントエンドプロジェクトにYarnまたはWebpackまたはParcelを使用することを推奨しています。
— ファージン
package.jsonBootstrap 4の最初のファイルを開くと、files配列キーが表示されている場合、一致するファイルタイプのみがプロジェクトディレクトリに追加されることが示されます。filesキーはBowerコマンドでのみ使用されます。Bootstrapに貢献したり再コンパイルしたい場合は、Yarnを試してください。不要なファイル/ディレクトリがプロジェクトに追加されるためです。WebpackとParcelは、フロントエンドで使用するJavaScriptにコンパイルするノードプロジェクト用です。
— アナンス
5

上記の回答を読んだ後、別の提案があります：Bootstrap 4をモジュールに入れ、代わりにCDNを使用してBootstrapファイルをリンクします。

基本的なモジュールの作成方法を知っていると思います。そうでない場合は、こちらを参照してください。手順は次のとおりです。

  • app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xml次のコードでファイルを作成します。

    <?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link rel="stylesheet"  type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />   
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
    </head>
</page>

  • モジュールをアクティブにしてsetup:upgradeコマンドを実行するだけです！

利点：

  1. テーマがアクティブか非アクティブかに関係なく、すべてのテーマに一度に適用します
  2. システムにファイルをダウンロードする必要はありません
  3. 更新がとても簡単です。必要に応じて行う必要があるのは、CDNリンクを置き換えるだけです。Bootstrap 5、6、7に更新する場合、ファイルをコンパイルおよび置換する必要はありません。
  4. 1つの簡単なコマンドでブートストラップを有効または無効にできます。
  5. 何もオーバーライドする必要はありません。すべてが現在のコードの上にあります。
  6. 時間がかかる可能性のある静的デプロイを実行する必要はありません

Magento 2.2.4でテスト済みですが、Magento 2.Xのすべてのバージョンで動作するはずです。EDIT *は、リンクタグhrefをsrcに変更して、devdocsとインラインになりました。参照：

— PY Yick
ソース
CDNは時々遅くなることがあります。
— ファージン
私が得るThe attribute 'integrity' is not allowed.
— ブラック
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.