Lognote

整体師によるお役立ち情報ブログ

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

2017-04-08

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。

STINGER7をご利用の方はこちらの記事をご覧ください。

STINGER8のフッターに3カラムウィジェットを設置

それでは実際にカスタマイズをおこなっていきます。

最終完成イメージ

全体のデザインは、CSSをSTINGER8用に変更しただけなので、以前のものと同じです。

PC表示

stinger8-footer-3column-customize-01

スマホ表示

stinger8-footer-3column-customize-02

ウィジェットに3カラム用ウィジェットを追加

まず、3カラム用のウィジェットを作成します。こちらはSTINGER7のときに紹介したものと同じです。

以下のコードをfunctions.phpに追加してください。

//フッターウィジェット追加
 register_sidebar( array(
 'id' => 'footer-left',
 'name' => 'フッター左',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));
 register_sidebar( array(
 'id' => 'footer-center',
 'name' => 'フッター中央',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));
 register_sidebar( array(
 'id' => 'footer-right',
 'name' => 'フッター右',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));

これで、ウィジェットが3つ増えたかと思います。

stinger8-footer-3column-customize-04

フッター(footer.php)のカスタマイズ

STINGER8は、コードがAFFINGER4ベースになっているので、STINGER7と少し構造が異なります。

以下にfooter.phpの全コードを紹介します。コピペして全て上書きすれば、当ブログと同じになります。

</div><!-- /contentw -->
<div id="foot-wrapper">
<footer>
<div id="footer">
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clearfix">
<div id="footer-in">
<?php //フッターメニュー
$defaults = array(
	'theme_location'  => 'secondary-menu',
	'container'       => 'div',
	'container_class' => 'footermenubox clearfix ',
	'menu_class'      => 'footermenust',
	'depth'           => 1,
);
wp_nav_menu( $defaults );
?>

	<p class="copy">Copyright&copy;
		<?php echo date( 'Y' ); ?>
		<?php bloginfo( 'name' ); ?>
		All Rights Reserved.</p>

</div>
</div>
</footer>
</div>
<!-- /#wrapperin -->
</div>
<!-- /#wrapper -->
</div><!-- /#st-ami -->
<!-- ページトップへ戻る -->
	<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
</div>
<!-- /#foot-wrapper -->
<?php wp_footer(); ?>
</body></html>
STINGERシリーズは、フッターにブログタイトルと説明文がありますが、その分フッターが縦に長くなるのが嫌いなので私は削除しています。必要な方は、以下のコードを残してください。
<div class="footer-wbox clearfix">

	<div class="footer-c">
		<!-- フッターのメインコンテンツ -->
		<p class="footerlogo">
		<!-- ロゴ又はブログ名 -->
			<?php if ( !is_home() || !is_front_page() ) { ?>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<?php } ?>
				<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
			<?php if ( !is_home() || !is_front_page() ) { ?>
				</a>
			<?php } ?>
		</p>

		<p>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
		</p>
	</div>
</div>

CSSで整える

最後にカスタマイズ用CSSを記述します。

.clearfix {
	clear: both;
}

/*--------------------------------------
フッター
--------------------------------------*/
#foot-wrapper {
	width: 100%;
	padding: 0 auto;
	margin: 0 auto;
	color: #fff;
	border-top: 1px solid #333;
	background-image: url("フッター背景画像URL");
}
#footer {
	max-width: 1060px;
	margin: 0 auto;
}
#footer textwidget p, #footer li {
	text-align: left;
}
#footer-in {
	margin-left: -5px;
}

/*--------------------------------------
フッターウィジェット
--------------------------------------*/
#footer h4.menu_underh2 {
	font-size: 18px;
	font-weight: 200;
	border-left: 6px solid #0489B1;
	padding: 3px 0 3px 6px;
	margin-bottom: 10px;
	text-align: left;
}
#footer>aside ul {
	float: left;
	width: 320px;
	padding: 10px 0;
	list-style-type: none;
}
#footer>aside .tagcloud a {
	font-size: 14px;
	line-height: 1em;
	background: #fff;
	color: #333;
	display: inline-block;
	white-space: nowrap;
	padding: 8px 8px;
	margin-top: 3px;
	text-decoration: none;
}
#footer>aside .tagcloud a:hover {
	background: #333;
	color: #fff;
}
#footer>aside .tagcloud a:before {
	font-family: "FontAwesome";
	content: "\f02b";
}

@media only screen and (min-width: 780px) {
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
#footer h4.menu_underh2 {
	font-size: 18px;
	font-weight: 200;
	border-left: 6px solid #0489B1;
	padding: 3px 0 3px 6px;
	margin-bottom: 10px;
	text-align: left;
}
	#footer>aside ul {
	float: left;
	width: 320px;
	padding: 10px;
	list-style-type: none;
}
p#subscribe-email input.required {
	width: 280px;
	float: left;
}
p#subscribe-submit {
	float: right;
	color: #333;
}
}
media Queriesの指定サイズは人によって異なる場合があるかもしれません。私はSTINGER7のときのサイズを使っているのですが、もしほかのサイズを指定している方は表示がうまくいかない可能性があります。

無料素材・デザイン参考サイト

壁紙や見出しのデザインは以下のサイトからお借りしています。

背景画像素材

見出しデザイン

オススメ商品はこちら!

-STINGER

この記事のタイトルとURLをコピーする
STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-newentry-toppage-hide-thumbnail

STINGER8サイドバーの「最近のエントリ」をトップページだけ非表示にする方法

STINGER8はコンテンツ部分がすでに新着記事一覧となっているので、サイドバーに最近のエントリを表示する意味はあまりありません。 STINGER7までは、管理 …

stinger8-404-and-search-customize-thumbnail

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。 この二つのページはあまり人の目に触れることの少ないページなので、結構おろそかにしている人 …

page-top-button-link-change-thumbnail

STINGER7の「ページトップへ戻るボタン」が一番上まで戻らなくなったときの修正方法

ヘッダーの横幅をこちらのサイトを参考に画面いっぱいに広げるカスタマイズをしました。  WebCraftLog  1 shareSt …

sns-follow-button-thumbnail

STINGER8の記事下にいいねボタンやフォロワー誘導ボックスをサムネ付きで設置する方法

本日は、STINGER8に上の画像のようなFacebookページのいいねボタンとTwitterのフォローボタンを、記事下に設置する方法のご紹介です。 Faceb …

stinger-pay-thumbnail

【悲報】WordPressブロガー人気テーマ「STINGER」シリーズが実質有料になる

先日、WordPressの人気テーマ「STINGER」シリーズが、STINGER8の公開とともにSTINGER PLUS+の公開を終了しました。 つまり、無料の …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士