Blog

[WP] Stinger3 のカスタマイズをしてみました

ブログのテーマを Stinger 3 にした わけですが、やっぱり細かいところを変更したくなって仕方がない、普通にテーマを適用できない @azur256 です。
今回は Stinger 3 に対するカスタマイズの内容を忘備録を兼ねてエントリしておきます。


Stinger3


ヘッダの変更

ヘッダに Twitter Card、Google Profile、Google Analytics、Favicon の設定をしているのですが、これは functions.php で動的に追加していたので、その関数をそのまま新しい子テーマの functions.php にも追加するだけで OK でした。

以下のようなコードを子テーマの functions.php に書き込むだけです。


このコード以外にも WordPress のバージョン表記の削除や RSS の Auto-discovery の設定変更、ダッシュボードの記事一覧へのサムネイル表示なども設定しました。このあたりのカスタマイズの詳細は末尾の関連エントリをご覧ください。

クレジットの変更

オリジナルのクレジット表示は footer.php に以下のように定義されています。


footer.php を子テーマフォルダにコピーして、LEGO のコピーライト表示や、自分のサイトのコピーライト表示のカスタマイズを行いました。

オリジナルだとこんなイメージですが、
130928 0004


以下のように変えてみました。
130928 0003


変更後のコードはこのようになりました。


ソーシャルボタンのカスタマイズ

ソーシャルボタンは今まで忍者おまとめボタンを使っていましたが、今回はダイレクトに実装してみようと思います。Stinger 3 のデフォルトでは、ソーシャルボタンは各エントリの中と追従タイプのボタンとして表示されます。各エントリの中の表示は sns.php に実装されていて、追従タイプのボタンは footer.php に実装されています。

まず sns.php の方に追加したのは、Pocket のボタン、Evernote のボタン、Feedly のボタンの3種類を追加します。sns.php を子テーマのフォルダにコピーして、以下のコードを追加します。


これと合わせて、はてなブックマークのスタイルを vertical-balloon に変更しました。data-hatena-bookmark-layout="vertical" となっているところをdata-hatena-bookmark-layout="vertical-balloon" に変更するだけです。

これらのソーシャルボタンを記事の上下に入れたかったので single.php を子テーマにコピーしてカスタマイズします。the_content() の前にも差し込むことにしました。


追従タイプはスマートデバイスで表示してもらう時のことを考えてできるだけ小さいタイプにしたかったので、くぉくん (@QuoQlish) の Web フォントで作るソーシャルボタンのエントリを参考に作ってみました。
Stinger 2/Stnger 3にWebアイコンフォントと、追尾するボックスを実装する方法!

Web フォントは WordPress のデータフォルダに置きました。テーマを変えた時にそのまま利用しようと思うと URL を変えたり面倒になりそうだったので固定的なリソースとして配置しました。
CSSのセレクタなどはデフォルトのものをいかして、サイズを変更したり、ごそごそと footer.php を変えまして。



CSSは style.css をこんな感じにしてみました。


ちなみに、この修正は style.css に入れていますが、 Stinger 3 はモバイル用の CSS を別の smart.css というファイルに持っています。したがって、この変更をモバイルブラウザから見た場合にも反映させるためには、 smart.css にも修正が必要です。これについては別途エントリを書きたいと思います。

まだまだ調整が足りてないところとかもあるのですが、追々、微調整をしていきたいと思います。

WordPress 関連のエントリ


インストールや設定変更とデータ移行




プラグイン




バージョンアップ




カスタマイズ





Stinger 3関連





チューニング





MAMPを使ったバックアップサイトの構築





開発関連







最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top