Stinger3からStnger for FANSへ。カスタマイズまとめ

国産無料最強テーマStinger3

言わずもがな的な云々カンヌンはもう抜きにして、兎に角最強っすコレ。

しかし僕はテーマをStinger for FANSへとチェンジしました。触れ込みは「どこもかしこもStinger的な、もう飽きた的な」感じだったんですが、俺全っっ然飽きてない。素敵感の安定感は動かざること山の如し。でも変えました。

理由はコレ▼

トップページの表示が横長の表示になったから！

ずっとコレやりたかったんすよー。

自分ででける人ならお茶の子さいさいかもしらんけど、俺とか全然無知で無理やから諦めてたから感動の極みですた。

そしてもう一つ。テーマの表記が「FN」と略されてて感動。え？ってなるかもですが、これの理由がうちのKRUMPダンスファミリーの名前がForece Nuts FamっていってForce Nutsの家族ってことなんですけどその略にもハマってる！！なんかめっちゃ嬉しかったです。

そんなこんなで今回は忘備録もかねてStinger For FANSへチェンジングした際のカスタマイズを一挙まとめようと思います。

しかも！この記事を作ってる間にまさかのStinger5βもリリース！ええええええ、まじかぁー！！

Enjiさんすげぇぇぇえ！！！！！

今回はStinger3からStinger for Fansへの集中カスタマイズのまとめですが、Stingerシリーズは構造がほぼ同じなのでStinger3、Stinger for Fansには通用すると思います。ただ衝撃的なデビューを飾ったStinger5はレスポンシブデザイン化してるそうなので多分通用しないと思います。

トップページカスタマイズ

ブログの顔、ヘッダーの画像カスタマイズ

女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう | えけこのくるる

こちらのサイトを参考にさせてもらって設置。画像はイラレで作りました。スマフォ用のヘッダーをまた変えたいなーと思っています。

まだカスタムを始めて間もない時からお世話になっていて、初心者でもわかりやすくていつも参考にさせていただいてます。

トップページにアドセンスを挿入。

トップページの記事と記事の間にアドセンスを配置する方法【Stinger3】

制作後PC表示の610×90サイズのクリック率が極めて低かったので610×120に変更しました。

スマフォ用サムネイルを110px→90pxに変更

functions.phpに書かれている//アイキャッチサムネイルの数字を変更

[php]
add_image_size('thumb110',110,110,true);
[/php]

これを

[php]
add_image_size('thumb90',90,90,true);
[/php]

さらにhome.phpにある'thumb110'の110を90に変更。width="110px"を90pxに変更。タグなどでアーカイブのページにとぶとそこだけ表示がおかしくなるのでarchive.phpの変更も忘れずに。

サイドバーカスタマイズ

NEW ENTRYをランダムに

これは以下のサイトを参考させていただきました。

STINGER3｜NEW　ENTRYを削除して過去記事をランダムで表示する！

タグクラウドカスタマイズ

【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法

タグをカラフルにしたいなーと思いつつまだ出来ていませんが、綺麗にまとめたかったのでひとまず満足です。

Google+を埋め込む

Google+ Platform

ここでコードを取得してテキストウィジェットに貼り付ければOK。

Google検索を挿入

Google検索をサイドバーにコピペだけで配置する方法【Stinger for FANS】

シングルページ（本文）カスタマイズ

スマフォ用ヘッダー下にテキストで新着記事を表示

ヘッダーすぐ下に新着記事を3件表示しました▼

php get_header(); のすぐ下の行に以下をそのまま追加。

[php]
<?php if (wp_is_mobile()): ?>
<div class="newnew">
<ul>
    <?php
    global $post;
    $args = array( 'posts_per_page' => 3 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) {
        setup_postdata($post);
        ?>

        <li>
            <dl>
                <dd><?php
$days = 3; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo ' <font color="#FFFFFF" style="background-color:#EA005A; padding-left:3px;">最新記事 </font>';
}
?><span style="background:#ffd700; padding-right:4px;">  <i class="fa fa-tags"></i>  <?php the_category(', ') ?></span><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></dd>
            </dl>
        </li>
        <?php
    }
    wp_reset_postdata();
    ?>
</ul>
</div>
<?php endif; ?>
[/php]

CSSには以下を追加。

[css]
.newnew{
font-size:11px;
padding-top:8px;
padding-bottom:5px;
padding-left:8px;
padding-right:3px;
line-height:1.6em;
margin-top:2px;
margin-bottom:10px;
margin-left:-5px;
margin-right:-5px;
background-color:#F2F2F2;
box-shadow:1px 3px 7px 0px #c5c5c5;
}

.newnew a{
color:#045FB4
}
[/css]

こちらのサイトを参考にして組み立てました。

WordPressでNew!を表示するパターン別４つの方法 | WordPress（ワードプレス）コミュニティ

今回のチェンジングでわからないなりに調べながら一番頑張ったところです。

特に勉強になったのはdiv classだと前後で改行してしまうので、文中の特定の文字をだけを指定してスタイルを変えたい場合はsapn styleを使用する。ということ。んー、すごい。

moreタグにアドセンスを配置

moreタグで記事内にアドセンスをセンタリングで設置する方法［Stinger3］

イジル部分はfunction.phpなので勇気と根性が必要です。コピペだけでいけます。

記事幅を広げる（smart.css）

特に意味はないんですけどスマフォの表示画面の幅を左右に5pxずつ広げました。そのために#mainの記述を探して書き換えました。
[css highlight="6,8"]
#main {
overflow: hidden;
background-color: #FFF;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 5px;/*10*/
padding-bottom: 10px;
padding-left: 5px;/*10*/
}
[/css]

これに伴って表示バランスが崩れた箇所があったのでCSSで微調整しました。

シェアボタンをバイラルメディア風ボタンへ

これはそのままコピペさせていただきました。もう少し落ち着いたら色々弄って調整してみたいと思っています。

流行りに乗れ！WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック

リストマークをカラーにする

何気ないカスタムなんですが個人的にはこれが一番気に入ってますw

CSSでリストマークの色をカスタマイズしました。【Stinger for FANS】

カスタムには欠かせない唸るアイテムたち

フォントの追加

style.cssとsmart.cssの一番下に以下を追加。

[css]
* {
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}
[/css]