もうじき大規模バージョンアップがあると言われているのにガマンできずにやっちまった…Stinger7には標準でフッターウィジェット付いてそうよね。
Stinger6のフッターに3カラムのウィジェットを追加する方法
お好みで1でも2でもお好きにしてください。
細かい説明は最後に書いた参考サイトさんの説明をみてくんさい。
functions.php
「外観」＞「テーマの編集」から「functions.php」をクリック。
いじる前にCtrl+Aで全テキストコピーしてどこかに保存しとくの忘れちゃダメだよ！油断したらページが真っ白になるからね。
子テーマに元々記述されている文字の下にこれ追加！
| // フッターウィジェット追加 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.php
Stinger6の子テーマにはfooter.phpが無いので、Stinger6のfooter.phpをコピーしてFTPソフトなどで子テーマのフォルダにペーストしてください。
次に「外観」＞「テーマの編集」から「footer.php」をクリックして編集していきます。こちらもバックアップ忘れずに。
| <footer id=”footer”> |
↑1行めにあるコレを以下のように変更
| <footer id=”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> |
フッターの横並びを解除しないとフッターメニューがウィジェットの横に長細ク表示されてしまうため、divタグで横並びをクリアしています。
CSS
「外観」＞「テーマの編集」から「style.css」をクリック
以下を追加します。
| /*——————————– フッターウィジェット ———————————*/ footer>aside ul { .clear { |
これで完了です！ウィジェットからいつものように色々追加してみてください。
↓こんな風になりましたか？
参考にさせていただいたサイト
WordPressのフッターにウィジェットを追加する方法 – WordPressの使い方と設定 – Webkaru
wordpressでフッターにウィジェットを追加する方法 | ポケットラボ
