VWSとは フォーラム Lightning LightningのPR Blockのfontawesomeについて

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

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

    RICK
    参加者

    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に関する記述を削除したら正常に表示されました。

    #14597

    kurudrive
    参加者

    確認しましたがちょっとこちらで再現しないので該当URLを見ていないのでわかりませんが、Font Awesome のバージョン違いか、プラグインがFontAwesomeの別バージョンを読み込んでいたりしませんか?

    一度ご確認ください。

    Lightningでアイコンフォントが 文字化けする原因と修正方法

    #14600

    RICK
    参加者

    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;
    }
    

    の方が採用されました。

    #14601

    kurudrive
    参加者

    該当の箇所は Lightningに固定で埋め込まれている Lightning トップページ PR Block ですか?
    それとも ExUnit のウィジェットの PR Block ですか?

    ExUnit のウィジェットの PR Block の場合はアイコン背景は「塗りつぶし」ですか「背景なし」ですか?
    ※塗りつぶしの場合は背景に色がついている前提なので、アイコンフォントは白指定になり、背景に指定した色が白だと両方白で見えないような状態にはなります。

    #14604

    RICK
    参加者

    該当箇所はLightning トップページ PR Blockです。
    ExUnit のウィジェットの PR Blockについては試していません。

    #14615

    kurudrive
    参加者

    ふーむ、通常はプラグインの方が先に読み込まれるんですけどねぇ…。
    特別順番しても入れてないし。何故だろう…。
    wp_headの中身を改変(CSSをまとめたり順番を変更)するSEO系のプラグインとか使ってたりしますか?

    #14618

    RICK
    参加者

    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が読み込まれますが、使用しているのでしょうか?
    私が使用している他のテーマでは読み込まれませんでした。

    • この返信は1 ヶ月、 2 週間前に  RICK さんが編集しました。
    • この返信は1 ヶ月、 2 週間前に  RICK さんが編集しました。
    #14728

    RICK
    参加者

    このページでも下記の順に読み込まれているようです。

    1. 「Lightning Pro」の子テーマのCSS
    2. (それにぶら下がる「Lightning トップページ PR Block」のインラインCSS)
    3. VK All in One Expansion Unitのstyle.css
    #14739

    RICK
    参加者

    私の環境でもこちらの環境でも
    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

    • この返信は1 ヶ月、 1 週前に  RICK さんが編集しました。
    #14757

    RICK
    参加者

    また、上記のように
    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のスタイルも同様に押し上げられ
    上記のような問題が発生してしまったのではと考えております。

    個人的にはこれで解決済みとさせていただきますが、対応するかどうかはおまかせします。

    • この返信は1 ヶ月、 1 週前に  RICK さんが編集しました。
    • この返信は1 ヶ月、 1 週前に  RICK さんが編集しました。
    #14962

    RICK
    参加者

    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{(中身のアイコン等のスタイル)}
    と指定できます。
    これを利用して2つのPR Blockのスタイリングを完全に分けてしまうのも手かもしれません。

    P.S.
    個人的には.prBlocks-defaultクラスを使わずに.ltg_prBlocksクラスを使いたいですね。
    .prBlocks.ltg_prBlocks .prBlock{(中身のアイコン等のスタイル)}
    .prBlocks.veu_prBlocks .prBlock{(中身のアイコン等のスタイル)}
    となって美しい(?)ですから

    • この返信は1 ヶ月前に  RICK さんが編集しました。
11件の投稿を表示中 - 1 - 11件目 (全11件中)

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