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

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

ヘッダの変更

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

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

// Twitter Card Meta information
add_action('wp_head', 'addTwitterCard');
if (!function_exists('addTwitterCard')): 
	function addTwitterCard() {
		echo '<meta name="twitter:card" content="summary">' . "\n";
		echo '<meta name="twitter:site" content="@azur256">' . "\n\n";
	}
endif;

// Google+ Profile
add_action('wp_head', 'addGoogleProfile');
if(!function_exists('addGoogleProfile')):
	function addGoogleProfile(){
		echo '<link rel="author" href="http://plus.google.com/u/0/116609150271297041871" />' . "\n\n";
	}
endif;

// Google Analytics code
add_action('wp_head', 'addGoogleAnalytics');
if(!function_exists('addGoogleAnalytics')):
		function addGoogleAnalytics(){
		echo '<script type="text/javascript">' . "\n";
		echo '	var _gaq = _gaq || [];' . "\n";
		echo '	_gaq.push(["_setAccount", "UA-8668228-4"]);' . "\n";
		echo '	_gaq.push(["_setDomainName", "azur256.com"]);' . "\n";
		echo '	_gaq.push(["_trackPageview"]);' . "\n";
		echo '	(function() {' . "\n";
		echo '		var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;' . "\n";
		echo '		ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";' . "\n";
		echo '		var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);' . "\n";
		echo '	})();' . "\n";
		echo '</script>' . "\n\n";
	}
endif;

// Add favicon
add_action('wp_head', 'addFavicon');
if(!function_exists('addFavicon')):
	function addFavicon() {
		echo '<link rel="shortcut icon" href="/images/azur256.ico" />' . "\n\n";		
	}
endif;

// Twitter Card Meta information

add_action('wp_head', 'addTwitterCard');

if (!function_exists('addTwitterCard')):

function addTwitterCard() {

echo '<meta name="twitter:card" content="summary">' . "\n";

echo '<meta name="twitter:site" content="@azur256">' . "\n\n";

}

endif;

// Google+ Profile

add_action('wp_head', 'addGoogleProfile');

if(!function_exists('addGoogleProfile')):

function addGoogleProfile(){

echo '<link rel="author" href="http://plus.google.com/u/0/116609150271297041871" />' . "\n\n";

}

endif;

// Google Analytics code

add_action('wp_head', 'addGoogleAnalytics');

if(!function_exists('addGoogleAnalytics')):

function addGoogleAnalytics(){

echo '<script type="text/javascript">' . "\n";

echo ' var _gaq = _gaq || [];' . "\n";

echo ' _gaq.push(["_setAccount", "UA-8668228-4"]);' . "\n";

echo ' _gaq.push(["_setDomainName", "azur256.com"]);' . "\n";

echo ' _gaq.push(["_trackPageview"]);' . "\n";

echo ' (function() {' . "\n";

echo ' var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;' . "\n";

echo ' ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";' . "\n";

echo ' var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);' . "\n";

echo ' })();' . "\n";

echo '</script>' . "\n\n";

}

endif;

// Add favicon

add_action('wp_head', 'addFavicon');

if(!function_exists('addFavicon')):

function addFavicon() {

echo '<link rel="shortcut icon" href="/images/azur256.ico" />' . "\n\n";

}

endif;

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

クレジットの変更

オリジナルのクレジット表示は footer.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://wp-stinger.com">WordPress-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 wp_title(''); ?>

</a></h3>

<?php bloginfo('description'); ?>

</a></h4>

<p class="stinger"><a href="http://wp-stinger.com">WordPress-Theme STINGER3</a></p>

<?php bloginfo('name');?>

<?php the_date('Y');?>

</div>

</div>

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

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

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

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

<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="copy">&copy;<?php the_time('Y'); ?> LEGO and the LEGO logo are trademarks of the LEGO Group. Used by permission, &copy;<?php the_time('Y'); ?> The LEGO Group.</p>
    <!--このリンクは外す事は禁止しております-->
    <p class="stinger"><a href="http://wp-stinger.com">WordPress-Theme STINGER3</a></p>
    <p class="copy">Copyright&copy; <a href="<?php echo home_url(); ?>/about"><?php bloginfo('name'); ?></a>, 2009-<?php the_time('Y'); ?> All Rights Reserved.</P>
  </div>
  <!-- /#footer-in --> 
</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="copy">©<?php the_time('Y'); ?> LEGO and the LEGO logo are trademarks of the LEGO Group. Used by permission, ©<?php the_time('Y'); ?> The LEGO Group.</p>

<p class="stinger"><a href="http://wp-stinger.com">WordPress-Theme STINGER3</a></p>

</div>

</div>

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

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

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

      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
      <li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a>
      </li>
      <li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" class="feedlyButton" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してください"> <div class="arrow_box_feedly"><span class="feedlyCount"><?php echo get_transient( 'feedly_subscribers' ); ?></span></div><img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png" alt="follow us in feedly" width="66" height="20"></a>
      </li>

