Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

2021年:インバウンド業界は復活の目途が立たず失業の危機!現実逃避でブログをSwellでリニューアル。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

もっと大きく分けたい場合は2カラムはいかが?

ウィジェットエリア
INDEX

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

子テーマのfunction.phpに追記します。左中右3つのエリア(3カラム)を作ります。

//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真ん中のウィジェット',
		));
		
		register_sidebar(array(
			'id' => 'org-3',
			'name' => 'footer右',
			'before_widget' => '<div class="box3" >',
			'after_widget' => "</div>",
			'description' => 'footer右側のウィジェット',
		));
	}
);

ウィジェットのテンプレートを作る

footer.phpに直接書いても良いと思うのですが、私の場合はウィジェットのテンプレートを作る事にしました。

任意の名前.phpを作成します。そこに、先ほど作成したウィジェット3つを配置します。

<div id="new-foot">
<?php if(is_active_sidebar('org-1','org-2','org-3')) : ?>
		<div id="my_widget-1">
		<?php dynamic_sidebar('org-1'); ?>
		</div>
        <div id="my_widget-2">
		<?php dynamic_sidebar('org-2'); ?>
		</div>
        <div id="my_widget-3">
		<?php dynamic_sidebar('org-3'); ?>
		</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で左中右に3カラムにする

子テーマのstyle.cssに追記します。大きな画面のデバイスでは3カラム、小さい画面では1カラムで表示されるようにしました。

@media screen and (min-width: 38.75em) {
#my_widget-1,#my_widget-2,#my_widget-3{width:30%;float:left;}
#my_widget-1,#my_widget-2{margin-right:5%;}
}

ウィジェットを追加する

作った左右のエリアにウィジェットをドロップして登録します。

footerを3分割できたと思います。後は自由にCSSでカスタマイズして下さい。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる