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

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

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

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

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

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

スポンサーリンク

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

// フッターウィジェット追加
 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（ウィジェット）が追加されたか確認します。

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

追加されていることを確認できたら、
最後に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の解除*/
 }

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

目次に戻る

参考サイト）

wordpressでフッターにウィジェットを追加する方法

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

ポケットラボ

WordPressのフッターにウィジェットを追加する方法

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

WordPressの使い方と設定 - Webkaru

他のウィジェット追加方法

WordPress記事中最初のH2見出し前に広告を自動挿入方法

WordPressで記事の途中に思い通りの広告などをショートコードなどによって、 挿入する方法はいくつかあります。今回は、 記事中の始めのh2タグの前にウィジェット

WordPressブログカードEmbedで実装方法

WordPressがバージョン4.4になってから、 はてなブログのようなブログカード風のリンク先が、エディタのビジュアル画面の投稿画面にURLを入力するだけでブログカー