Loading…

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

Stinger7デモサイトスクショ

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

本日の人気記事BEST10

所要時間目安:3


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

Stinger7デモサイトスクショ

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のフッターにウィジェットを追加する方法を紹介します。

 

スポンサーリンク

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


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

ジェネリック医薬品

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

ジェネリック薬一覧、(後発医薬品一覧)そして先発医薬品との違い

もう多くの方がご存知だと思われますが、 黒柳徹子さんのCMでお馴染みとなったジェネリック医薬品という薬があります。 まずは、 よく読まれている人気記事一覧 人気記事 車のキーナンバー確認方法。キーレス…

もっと読む

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

FFFTP

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

FFFTP1.99最新バージョン正式版がリリースされました

FTPソフトと言えば? Windows98の頃からある(昔)からあるffftp(FFFTP)だと思います。 IBMホームページビルダーなど有償アプリケーションなどには基本的にメーカーが作成したFTPソ…

もっと読む

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

小林麻耶

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

小林麻耶さんパニック障害とか出てるけど体調が気になる…。

(アイキャッチ画像は、「小林麻耶オフィシャルブログ「まや☆日記」Powered by Ameba」のスクショより。) 小林麻耶さんが2016年5月19日放送されたフジテレビのバイキング生放送中に途中退…

もっと読む

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

2匹のネコ

WordPress 伝えたいこと 備忘録

SEOに強いのはBloggerとWordPressどっちなのか

昨今、(というか結構前から)言われているSEOですが…。 そのSEOについて、 良く言われるのがWordPressが良いと言われています。 また、 GoogleのサービスであるBloggerというブロ…

もっと読む

目次に戻る

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

せきららの
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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