Lognote

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

stinger8-footer-3column-customize-thumbnail

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

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

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

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

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

最終完成イメージ

全体のデザインはCSSをSTINGER8用に変更しただけなので以前と変わりません。

PC表示

stinger8-footer-3column-customize-01

スマホ表示

stinger8-footer-3column-customize-02

タグクラウドと上へ戻るボタンもカスタマイズしていますが、そちらはまた別の記事で紹介したいと思います。

インスタグラムギャラリーはSnapWidgetを使用しています。

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

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

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

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

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

stinger8-footer-3column-customize-04

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

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

以下のコードはfooter.phpの全コードになっているので、コピペするだけで大丈夫です。

</div><!-- /contentw -->
<div id=&quot;foot-wrapper&quot;>
<footer>
<div id=&quot;footer&quot;>
<!–フッターウィジェット–>
<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=&quot;clearfix&quot;>
<div id=&quot;footer-in&quot;>
<?php //フッターメニュー
$defaults = array(
	'theme_location'  => 'secondary-menu',
	'container'       => 'div',
	'container_class' => 'footermenubox clearfix ',
	'menu_class'      => 'footermenust',
	'depth'           => 1,
);
wp_nav_menu( $defaults );
?>

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

</div>
</div>
</footer>
</div>
<!-- /#wrapperin -->
</div>
<!-- /#wrapper -->
</div><!-- /#st-ami -->
<!-- ページトップへ戻る -->
	<div id=&quot;page-top&quot;><a href=&quot;#wrapper&quot; class=&quot;fa fa-angle-up&quot;></a></div>
<!-- ページトップへ戻る 終わり -->
</div>
<!-- /#foot-wrapper -->
<?php wp_footer(); ?>
</body></html>

※ブログタイトルとディスクリプションが必要な場合

私はブログタイトルと説明文がフッターにあるのが嫌いなので削除しています。必要な方は以下のコードを残してください。

	<div class=&quot;footer-wbox clearfix&quot;>

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

			<p>
				<a href=&quot;<?php echo esc_url( home_url( '/' ) ); ?>&quot;><?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(&quot;フッター背景画像URL&quot;);
}
#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: &quot;FontAwesome&quot;;
	content: &quot;\f02b&quot;;
}

@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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

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

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

stinger8-404-and-search-customize-thumbnail

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

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

stinger-pay-thumbnail

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

先日、WordPressの人気テーマ「STINGER」シリーズが、STINGER8の公開とともにSTINGER …

STINGER6のタイトルロゴにGoogle Web Fontsを使う方法

STINGER6のタイトルロゴをGoogle Web Fontsを使ってカスタマイズする方法のご紹介です。 こ …

stinger8-newentry-toppage-hide-thumbnail

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

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


comment

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

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