現在の接続環境は
です

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

プロモーションを含みます

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

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

所要時間目安:3

This session is using  IPv4  is established in

今日は2025年6月5日です。

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

目次に行く・戻る

2025年6月5日 (木曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. シガーライターがない車にシガーライターソケット増設

    シガーライターがない車にシガーライターソケットの付け方と増設方法 5PV

    ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…

    もっと読む

  2. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 4PV

    エクストレイルT32型(NT32も含め)がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 3PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  1. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 30PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 29PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 22PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  1. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 16PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 10PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

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ウィジェット追加画像

 

メルカリ招待コード:

参考サイト)


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

 

あなたにおすすめ

Windows10サポート終了まで

Multiplex 広告

\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

あなたが訪問してから

0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

Total649


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

目次に戻る

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

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

目次に戻る

目次に戻る

新着コメント


コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.