DRILL LANCER
フォーラムへの返信
-
投稿
-
また、上記のように
wp_add_inline_style( 'lightning-common-style', $custom_css );
と引っ掛ける先を変えなくてもLightning bbPress Extensionの
function ltg_bbp_load_css() { wp_enqueue_style( 'lightning-bbp-extension-style', plugin_dir_url( __FILE__ ) . 'css/style.css', array( 'lightning-theme-style' ), LTG_BBP_EXT_VERSION ); } add_action( 'wp_enqueue_scripts', 'ltg_bbp_load_css' );を
function ltg_bbp_load_css() { wp_enqueue_style( 'lightning-bbp-extension-style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), LTG_BBP_EXT_VERSION ); } add_action( 'wp_enqueue_scripts', 'ltg_bbp_load_css' );にしても正常に表示されるようになりました。
おそらく、Lightning bbPress Extensionの上記の関数が
lightning-theme-styleをプラグインのCSSの上に押上げ、
その結果それに引っかかるように
wp_add_inline_style( 'lightning-theme-style', $custom_css );
で設置されたLightning PR Blockのスタイルも同様に押し上げられ
上記のような問題が発生してしまったのではと考えております。個人的にはこれで解決済みとさせていただきますが、対応するかどうかはおまかせします。
現在は子テーマのCSSに
@media (min-width: 541px){ .veu_childPage_list .childPage_list_box { width: 48%; display: block; } }を追加して
display: flex;の諸々を無効化しています。私の環境でもこちらの環境でも
VK All in One Expansion Unitのstyle.cssよりも後にlightning-pro/assets/css/common.css
が読み込まれるようなので、Lightning トップページ PR BlockのCSSは/** * LightningのPR Blockのスタイル. */ function lightning_child_front_pr_blocks_styles() { global $lightning_theme_options; $options = $lightning_theme_options; if ( isset( $options['front_pr_display'] ) && $options['front_pr_display'] ) { if ( isset( $options['color_key'] ) && $options['color_key'] ) { $color_key = $options['color_key']; } else { $color_key = '#337ab7'; } $custom_css = " .prBlock_icon_outer { border:1px solid {$color_key}; } .prBlock_icon { color:{$color_key}; } "; wp_add_inline_style( 'lightning-common-style', $custom_css ); } } add_action( 'wp_enqueue_scripts', 'lightning_child_front_pr_blocks_styles' );のようにlightning-common-styleに引っ掛けるのが有効だと思われます。
参考までに私の環境でも試しました。
https://test02.rick-addison.comこのページでも下記の順に読み込まれているようです。
- 「Lightning Pro」の子テーマのCSS
- （それにぶら下がる「Lightning トップページ PR Block」のインラインCSS）
- VK All in One Expansion Unitのstyle.css
私は Lightning Skin Charm を持っていないので詳しいことは言えません。
しかし、私が所持しているLightning Skin Varietyと同じ作りであるとすれば、
wp-content/plugins/lightning-skin-charm/skin-active.php
あたりでそういう設定をしているものと思われます。CSSの
.sampleRow{}には何が書かれていますか？
ひょっとしたらそこに原因があるかもしれません。P.S.
あなたのサイトのURLを掲示してもらった方が解決が早くなると思います。
難なら新しくテスト用のサブドメインを取得し、テストサイトを構築し、同じ環境（記事データ以外）を再現してみると良いでしょう。
一応記事データとしてはテストデータなるものも存在しているのでそれをインポートしてみるのも良いでしょう。ひょっとしたらこういうことなのでしょうか？
https://test02.rick-addison.com/2115.html
上記の様な状態なら私も発生しています。Bootstrapのグリッドシステムは
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4">サンプルサンプル</div> <div class="col-xs-12 col-sm-8">サンプル</div> </div> </div>で1セットです。
<div class="row sampleRow">の外側に
<div class="container">～</div>か
<div class="container-fluid">～</div>か
があることを確認してみてください。@charset "utf-8"; /* Theme Name: Lightning Pro Child Theme URI: Template: lightning-pro Description: Lightning Pro の子テーマです。 Author: Tags: Version: 0.1.2 */私は上記コードをstyle.cssに書くことででいけましたが・・・
格納したディレクトリ（フォルダ）名はlightning-pro-childにしています。ひょっとして、メモ帳やWordで編集したのではないでしょうか？
WordPressのテーマを編集する際は文字エンコードをUTF-8（BOMなし）で保存する必要があるため、等のテキストエディタで編集する必要があります。
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>
で表示されるはずです。
もしくはこのリンクの先から使いたいのを選ぶと良いでしょう。
