HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

customizr フッターに背景画像を入れる

customizr のフッターに背景画像をいれたいのだけど?

もともと customizr のフッターには、これといった装飾はないっていない。

だから・・・


customizr フッターに背景画像を入れる


customizr/footer.php の footer ブロックを以下のように修正して、フッターのクラスをフックした。

<?php
 /**
 * The template for displaying the footer.
 *
 * フッタタイトル=inc/parts/class-footer-footer_main.php 232
 *
 * @package Customizr
 * @since Customizr 3.0
 */
	do_action( '__before_footer' ); ?>
		<!-- FOOTER -->
		<footer id="footer" class="<?php echo tc__f('tc_footer_classes', '') ?>footback">
		 	<?php do_action( '__footer' ); // hook of footer widget and colophon?>
		</footer>
		<?php
		wp_footer(); //do not remove, used by the theme and many plugins
	do_action( '__after_footer' ); ?>
	</body>
	<?php do_action( '__after_body' ); ?>
</html>

上では、 footback というクラスを追加したので、

customizr/style.css に footback クラスを追加する。

.footback{
background-image:url('http://~.com/wp/wp-content/uploads/~/~/footerimg400b.jpg') !important;
background-repeat:no-repeat !important;
background-color:#000 !important;
}

無論、!important をつけて他からの影響を排除する。

気を付けたいのは、customizr-child が入っているとき。

style.css は、customizr-child の方が優先なので、

customizr-child/style.css の方に上のクラスを入れないといけない。

フッタ背景のオリジナル


オリジナルのカスタマイズで背景色とか画像を変えるならば、customizr/inc/assets/css/tc_common.min.css 内の

footer#footer を書き直す。

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー