stinger3 備忘録 5

2017年12月20日stinger3 備忘録stinger 3, カスタマイズ, フッター, ワードプレスstinger3 備忘録, カスタマイズ, フッター, ワードプレス

stinger3

stinger3 備忘録 5

 

1.フッターのカスタマイズ

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ

したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると

ソースコードが全選択されるので、コピーして使えます。

 

フッターのカスタマイズ

 

ヘッダーをカスタマイズしたら、フッターもカスタマイズしたほう

がバランス的にも、オシャレだと思います。

huttar001

 

これを以下に変更した。

huttar002

 

フッター部の背景を、濃い背景色を使う場合は、フッターに表示さ

れているテキストを白系に変更したほうが良いです。

 

僕の場合、フッター部の記事タイトル(h3 a)の色を#333を#0f0に

変更した。

 

CSSであらかじめ設定されている部分を抜粋しておきます(記述場

所は分散しています)。

 

[css]
/*h3タグ色*/
h3 a {
color: #333;
text-decoration: none;
}
h3 a:hover {
color: #C03;
}
/*h4タグ色*/
#footer #footer-in h4 a {
color: #666;
text-decoration: none;
}
/*フッター文字色等*/
#footer-in {
text-align: center;
color: #CCC;
padding: 20px;
}
/*Stingerへのリンク文字*/
#footer #footer-in .stinger a {
color: #CCC;
text-decoration: none;
padding: 0px;
margin: 0px;
}
/*h4タグ*/
#footer #footer-in h4 {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-size: 13px;
font-weight: normal;
color: #666;
padding: 5px;
}
[/css]

 

フッターのカスタマイズ手順

フッターでウィジェットを使えるようにする。

 

まず、「フッター左」と「フッターセンター」と「フッター右」の

ウィジェットエリアを作ります。

 

手を加えるのは、『functions.php』。

 

もとの内容は必ずバックアップを。テキストエディタ等にコピペし

て保存しておいてください。

カスタマイズに失敗するとブログが真っ白になる可能性もあります。

 

Stingerでウィジェットを制御しているのは、『functions.php』内

のこの部分です。

 

[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar
(4) )
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>’,
));
&nbsp;
register_sidebars(1,
array(
‘name’=>’Googleアドセンスのスマホ用width300’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 style="display:none">’,
‘after_title’ => ‘</h4>’,
));
[/php]

 

サイドバーやアドセンス・追尾広告用に4つのウィジェットが組み

込まれています。

 

ここに新たにフッター専用のウィジェットを作成します。

最初に二行目の()内の数字を4から7に変更します

 

[php]
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar
(7) )
[/php]

 

次に上記「//ウイジェット追加」内の

 

[php]
register_sidebars(1,
array(
‘name’=>’Googleアドセンス用’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 style="display:none">’,
‘after_title’ => ‘</h4>’,
));
&nbsp;
register_sidebars(1,
array(
‘name’=>’Googleアドセンスのスマホ用width300’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 style="display:none">’,
‘after_title’ => ‘</h4>’,
));
[/php]

 

の下に

 

[php]
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_c">’,
‘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>’,
));
[/php]

 

を追記します。

 

全体で以下のようになればいいです。

 

[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar
(7) )
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_c">’,
‘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>’,
));
[/php]

 

これで管理画面からウィジェットを設定できるようになりました。

これだけでは、ブログに表示されません。

 

ウィジェットをどこに表示するか、という設定を行います。

 

今度は『footer.php』を編集します。

 

ウィジェット表示位置を指定する

 

『footer.php』内に、以下のような記述があります。

 

[php]
<div id="footer">
<div id="footer-in">
<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>
<!–著作権リンク–>
<p class="stinger"><a href="http://stinger3.com">WordPr
ess-Theme STINGER3</a></p>
<p class="copy">Copyright&copy;
<?php bloginfo(‘name’);?>
,
<?php the_date(‘Y’);?>
All Rights Reserved.</p>
</div>
[/php]

 

フッター部分のコードですが、上記のどこにウィジェットを挿入す

るか決めます。

 

僕は、見出しタグブロック(h3とh4)と著作権リンクの間にした。

下記コードを挿入した。

 

[php]
<div id="footer_w">
<?php if ( function_exists(‘dynamic_sidebar’) && dynam
ic_sidebar
(5) ) : else : ?>
<p>ここはフッター左側</p>
<?php endif; ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynam
ic_sidebar
(6) ) : else : ?>
<p>ここはフッターセンター</p>
<?php endif; ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynam
ic_sidebar
(7) ) : else : ?>
<p>ここはフッター右側</p>
<?php endif; ?>
</div>
<div class="clear"></div>
[/php]

 

フッターのイメージ

 

huttar003

 

ウィジェットのタイトルは、<h5>タグを設定したので、フッターの

見出しタグは<h3>→<h4>→<h5>と並ぶ形です。

挿入後のフッター部分は、以下のようになります。

 

[php]
<!– /#container –>
<div id="footer">
<div id="footer-in">
<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’) && dynam
ic_sidebar
(5) ) : else : ?>
<p>ここはフッター左側</p>
<?php endif; ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynam
ic_sidebar
(6) ) : else : ?>
<p>ここはフッターセンター</p>
<?php endif; ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynam
ic_sidebar
(7) ) : else : ?>
<p>ここはフッター右側</p>
<?php endif; ?>
</div>
<div class="clear"></div>
<!–著作権リンク–>
<p class="stinger"><a href="http://stinger3.com">WordPr
ess-Theme STINGER3</a></p>
<p class="copy">Copyright&copy;
<?php bloginfo(‘name’);?>
,
<?php the_date(‘Y’);?>
All Rights Reserved.</p>
</div>
<!– /#footer-in –>
</div>
[/php]

 

あとはCSSで見映えを設定するだけです。

 

フッターデザインCSS設定(PC用)

 

PC用の表示は3段組のため、フロートで左・中央・右に配置します。

最低限のコードを『style.css』の最下部にコピペする。

 

[css]
/*———————————

フッター追記

——————————–*/

#footer {
background-color: #444;
}
#footer_w {
width: 986px;
margin: 20px auto;
text-align: left;
}
.footer_l {
float: left;
width: 286px;
margin: 0 20px 20px 0;
padding: 0;
}
.footer_c {
float: left;
width: 370px;
margin: 0 20px 20px 0;
padding: 0;
}
.footer_r {
float: left;
width: 330px;
margin: 0 0 20px 0;
padding: 0;
}
#footer_w h5 {
font-size: 120%;
text-align: center;
color: #fff;
border-bottom: 3px dotted #f00;
margin: 10px 0 30px 0;
padding: 0 0 3px 3px;
}
#footer_w p {
color: #fcfcfc;
}
#footer_w a {
color: #DCDCDC;
}
#footer_w a:hover {
color: #629FBA;
}
[/css]

 

この部分にGoogleアドセンスのレクタングル(大)を入れる場合は、

既存のアドセンスをどこか消す事。

規約違反になります。

 

 

フッターデザインCSS設定(スマホ用)

『smart.css』の設定は以下のようにした。

 

[css]
/*———————————–

フッター追記smart

————————————*/

#footer {
background-color: #444;
}
#footer_w {
width: 100%;
margin: 20px auto;
text-align: left;
}
.footer_l {
color: #fcfcfc;
width: 100%;
margin: 0 auto 20px auto;
padding: 0;
text-align: center;
}
.footer_c {
color: #fcfcfc;
width: 90%;
margin: 0 auto 20px auto;
padding: 0;
text-align: center;
}
.footer_r {
color: #fcfcfc;
width: 90%;
margin: 0 auto 20px auto;
text-align: left;
}
#footer_w h5 {
font-size: 100%;
color: #fff;
border-bottom: 3px dotted #f00;
margin: 0 0 10px 0;
padding: 0 0 3px 0;
}
#footer_w p {
color: #fcfcfc;
}
#footer_w a {
color: #DCDCDC;
}
#footer_w a:hover {
color: #629FBA;
}
[/css]

 

このコードを『smart.css』の最後に追加した。

 

実証検分

 

ワードプレス→外観→ウィジット→フッター左・中央・右のそれぞ
れにテキストを挿入して表示させたい項目をいれる。

『フッター r』のタイトル表記位置が、ブラウザによって下にず

れる事が確認できた。

 

当初どこを変更または追加したのか、記憶にないが修正できた。

新しいPCを購入後、ブラウザのバージョンアップのせいか、IE

10は正常。グーグルクローム Vr34 およびファイヤーフォ

ックスに、『フッター r』のタイトル表記位置が下にずれる現象

が発生中です。

原因がはっきり判らないので見苦しいが、とりあえずこのままでい

く。

 

ブラウザのバージョンによって異なるのでは、修正の仕方に疑問が

あり。

修正できたら後日修正方法を掲載予定である。

 

追伸 修正できました

 

なんか調査した結果、各ブラウザの表示のちがいが原因みたい

なので、各ブラウザ用に「margin」を変更するコードを追記

した。

 

[css]
.chrome .footer_r {
float: left;
width: 330px;
margin: -23px 0 20px 0;
padding: 0;
}
.gecko .footer_r {
float: left;
width: 330px;
margin: -23px 0 20px 0;
padding: 0;
}

[/css]

 

上記コードをcssに追記した最後に

追加した。