DRILL LANCER
フォーラムへの返信
-
投稿
-
cssの順番をまとめたり変更したりはしています。
あと、使用しているプラグインがcssを追加したりしています。
参考までに私がCSSやJSに行った機能を書いておきます。
また、状況を再現したサイトはhttps://test02.rick-addison.com/です。/** * アクションを操作 */ function lightning_change_action() { remove_action( 'wp_enqueue_scripts', 'lightning_addJs' ); remove_action( 'wp_enqueue_scripts', 'lightning_css' ); remove_action( 'wp_head', 'lightning_output_keycolor_css', 1 ); remove_action( 'wp_head', 'lightning_print_css_common', 2 ); } add_action( 'after_setup_theme', 'lightning_change_action' ); /** * フィルタを操作 */ function lightning_change_filter() { add_filter( 'jetpack_enable_open_graph', '__return_false' ); } add_action( 'after_setup_theme', 'lightning_change_filter' ); /** * テーマのCSSを読み込む */ function lightning_enqueue_styles() { // 不要なCSSを削除. wp_deregister_style( 'wp-jquery-ui-dialog' ); wp_deregister_style( 'font-awesome' ); // CSSを読み込む. wp_enqueue_style( 'jquery-ui-core', get_stylesheet_directory_uri() . '/library/jquery/css/jquery-ui.min.css', array(), '1.12.1' ); if ( '5_WebFonts_CSS' === get_option( 'vk_font_awesome_version' ) ) { wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/library/fontawesome/5.6.3/css/all.min.css', array(), '5.6.3' ); } if ( '4.7' === get_option( 'vk_font_awesome_version' ) ) { wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/inc/font-awesome/versions/4.7.0/css/font-awesome.min.css', array(), '4.7.0' ); } wp_enqueue_style( 'icomoon', get_stylesheet_directory_uri() . '/library/icomoon/style.css', array(), '5.6.3' ); wp_enqueue_style( 'prism.js', get_stylesheet_directory_uri() . '/library/prism.js/css/prism.css', array(), LIGHTNING_THEME_VERSION ); wp_enqueue_style( 'lightning-common-style', get_template_directory_uri() . '/assets/css/common.css', array(), LIGHTNING_THEME_VERSION ); wp_enqueue_style( 'lightning-theme-style', get_template_directory_uri() . '/style.css', array( 'lightning-design-style' ), LIGHTNING_THEME_VERSION ); wp_enqueue_style( 'lightning-child-theme-style', get_stylesheet_directory_uri() . '/style.css', array( 'lightning-woo-style' ), LIGHTNING_THEME_VERSION ); } add_action( 'wp_enqueue_scripts', 'lightning_enqueue_styles' ); /** * テーマのJavaScriptを読み込む */ function lightning_enqueue_scripts() { // 不要なJavaScriptを削除. wp_deregister_script( 'jquery' ); wp_deregister_script( 'jquery-migrate' ); wp_deregister_script( 'jquery-ui-core' ); wp_deregister_script( 'jquery-ui-widget' ); // JavaScriptを読み込む. wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/library/jquery/js/jquery.min.js', array(), '3.3.1', true ); wp_enqueue_script( 'jquery-migrate', get_stylesheet_directory_uri() . '/library/jquery/js/jquery-migrate.min.js', array( 'jquery' ), '3.0.1', true ); wp_enqueue_script( 'jquery-ui-core', get_stylesheet_directory_uri() . '/library/jquery/js/jquery-ui.min.js', array( 'jquery' ), '1.12.1', true ); if ( '5_SVG_JS' === get_option( 'vk_font_awesome_version' ) ) { wp_enqueue_script( 'font-awesome', get_stylesheet_directory_uri() . '/library/fontawesome/5.6.3/js/all.min.js', array(), '5.6.3' ); } wp_enqueue_script( 'lightning-js', get_template_directory_uri() . '/assets/js/lightning.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION, true ); wp_enqueue_script( 'clipboard.js', get_stylesheet_directory_uri() . '/library/clipboard.js/js/clipboard.min.js', array(), '2.0.0', true ); wp_enqueue_script( 'prism.js', get_stylesheet_directory_uri() . '/library/prism.js/js/prism.js', array( 'clipboard.js' ), '1.15.0', true ); } add_action( 'wp_enqueue_scripts', 'lightning_enqueue_scripts' ); /*-------------------------------------------*/ /* Lightning custom color Print head /* * This is used for Contents and Plugins and others /*-------------------------------------------*/ function lightning_child_output_keycolor_css() { $options = get_option( 'lightning_theme_options' ); $colors_default = array( 'color_key' => empty( $options['color_key'] ) ? '#337ab7' : $options['color_key'], 'color_key_dark' => empty( $options['color_key_dark'] ) ? '#2e6da4' : $options['color_key_dark'], ); $colors = apply_filters( 'lightning_keycolors', $colors_default ); $types = array( '_bg' => 'background-color', '_txt' => 'color', '_border' => 'border-color', ); reset( $colors ); $dynamic_css = '/* ltg theme common */'; foreach ( $colors as $k => $v ) { reset( $types ); foreach ( $types as $kk => $vv ) { $dynamic_css .= ".{$k}{$kk},.{$k}{$kk}_hover:hover{{$vv}: {$v};}"; } } // delete before after space $dynamic_css = trim( $dynamic_css ); // convert tab and br to space $dynamic_css = preg_replace( '/[\n\r\t]/', '', $dynamic_css ); // Change multiple spaces to single space $dynamic_css = preg_replace( '/\s(?=\s)/', '', $dynamic_css ); wp_add_inline_style( 'lightning-design-style', $dynamic_css ); } add_action( 'wp_head', 'lightning_child_output_keycolor_css', 1 ); /*-------------------------------------------*/ /* Print head /*-------------------------------------------*/ function lightning_child_print_css_common() { $options = get_option( 'lightning_theme_options' ); $dynamic_css = ''; // 全幅ウィジェット等を使用した際にWindowsで横スクロールバーが出る対策( Charm 2.2.2 / Variety 2.3.2 以降リリースしたら削除) $dynamic_css = 'html, body { overflow-x: hidden; }'; if ( isset( $options['color_key'] ) && isset( $options['color_key_dark'] ) ) { $color_key = ( ! empty( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7'; $color_key_dark = ( ! empty( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4'; $dynamic_css .= ' .bbp-submit-wrapper .button.submit, .woocommerce a.button.alt:hover, .woocommerce-product-search button:hover, .woocommerce button.button.alt { background-color:' . $color_key_dark . ' ; } .bbp-submit-wrapper .button.submit:hover, .woocommerce a.button.alt, .woocommerce-product-search button, .woocommerce button.button.alt:hover { background-color:' . $color_key . ' ; } .woocommerce ul.product_list_widget li a:hover img { border-color:' . $color_key . '; } .veu_color_txt_key { color:' . $color_key_dark . ' ; } .veu_color_bg_key { background-color:' . $color_key_dark . ' ; } .veu_color_border_key { border-color:' . $color_key_dark . ' ; } .btn-default { border-color:' . $color_key . ';color:' . $color_key . ';} .btn-default:focus, .btn-default:hover { border-color:' . $color_key . ';background-color: ' . $color_key . '; } .btn-primary { background-color:' . $color_key . ';border-color:' . $color_key_dark . '; } .btn-primary:focus, .btn-primary:hover { background-color:' . $color_key_dark . ';border-color:' . $color_key . '; } '; } // if ( isset($options['color_key'] && isset($options['color_key_dark'] ) { /* Child list hidden /*-------------------------------------------*/ if ( isset( $options['sidebar_child_list_hidden'] ) && $options['sidebar_child_list_hidden'] ) { $dynamic_css .= '/* sidebar child menu display */ .localNav ul ul.children { display:none; } .localNav ul li.current_page_ancestor ul.children, .localNav ul li.current_page_item ul.children, .localNav ul li.current-cat ul.children{ display:block; }'; } if ( $dynamic_css ) { // delete br $dynamic_css = str_replace( PHP_EOL, '', $dynamic_css ); // delete tab $dynamic_css = preg_replace( '/[\n\r\t]/', '', $dynamic_css ); // multi space convert to single space $dynamic_css = preg_replace( '/\s(?=\s)/', '', $dynamic_css ); wp_add_inline_style( 'lightning-design-style', $dynamic_css ); } } add_action( 'wp_head', 'lightning_child_print_css_common', 2 ); /** * レンダリングブロックしているJavascriptの読み込みを遅らせる by 寝ログ */ function move_scripts_head_to_footer_ex() { // ヘッダーのスクリプトを取り除く. remove_action( 'wp_head', 'wp_print_scripts' ); remove_action( 'wp_head', 'wp_print_head_scripts', 9 ); remove_action( 'wp_head', 'wp_enqueue_scripts', 1 ); // フッターにスクリプトを移動する. add_action( 'wp_footer', 'wp_print_scripts', 5 ); add_action( 'wp_footer', 'wp_print_head_scripts', 5 ); add_action( 'wp_footer', 'wp_enqueue_scripts', 5 ); } add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );スキンはLightning Skin SampleをベースにLightning Skin Varietyの要素を取り入れたものを使用しています。
siteContent セクションの記述は概ね削除しています。
(col-md-xxとmainSectionやsubSectionのdivをネスト化することでbootstrap側のマージンを確保しているため)使用しているbootstrapのバージョンは3.3.7です。bootstrapのjsはスキン側に統合しました。
P.S.
Lightning bbPress Extensionを有効化したり無効化したりすると表示されなかったり表示されたりします。P.P.S.
bootstrap 3.4.0をベースにするとスライドショーが概ね動こかなくなり
bootstrap 4.2.xをベースにするとスライドショー等のデザインが崩れました。P.P.P.S.
このテーマではフッターでJQuery UIが読み込まれますが、使用しているのでしょうか？
私が使用している他のテーマでは読み込まれませんでした。LightningのインラインCSSで
.prBlock_icon { color: #337ab7; }が定義されていて
VK All in One Expansion Unitのstyle.cssで.prBlock_icon { color: #fff; }が定義されています。
私の環境では
①LightningのインラインCSS
②VK All in One Expansion Unitのstyle.css
の順に読み込まれていて、.prBlock_icon { color: #fff; }の方が採用されました。
確かFontAwesome5.0でメールアイコンの文字列が変更されたと思います。
<i class="fa fa-envelope fa-fw"></i>
で表示されるはずです。
もしくはこのリンクの先から使いたいのを選ぶと良いでしょう。そうですか、今までのテーマで非常に使いやすいテーマだったのですが、
ソースコードが思った以上に複雑だったのでびっくりしました。
メジャーバージョンアップで対応するとのことなので
Lightningのv7.0.0を楽しみにお待ちしております。
それでは失礼します。提案ですが、以下のようにすればカスタマイズ性が向上しより使いやすく成ると思います。
マージによって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が出ています。https://getbootstrap.com/docs/4.1/migration/
上記にBS3とBS4の差分が書かれています。
執筆で使いそうなものはbuttonとtable関連だと思われますが・・・ちなみに、子テーマのCSSはどのタイミングで読み込まれますか？
