[wordpress]ウィジェットエリアでfooterを2カラムに

wordpress

wordpressのfooterをカスタマイズ。プラグインであるwelcartでサイトを作成しています。wordpressのウィジェット(widget)を追加し、footerをカスタマイズしたいいと思います。大きな画面のデバイスでは2カラム、小さい画面では1カラムで表示されるようにしました。

ちょっと大きすぎるなぁと思い、結局3カラムにしました。3カラムにする方法はこちら >>

2カラム

ウィジェットエリアを作る

welcartの場合、子テーマのfunction.phpに追記します。左右2つのエリア(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="box1" >',
			'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">Copyright©Online 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でカスタマイズすればデザインの幅が広がると思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください