WordPressテーマのカスタマイズ pha86204

「えっ！？ブログのフッター活用できてなさすぎ！」ってことで急いでカスタマイズしました 【Stinger】

本サイトは広告費から運営されております。

おすすめ＞ 【働かずに月5万円以上稼げた！】家で楽にやれる副業まとめ
人気記事＞ 【ためになる無料の適職診断あり】理想通りの仕事を探す方法

これまでブログのフッターを全然いじっていなかったので、非常に寂しい状態でした。また、サイドバーもウィジェットを詰め込みすぎていたので、ブログのレイアウトも相当汚なかったのです。

そこで、一部をフッターに移動する事に。この改修のおかげでブログのレイアウトも改善されました。これから紹介する方法も簡単ですので、ぜひやってみてください。

なぜカスタマイズするか

フッターをカスタマイズするのは、ブログのレイアウトを整える意外にも理由があります。それは、フッターが意外と来訪者に見られているし、そのサイトを評価する指標の１つとして考える人もいるからです。神は細部に宿るという言葉もあるように。意外と大事な部分なのです。

スポンサーリンク

やること

フッターとサイドバーのカスタマイズでやることは

1 フッターにウィジェットを追加
2 サイドバーからウィジェットを削除する

の２つです。
それでは、２つについて詳しく見ていきましょう。

なお、これから紹介する方法はおしゃれは足元から！Stinger3フッターカスタマイズで差をつけろ！#Stinger-WPを参考にさせて頂きました。ありがとうございます。

スポンサーリンク

1 フッターにウィジェットを追加

まず、ダッシュボード管理画面のfunctions.phpをいじる必要があります。

functions.phpを編集

functions.phpは編集に失敗すると、画面が真っ白になって非常にテンパるので、編集前に必ずバックアップをとっておいて下さい。functions.phpは改行やスペースに厳しいので慎重に！
functions.php内で「register_sidebars」を検索すると、以下のコード群がヒットします。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

この部分にウィジェットエリアを追加するための関数を追加していきます。
まずは、!dynamic_sidebar(4)の「4」を「6」に変更。

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )

そして、以下のコードを先ほどのコードの下に追加。

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '<div class="footer_l">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));
 
register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '<div class="footer_r">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

以下のようになっていればOKです。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '<div class="footer_l">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));
 
register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '<div class="footer_r">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

これでfunctions.phpの編集は終了です。
あとはfooterで今定義した部分を呼び出すだけ。

footer.phpを編集

呼び出す場所は好きな所でOK。表示したい位置に以下のコードを追加。

    <div id="footer_w">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
	<p>ここはフッター左側</p>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
	<p>ここはフッター右側</p>
      <?php endif; ?>
    </div>
    <div class="clear"></div>

私は、ブログタイトルの下に配置したのでこんな感じになっています。

  <div id="gadf"> </div>
    <h3><a href="<?php echo home_url(); ?>/">
      <?php wp_title(''); ?>
      </a></h3>
    <h4><a href="<?php echo home_url(); ?>/">
      <?php bloginfo('description'); ?>
      </a></h4>
	<!-- 以下にウィジェットを追加　-->
    <div id="footer_w">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
	<p>ここはフッター左側</p>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
	<p>ここはフッター右側</p>
      <?php endif; ?>
    </div>
    <div class="clear"></div>
	<!-- フッターウィジェット END -->

    <!--このリンクは外す事は禁止しております-->
    <p class="stinger"><a href="http://wp-stinger.com">WordPress-Theme STINGER3</a></p>

ここまでの作業でウィジェットを追加できる状態になりました。さっそくウィジェット追加と行きたい所ですが、その前にフッターのスタイルを整えるためにCSSをいじりましょう。

CSSでフッターのレイアウトを整える

まずは、PC用のCSSファイル「style.css」に以下のコードを追加。

/*---------------------------------
フッター追記
--------------------------------*/
#footer {
    background-color: white;
}
 
