VWSとは フォーラム Lightning [ 解決済 ] bootstrapのjsとlightning.min.jsの関係について

[ 解決済 ] bootstrapのjsとlightning.min.jsの関係について

このトピックには8件の返信が含まれ、2人の参加者がいます。10 ヶ月、 3 週間前 RICK さんが最後の更新を行いました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #14009

    RICK
    参加者

    bootstrapとfontawesomeを子テーマ側で自前で準備したものに置き換えたい


    上記のトピックでbootstrapのcssについては解決しましたが、
    bootstrapのjsはlightning(-pro)/assets/lightning.min.jsにマージされているようです。
    lightning.min.jsに別バージョンのbootstrapを適用する場合どのようにすればいいのか教えていただければ幸いです。

    #14027

    kurudrive
    キーマスター

    あー・・・そうですね・・・

    これはbootstrapのjsをマージしないで別ファイルを読み込む方式にテーマを変更しないと無理ですね・・・

    テーマ側でちょっと改修しますね。

    #14032

    RICK
    参加者

    現在bootstrapのcssはスキンに内蔵、jsはテーマに内蔵という形をとっているようですが、
    テーマならテーマ、スキンならスキンとどちらかに統一したほうが
    後々の混乱を招かずに済むと思うのですがいかがでしょうか?

    • この返信は11 ヶ月前に  RICK さんが編集しました。
    #14034

    kurudrive
    キーマスター

    CSSは、今の段階のものはBS3をベースに作られているので、bootstrapのバージョン違いと組み合わせるとどうしても見た目の不具合の出るところがあると思います。
    なので、もともと BS3をベースに開発したスキンなのにBS4に変更されて「表示がおかしくなるんですよー」みたいな状況になるとキツイなと。それもあってbootstrapのcssはあらかじめマージした状態でスキンに入れてます。

    BS4にしたいとは思ってますが、全体をBS4に変更すると今まで本文欄などにBS3を前提とした書き方をしてる人に影響が出るので、
    例えばデフォルトスキンの Origin についても 現行の BS3版とBS4版のCSSを追加する事は検討しています。

    JSについてはそうですねー・・・

    確かにテーマに入れてるので、今後バージョン違いになる事はありますが…

    んー・・・js部分についてはどのスキンでも使うので、
    やはりテーマ側に入れておいて、ユーザーがフックで外して切り替えたりできるようにして、
    スキンでBS4版が用意出来てきたら、管理画面でBSのjsのバージョン指定もできるようにしようかなと思ってます。

    #14037

    RICK
    参加者

    https://getbootstrap.com/docs/4.1/migration/
    上記にBS3とBS4の差分が書かれています。
    執筆で使いそうなものはbuttonとtable関連だと思われますが・・・

    ちなみに、子テーマのCSSはどのタイミングで読み込まれますか?

    #14054

    RICK
    参加者

    提案ですが、以下のようにすればカスタマイズ性が向上しより使いやすく成ると思います。
    マージによってBSのCSSが上書きされていた場合は読み込む量が増えるかもしれませんが・・・

    ①管理画面でbootstrapのバージョンを指定する。(v3・v4・・・)

    ②BSオプションを条件に
    BS3の場合はBS3のv3.3.7のbootstrap.min.cssとbootstrap.min.js(とbootstrap-theme.min.css)
    BS4の場合はBS4のv4.1.3のbootstrap.min.cssとbootstrap.bundle.min.js(←popper.jsをマージしたもの)を読み込む
    (BS5が登場した場合も同様)

    ③bootstrapの後にfontawesomeやicomoon等のテーマやスキン以外のCSS・JSを読み込む

    ④親テーマ共通(全スキン共通とも)のCSS(上記以外)を読み込む

    ⑤BSオプションとスキンオプションを条件にBS3用・BS4用それぞれに対応したのスキンのCSS・JSを読み込む

    ⑥子テーマのCSS・JSを読み込む

    ⑦②~⑥は1つの関数にまとめ、この関数は子テーマ側でオーバーライド可能にする

    P.S.
    fontawesomeは5.6.1が出ています。

    #14055

    RICK
    参加者

    さらに追記
    メインカラムとサイドバーの関係は
    BS3の場合はpushやpull
    BS4の場合はorder
    使用したほうがシンプルになると思います。

    #14065

    kurudrive
    キーマスター

    ご提案ありがとうございます。

    いろいろと変更したいとは思うのですが、既存で既に2万以上のウェブサイトが稼働しており、
    スキンシステムやhtmlの構造などに手を入れると受託案件でカスタマイズして使っている方に結構影響が出るので、回避するための処理をいろいろ入れたり、入れてもそれが原因で不具合が発生したりと(FontAwesomeのバージョン切り替え機能を入れた時もそんなに重くないだろうと思って着手したが地獄絵図になった)、対応工数が結果的にかなりかかるので、ちょっと今の段階では他の優先順位の高い実装・不具合修正もあり手を出せない状況です。

    取り急ぎjsの読み込み分離に関して構造変更しましたので、
    以下のようなコードにて変更可能になります。

    function my_after_setup_function() {
    	// Lightningで読み込んでいるJSの処理を解除する
    	remove_action( 'wp_enqueue_scripts', 'lightning_addJs' );
    	// JS読み込みの処理を新たに追加する
    	add_action( 'wp_enqueue_scripts', 'my_lightning_addJs' );
    }
    add_action( 'after_setup_theme', 'my_after_setup_function' );
    
    function my_lightning_addJs() {
    	// Bootstrap4のJSを読み込み
    	wp_enqueue_script( 'bootstrap4-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js', array( 'jquery' ), '4.1.3', true );
    	// 標準のjsを読み込み
    	wp_enqueue_script( 'lightning-js', get_template_directory_uri() . '/assets/js/lightning.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION, true );
    }

    せっかくご提案いただいたのにご希望に添える回答が出来ず恐れ入ります。
    次にスキンシステム変更を含むメジャーバージョンアップの際にいただいたご提案を参考にさせていただきます。

    #14067

    RICK
    参加者

    そうですか、今までのテーマで非常に使いやすいテーマだったのですが、
    ソースコードが思った以上に複雑だったのでびっくりしました。
    メジャーバージョンアップで対応するとのことなので
    Lightningのv7.0.0を楽しみにお待ちしております。
    それでは失礼します。

9件の投稿を表示中 - 1 - 9件目 (全9件中)

このトピックに返信するにはログインが必要です。