Stinger5、WordPressです。
フッターに色んなコンテンツを追加したいので、
3つのセクションに分けてみました。
フッターを3分割する、3カラムにカスタマイズ
これ、結構難しかったです。
何度もやり直して、ようやく出来ました。
先に参考にしたサイトをご紹介しておきます。
【Stinger5カスタマイズ】レスポンシブデザインに合せた変更にチャレンジ！フッターカスタマイズのついでにね。
http://www.empowerments.jp/stinger5%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%EF%BC%9B%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E5%90%88%E3%81%9B%E3%81%9F/
stinger5フッターをカスタマイズ、3分割して足元をおしゃれに！
http://www.y-taka.biz/post-1818/
これらのサイトの内容を組み合わせてカスタムしました。
私は何度かサイトが真っ白になったりしました。
function.phpを触ります。
注意して、慎重にカスタマイズして下さい。
しくじったらバックアップで復元して下さい。
バックアップはデータベースはもちろん、FTPフォルダや設定など、
全て必要です。
最新のバックアップがあなたを救います。
では、それでもフッターを3カラムにしたいあなただけ、
下記をどうぞ。
FTPフォルダにアップロードする方法がわからない方は、
今はこのカスタマイズをしない事をおすすめします。
サイトが壊れたらどうにもなりません。
フッターを3カラムにするウィジェットを追加
ウィジェットから作ります。
早速やってみましょう。
function.phpへ。
子テーマでOKです。
以下のコードを追加します。
function.phpの一番下に追加します。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(7) )
if ( !function_exists('after_all') ):
register_sidebars(3,
array(
'name'=>'フッター %d',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
以上です。
ポイントは、
dynamic_sidebar(7)
…元々ウィジェットが4つあり、さらに3つ追加して7という数字にしている。
register_sidebars
…フッター用ウィジェット1，2，3を追加。
です。
さらに、このコードの後に、
endif;
// 親テーマの後に実行
add_action( 'after_setup_theme', 'after_all' );
を追加します。
これは、最後に読み込ませる為のコードです。
function.phpの最後には
?>
がありますね。
これが最後の目印です。
?>
の後には何も記入してはいけません。
また、function.phpの中にたった一つだけです。
まとめると、
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(7) )
if ( !function_exists('after_all') ):
function after_all() {
register_sidebars(3,
array(
'name'=>'フッター %d',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
endif;
// 親テーマの後に実行
add_action( 'after_setup_theme', 'after_all' );
?>
となります。
フッターphpにウィジェットを読みこませるコードを追加
ウィジェットを作ったので、次はphpです。
footer.phpへ。
一行目に
<footer id="footer">
があります。
その次に、以下のコードを追加して下さい。
ちなみに、mobileではフッターはそのまま1カラム、
PCだけ3分割するようにしてあります。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<!-- 追加ウィジェット ここから-->
<?php if ( wp_is_mobile() ) : ?>
<?php else : ?>
<div id="footer_w">
<div class="footer_l">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : // ここはフッター左側 ?>
<p>ここはフッター左側</p>
<?php endif; ?>
</div>
<div class="footer_c">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : // ここはフッター中側 ?>
<p>ここはフッター中側</p>
<?php endif; ?>
</div>
<div class="footer_r">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : // ここはフッター右側 ?>
<p>ここはフッター右側</p>
<?php endif; ?>
</div>
</div>
<div class="clear"></div>
<?php endif; ?>
<!-- 追加ウィジェット ここまで-->
以上です。
分かりやすく背景をつけて色分けしました。
3つのセクションに分けたウィジェット毎、
好きなようにコンテンツを追加していく事ができます。
WordPress管理画面のウィジェット設定から追加してもいいし、
直接footer.phpに追加しても構いません。
もし、直接phpにコンテンツのコードを追加するとしても、
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(○○) ) : else : // ?>
のコードは消さずにそのまま置いておいてください。
さらにカスタマイズ…
もちろん、上級者なら、
フッター以外にこのコードを追加して読み込ませる事もできますね。
その場合function.phpに入力した名前のところを、
「フッター」→お好きな名前
に変えればいいでしょう。
そのへんについては各自ググッてやってみて下さい。
フッターを3分割にしてCSSでキレイに調整
では最後に、CSSを追加しましょう。
Stinger5の場合は、PCのCSSだけに適用させる箇所があります。
@media only screen and (min-width: 780px){
のセクション内ですね。
以下のコードを追加。
あとは色など、キレイにカスタマイズして下さい。
それぞれの幅も調整して下さいね。
実際にウィジェットに何か追加してから、
見やすいように調整すると良いです。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/*---------------------------------
フッターカスタマイズ
--------------------------------*/
#footer_w {
width: auto;
text-align: left;
}
#footer_w ul li {
margin: 10px 10px;
padding: 0;
list-style-type: none;
}
.footer_l {
float: left;
width: 300px;
margin: 0 0 20px 10px;
padding: 0;
}
.footer_c {
float: left;
width: 300px;
margin: 0 0 20px 10px;
}
.footer_r {
float: left;
width: 300px;
margin: 0 0 20px 10px;
}
#footer_w h4 {
font-size: 16px;
color: #4e2800;
border-bottom: 1px dotted #4e2800;
margin: 10px auto;
}
#footer_w a {
color: #1A00FF;
}
#footer_w a:hover {
color: #FF0026;
}
#footer_w p {
font-size: 14px;
}
以上です。
お疲れ様でした。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録