wordpressのfooterをカスタマイズ。プラグインであるwelcartでサイトを作成しています。wordpressのウィジェット(widget)を追加し、footerをカスタマイズしたいいと思います。大きな画面のデバイスでは2カラム、小さい画面では1カラムで表示されるようにしました。
ちょっと大きすぎるなぁと思い、結局3カラムにしました。
あわせて読みたい
[WordPress]ウィジェットエリアでfooterを3カラムに
wordpressのプラグインであるwelcartでサイトを作成しています。wordpressのウィジェット(widget)を追加し、footerをカスタマイズしたいいと思います。大きな画面のデバ…
INDEX
ウィジェットエリアを作る
welcartの場合、子テーマのfunction.phpに追記します。左右２つのエリア（2カラム）を作ります。
//widget 追加
add_action(
'widgets_init',
function(){
register_sidebar(array(
'id' => 'org-1',
'name' => 'footer左',
'before_widget' => '<div class="box1" >',
'after_widget' => "</div>",
'description' => 'footer左側のウィジェット',
));
register_sidebar(array(
'id' => 'org-2',
'name' => 'footer右',
'before_widget' => '<div class="box2" >',
'after_widget' => "</div>",
'description' => 'footer右側のウィジェット',
));
}
);
ウィジェットのテンプレートを作る
footer.phpに直接書いても良いと思うのですが、私の場合はウィジェットのテンプレートを作る事にしました。
任意の名前.phpを作成します。そこに、先ほど作成したウィジェット2つを配置します。
<div id="new-foot">
<?php if(is_active_sidebar('org-1','org-2')) : ?>
<div id="my_widget-left">
<?php dynamic_sidebar('org-1'); ?>
</div>
<div id="my_widget-right">
<?php dynamic_sidebar('org-2'); ?>
</div>
</div>
<?php endif; ?>
ウィジェットエリアをfooterに配置する
子テーマのfooter.phpのバックアップを取ってから書き換えます。この場合は、welcartのテーマVOLLの場合です。
ページ名の所に.phpは不要です。
<?php
/**
* @package Welcart
* @subpackage Welcart Voll
*/
?>
</div><!-- #main -->
<?php if(! wp_is_mobile()): ?>
<div id="toTop" class="wrap fixed"><a href="#masthead"><i class="fa fa-angle-up" aria-hidden="true"></i></a></div>
<?php endif; ?>
<footer id="colophon" role="contentinfo">
<div class="inner cf">
<?php get_template_part( '任意のページ名' ); ?>
</div><!-- .inner -->
<p class="add">CopyrightcOnline Shop All Rights Reserved.</p>
</footer><!-- #colophon -->
</div>
<?php wp_footer(); ?>
</body>
</html>CSSで左右に2カラムにする
子テーマのstyle.cssに追記します。大きな画面のデバイスでは2カラム、小さい画面では1カラムで表示されるようにしました。
@media screen and (min-width: 38.75em) {
#my_widget-left,#my_widget-right{width:45%;}
#my_widget-left{float:left;}
#my_widget-right{float:right;}
}ウィジェットを追加する
作った左右のエリアにウィジェットをドロップして登録します。
とりあえず、footerを2分割できたと思います。後は自由にCSSでカスタマイズすればデザインの幅が広がると思います。
コメント ※ハンドルネームでお願いします