Loading…

記事内にプロモーションが含まれています。

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ テーマ 伝えたいこと 備忘録

Stinger6のフッターに3カラムのウィジェットを追加する方法

Stinger7デモサイトスクショ

所要時間目安:3

This session is using  IPv4  is established in

この記事は2016年3月19日のものです。現在は状況が異なる可能性がありますのでご注意ください。

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ テーマ 伝えたいこと 備忘録

目次に行く・戻る

メルカリ招待コード:

Stinger7デモサイトスクショ

WordPressのテーマには多くのものがあります。

中でも無料のテーマでStingerがとても有名です。
かつ、
SEO的にも優れています。

また、
カスタマイズ性にも良いです。


この記事を読む方へのオススメ

そこで、

Stinger6、Stinger7のfooter部分にWidget(ウィジェット)を追加する方法です。

まずは、
function.phpを開きます。
(必ずバックアップしてから編集してくださいネ!!もし画面が真っ白になった場合でもFTPでバックアップしたものをアップロードすれば直りますので。)

アドセンス336pxPC閲覧記事下表示1つ目コード

その中に以下のコードを記載・記述します。

// フッターウィジェット追加
 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>',
 ));
 //ここまで

その後、
一度管理画面よりfooter部分にWidget(ウィジェット)が追加されたか確認します。

(しなくてもいいですが^^;)一応です)

WordPressfooterウィジェット追加画面

追加されていることを確認できたら、
最後にCSSでスタイルを調整します。

 

その前に、
footer.phpを以下のように変更します。

<footer id=”footer”>

この一番上の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="clear">

次に、

</footer>

部分を以下のようにします。

</div>
</footer>

 

最後に、

CSSでフッターの横並びを解除する為に以下のように、CSSで調整します。

でないと、
フッターメニューがウィジェットの横に長細く表示されてしまいます。
なので、divタグで横並びをクリアします。

CSS

/*——————————–
 フッターウィジェット
 ———————————*/
 footer>aside ul {
 float:left;
 width: 310px;
 padding: 10px;
 list-style-type:none;
 }

.clear {
 clear:both; /*floatの解除*/
 }

 

これで、
以下のように表示されるようになります。

footerウィジェット追加画像

 


参考サイト)

サイドバーには、ウィジェットを自由自在に設定できるけど、フッターにもウィジェットを追加したいよ!という向けです。この度、フッターにウィジェットを追加したので、その方法をメモ程度に残しておきます。(崩れてないよね?!)

WordPressのフッターにウィジェットを追加する方法を紹介します。

 

あなたにおすすめな関連記事

SMAP解散

伝えたいこと 備忘録 時事ネタ

SMAP解散撤回してくれないかな…。SMAPロスは中居君がなくしてくれるかな…。

言わずとも知られている国民的アイドルのSMAPが今年2016年12月31日で、解散してしまう…。1世代でもなく2世代、中には3世代にも渡ってファンです。 という方々も多いのではないでしょうか?ファンで…

もっと読む

インフィード広告アドセンス

カーナビテレビが見れなくなったICカードが正常に動作しませんでした

メンテナンス 伝えたいこと 備忘録

ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法

本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

もっと読む

インフィード広告アドセンス

Stinger7のように関連記事画像を丸く

WordPress カスタマイズ 伝えたいこと 備忘録

Stinger7の様に関連記事画像をStinger6でも丸くする方法

WordPressのテーマでStinger6がリリースされた頃に私はWordPressにてブログを始めてみました。 そう思っていたら、Stinger7がおおよそ1ヶ月半後にβ版としてリリースされました…

もっと読む

インフィード広告アドセンス

ロキソプロフェン

伝えたいこと 備忘録 時事ネタ 治療

ロキソニンに継ぎタミフル、メマリーなど新たな重篤な副作用が発覚この2年間で。

以前にも薬の副作用についてお話しましたが、 ロキソニンという解熱鎮痛剤が処方薬としてメジャーでした。ロキソニンの副作用報告については、以下の以前の記事を参照しください。そして、 メジャーだったが故に市…

もっと読む

インフィード広告アドセンス

SNS終わりの始まり

SNS 伝えたいこと 備忘録

SNS終わりの始まり…。それは何なのか。ソーシャルとは何なのか。

SNS(ソーシャル・ネットワーキング・サービス)・・・。 個人情報保護法・・・。 個人情報保護法ができたはずなのに、SNSというソーシャル・ネットワーキング・サービスと横文字を連ねたことにより比較的抵…

もっと読む

インフィード広告アドセンス

福島第一原発排気筒100兆ベクレル

伝えたいこと 備忘録 時事ネタ

原発排気筒の中は100兆ベクレル!って…。本当なの!?倒壊リスクなど。

今はもう…。原発と言うと、 東日本大震災の時の甚大な日本に及ぼした天災による被害のひとつであるということを思い浮かべる方も多いかと思われます。特に福島第一原子力発電所の1号機・2号機・3号機・4号機の…

もっと読む

Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Total290


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

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

-Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, テーマ, 伝えたいこと, 備忘録
-, , , ,

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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