Loading…

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

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

 

スポンサーリンク

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

WordPressで記事の途中に思い通りの広告などをショートコードなどによって、 挿入する方法はいくつかあります。今回は、 記事中の始めのh2タグの前にウィジェット
WordPressがバージョン4.4になってから、 はてなブログのようなブログカード風のリンク先が、エディタのビジュアル画面の投稿画面にURLを入力するだけでブログカー

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


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

おすすめの記事一部広告

関連記事

yogiboヨギボー

伝えたいこと 備忘録

yogibo快適で動けなくなってしまうソファーヨギボー!!

  去年末の日本での発売と思っていましたが、 既に2014年年末の日本国内販売でした。 そ…

もっと読む

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

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

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

本日ではなく昨日になってしまいますが、 それまでカーナビで地デジ対応のナビで突然エンジンをかけなおし…

もっと読む

Stinger6右サイドバー上に別広告

AdSense Stinger6 WordPress カスタマイズ

Stinger6右サイドバー上に別広告を表示する方法

はぁ…。 やっと、できた!! って何がという感じですが、 とても使い勝手の良いテーマStingerの…

もっと読む

AMP化対応スマホ画像

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

AMP化対応したらアクセス数増えるの減るの?減ったのは気のせい?

先日、一応記事としてAMP化対応方法に関して記載いたしました。 AMP化対応方法 AMP化対応完全版…

もっと読む

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

おすすめ!!

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

おすすめ2

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

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



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

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる

comment

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

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