bootstrapのjsとlightning.min.jsの関係について

[DRILL LANCER]

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

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

[石川＠Vektor,Inc.]

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

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

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

[DRILL LANCER]

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

• この返信は5年、 4ヶ月前にDRILL LANCERが編集しました。

[石川＠Vektor,Inc.]

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

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

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

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

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

[DRILL LANCER]

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

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

[DRILL LANCER]

提案ですが、以下のようにすればカスタマイズ性が向上しより使いやすく成ると思います。
マージによって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を読み込む

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

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

[DRILL LANCER]

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

[石川＠Vektor,Inc.]

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

いろいろと変更したいとは思うのですが、既存で既に２万以上のウェブサイトが稼働しており、
スキンシステムや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 );
}

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

[DRILL LANCER]

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

[投稿者]

投稿