<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

</li>

</li>

<li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" class="feedlyButton" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してください"> <div class="arrow_box_feedly"><span class="feedlyCount"><?php echo get_transient( 'feedly_subscribers' ); ?></span></div><img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png" alt="follow us in feedly" width="66" height="20"></a>

</li>

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

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

    <?php get_template_part('sns');?>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>

<?php get_template_part('sns');?>

<?php the_content(); ?>

<?php wp_link_pages(); ?>

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

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

<?php if (is_home()) { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li><a href="http://azur256.com" title="TOPページ" class="lsf" sl-processed="1">home</a></li>
      <li> <a href="https://twitter.com/share" data-via="" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo('name'); ?>" title="このエントリーをTwitterでシェア" class="lsf" sl-processed="1">twitter</a> 
      </li>
      <li><a name="fb_share" share_url="<?php echo home_url(); ?>" title="このエントリーをFacebookでシェア" class="lsf" sl-processed="1">facebook</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      </li>
      <li><a href="https://plus.google.com/share?url=<?php echo home_url(); ?>" title="このエントリーをGoogleで+1" class="lsf" sl-processed="1">google</a>
      </li>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" title="このエントリーをはてなブックマークに追加" class="lsf" sl-processed="1">hatenabookmark</a>
      </li>
      <li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;" title="このエントリーをEvernoteに追加" class="lsf" sl-processed="1">evernote</a>
      </li>
      <li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してください" class="lsf" sl-processed="1">rss</a>
      </li>
    </ul>
    </ul>
  </div>
</div>
<?php } else { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li><a href="http://azur256.com" title="TOPページ" class="lsf" sl-processed="1">home</a></li>
      <li> <a href="https://twitter.com/share" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" title="このエントリーをTwitterに追加" class="lsf" sl-processed="1">twitter</a>
      </li>
      <li><a name="fb_share" share_url="<?php the_permalink(); ?>" title="このエントリーをFacebookでシェア" class="lsf" sl-processed="1">facebook</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      </li>
      <li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="このエントリーをGoogle+1" class="lsf" sl-processed="1">google</a>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" title="このエントリーをはてなブックマークに追加" class="lsf" sl-processed="1">hatenabookmark</a>
      </li>
      <li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;" title="このエントリーをEvernoteに追加" class="lsf" sl-processed="1">evernote</a>
      </li>
      <li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してください" class="lsf" sl-processed="1">rss</a>
      </li>
    </ul>
  </div>
</div>
<?php } ?>

<?php if (is_home()) { ?>

<li> <a href="https://twitter.com/share" data-via="" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo('name'); ?>" title="このエントリーをTwitterでシェア" class="lsf" sl-processed="1">twitter</a>

</li>

<li><a name="fb_share" share_url="<?php echo home_url(); ?>" title="このエントリーをFacebookでシェア" class="lsf" sl-processed="1">facebook</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</li>

<li><a href="https://plus.google.com/share?url=<?php echo home_url(); ?>" title="このエントリーをGoogleで+1" class="lsf" sl-processed="1">google</a>

</li>

<li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" title="このエントリーをはてなブックマークに追加" class="lsf" sl-processed="1">hatenabookmark</a>

</li>

<li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;" title="このエントリーをEvernoteに追加" class="lsf" sl-processed="1">evernote</a>

</li>

<li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してください" class="lsf" sl-processed="1">rss</a>

</li>

</ul>

</div>

<?php } else { ?>

<li> <a href="https://twitter.com/share" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" title="このエントリーをTwitterに追加" class="lsf" sl-processed="1">twitter</a>

</li>

<li><a name="fb_share" share_url="<?php the_permalink(); ?>" title="このエントリーをFacebookでシェア" class="lsf" sl-processed="1">facebook</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</li>

<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="このエントリーをGoogle+1" class="lsf" sl-processed="1">google</a>

</li>

<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" title="このエントリーをはてなブックマークに追加" class="lsf" sl-processed="1">hatenabookmark</a>

</li>

</ul>

</div>

<?php } ?>

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

/* For Social button style */
#snsbox .sns .snsb.clearfix li {
  text-decoration: none!important;
  font-size: 100%;
  text-align: center;
  float: none;
  width: 40px;
  margin-right: 10px;
  list-style-type: none;
}

#snsbox .sns .snsb.clearfix li a {
  text-decoration: none!important;
  font-size: 160%;
}
/* End of Social button style */

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

/* For Social button style */

#snsbox .sns .snsb.clearfix li {

text-decoration: none!important;

font-size: 100%;

text-align: center;

float: none;

width: 40px;

margin-right: 10px;

list-style-type: none;

}

#snsbox .sns .snsb.clearfix li a {

text-decoration: none!important;

font-size: 160%;

}

/* End of Social button style */

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

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