#footer_w {
    width: 986px;
    background-color: white;
    margin: 20px auto;
    text-align: left;
}
.footer_l {
    float: left;
    width: 336px;
    margin: 0 10px 20px 0;
    padding: 0;
}
 
.footer_r {
    float: right;
    width: 620px;
    margin: 0 0 20px 20px;
}

.footer_r li {
	float:left;
	margin-right:10px;
}
 
#footer_w h5 {
    font-size: 120%;
    color: black;
    border-bottom: 3px dotted black;
    margin: 0 0 20px 0;
    padding: 0 0 3px 3px;
}
 
#footer_w p {
    color: black;
}

.footer_lが左側のウィジェット部分で、.footer_rが右側。ここでは、それぞれの横幅を336px, 620pxにしていますが自分好みにカスタマイズしてください。私は色を極力シンプルにしているので、文字色とタイトル下の点線を黒に設定。

次に、スマホ用のCSSファイル「smart.css」に以下のコードを追加。

/*-----------------------------------
フッター追記smart
------------------------------------*/
#footer {
    background-color: white;
}
 
#footer_w {
    width: 100%;
    margin: 20px auto;
    text-align: left;
}
.footer_l {
    color: black;
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
}
 
.footer_r {
    color: black;
    width: 90%;
    margin: 0 auto 20px auto;
    text-align: left;
}
 
#footer_w h5 {
    font-size: 100%;
    color: black;
    border-bottom: 3px dotted black;
    margin: 0 0 10px 0;
    padding: 0 0 3px 0;
}
 
#footer_w p {
    color: black;
}

スマホ用には「フッター左」と「フッター右」を端末サイズの関係上、上下に分けています（text-align: center;, text-align: left;の部分）。
これでCSSの編集も終了です。
あとは、フッターに好きなウィジェットを追加するだけです。

フッターにウィジェットを追加

あとはウィジェットを追加していきましょう。
ダッシュボードの「外観」→「ウィジェット」を選択します。

ブログフッターをカスタマイズして関連記事、カテゴリ一覧などを表示する
表示されたページ右に「フッター左」、「フッター右」というエリアが追加されているので、

ブログフッターをカスタマイズして関連記事、カテゴリ一覧などを表示する
そこにウィジェットをドロップ&ドラッグで追加していきます。
今回は、左に「カテゴリー」、右に「タグ」、「アーカイブ」を追加しました。
ブログフッターをカスタマイズして関連記事、カテゴリ一覧などを表示する

2 サイドバーからウィジェットを削除する

サイドバーから同様の方法でいらないウィジェットを削除していきます。
フッターに追加した３つをサイドバーからドロップ&ドラッグで外します。

サイドバーからウィジェットを削除する
これで作業は完了です。
では、変更されたフッターを見てみましょう。
こんな感じです。
ブログフッターをカスタマイズして関連記事、カテゴリ一覧などを表示する
うん。やっとフッターを有効活用する事ができました。これで来訪者も次のアクションを起こしやすくなりますね。

まとめ

・フッターは意外に見られているので、しっかりカスタマイズしよう
・サイドバーにウィジェットを詰め込みすぎると見た目が悪くなるので注意
・ウィジェットを追加するためにfunctions.phpをいじる際は必ずバックアップをとっておく

以上です。これでブログを訪れてくれた人にも優しいレイアウトになりました。みなさんもユーザーに優しいブログにするためにフッター、サイドバーのカスタマイズをしてみてください！

参考記事：おしゃれは足元から！Stinger3フッターカスタマイズで差をつけろ！#Stinger-WP

サイトのUI・UXをもっと勉強したいなー

UIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで[Kindle版]

posted with ヨメレバ
原田秀司 翔泳社 2013-11-20
Kindle
Amazon[書籍版]

いつもシェア感謝です！今回もぜひ

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!

SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。