LightningのPR Blockのfontawesomeについて
LightningのPR Blockのfontawesomeについて
- このトピックには10件の返信、2人の参加者があり、最後に
により5年、 10ヶ月前に更新されました。
-
投稿
-
LightningのPR Blockのfontawesomeが表示されません。
通常時なら下記の記述がなされていますが、
<i class="fas fa-check font_icon prBlock_icon"></i>
これだとfontawesomeのアイコンが表示されません。しかし、開発者ツールで下記のように記述を変えると
<i class="fas fa-check"></i>
位置はずれるものの正常に表示されます。おそらくfontawesomeのアイコンが白い円の中の下敷きになって
隠れてしまっているのが原因と考えられるので修正をお願いします。P.S.
ExUnitのPR Blockに関する記述を削除したら正常に表示されました。確認しましたがちょっとこちらで再現しないので該当URLを見ていないのでわかりませんが、Font Awesome のバージョン違いか、プラグインがFontAwesomeの別バージョンを読み込んでいたりしませんか？
一度ご確認ください。
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; }の方が採用されました。
該当の箇所は Lightningに固定で埋め込まれている Lightning トップページ PR Block ですか？
それとも ExUnit のウィジェットの PR Block ですか？ExUnit のウィジェットの PR Block の場合はアイコン背景は「塗りつぶし」ですか「背景なし」ですか？
※塗りつぶしの場合は背景に色がついている前提なので、アイコンフォントは白指定になり、背景に指定した色が白だと両方白で見えないような状態にはなります。ふーむ、通常はプラグインの方が先に読み込まれるんですけどねぇ…。
特別順番しても入れてないし。何故だろう…。
wp_headの中身を改変（CSSをまとめたり順番を変更）するSEO系のプラグインとか使ってたりしますか？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 Pro」の子テーマのCSS
- （それにぶら下がる「Lightning トップページ PR Block」のインラインCSS）
- VK All in One Expansion Unitのstyle.css
私の環境でもこちらの環境でも
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また、上記のように
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のスタイルも同様に押し上げられ
上記のような問題が発生してしまったのではと考えております。個人的にはこれで解決済みとさせていただきますが、対応するかどうかはおまかせします。
LiteningのPR BlockとVK All in One Expansion UnitのPR Blockでは微妙に違いが有るようです。
LiteningのPR Block<div class="prBlocks prBlocks-default row"> <article class="prBlock prBlock_lighnt col-sm-4"> <a href="（略）"> <div class="prBlock_icon_outer"> <i class="fas fa-check font_icon prBlock_icon"></i> </div> <h1 class="prBlock_title">タイトル</h1> <p class="prBlock_summary">説明</p> </a> </article> （略） </div>VK All in One Expansion UnitのPR Block
<article class="veu_prBlocks prBlocks row"> <div class="prBlock col-sm-4"> <div class="prBlock_icon_outer" style="（略）"> <i class="far fa-file-alt font_icon prBlock_icon" style="（略）"></i> </div> <h1 class="prBlock_title">タイトル</h1> <p class="prBlock_summary">説明</p> </div> （略） </article>そう考えれば、
LiteningのPR Blockのセレクタの指定はSASSぽく書けば
.prBlocks.prBlocks-default .prBlock{（中身のアイコン等のスタイル）}
と指定でき、VK All in One Expansion UnitのPR Blockは
.prBlocks.veu_prBlocks .prBlock{（中身のアイコン等のスタイル）}
と指定できます。
これを利用して２つのPR Blockのスタイリングを完全に分けてしまうのも手かもしれません。P.S.
個人的には.prBlocks-defaultクラスを使わずに.ltg_prBlocksクラスを使いたいですね。
.prBlocks.ltg_prBlocks .prBlock{（中身のアイコン等のスタイル）}
.prBlocks.veu_prBlocks .prBlock{（中身のアイコン等のスタイル）}
となって美しい（？）ですから
- このトピックに返信するにはログインが必要です。
