雑誌が好きなんです。
2013年3月の雑誌購入数は諸々含めて42冊。
1日1冊以上の雑誌を読んだ計算なんですが、実際は半分読み終わってません。
雑誌を積読（つんどく）する男、どうも鰐です！

今回もWordPressを使ってブログを構築しています。
その備忘を兼ねてテーマを自作する際のTipsが今回の記事。
これから作ろうと考えてる方の参考になれば！

プラグイン

今回はプラグインを極力減らして構築することにしました。

入力補助プラグイン

　Advanced Custom Fields　：カスタムフィールドが使いやすくなります

SEOプラグイン

　All in One SEO Pack　：簡単にGoogleなどの検索システムへ最適化できます
　Google XML Sitemaps　：Googleなどがブログの情報を把握しやすくなります
　Open Graph Pro　：Facebookなどで利用されるOGPを簡単に設定できます

SNS通知プラグイン

　Wordbooker　：Facebookへ更新通知を行うのに利用します
　WP to Twitter　：Twitterへ更新通知を行うのに利用します

function.php

function dp_attachment_imageURL($postid=0, $size='thumbnail', $attributes='') {
if ($postid<1) $postid = get_the_ID();
if ($images = get_children(array(
	'post_parent' => $postid,
	'post_type' => 'attachment',
	'numberposts' => 1,
	'post_mime_type' => 'image',)))
	foreach($images as $image) {
		$attachment=wp_get_attachment_image_src($image->ID, $size);
		?><?php echo $attachment[0]; ?><?php
}}}

記事中へ最後にアップロードした画像のURLを参照するphpです。
サイズは’full’、’medium’、’thumbnail’から選択のほか、array(***,***)での指定が可能です。
利用方法：<?php dp_attachment_imageURL($post->ID,’full’); ?>

function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

アイキャッチ画像を利用可能にします。
アップロード時にアイキャッチで使用する画像が選べるようになります。
ブログ中では汎用性を高めるため、アイキャッチ画像のURLのみを参照するようにしています。
利用方法：<?php echo clean_url(wp_get_attachment_url(get_post_meta($post->ID, ‘_thumbnail_id’, true))); ?>

function likeCount($str = null) {
        if($str)        $url = $str;
        else    $url = ((!empty($_SERVER['HTTPS']))? "https://" : "http://").$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
        $json = file_get_contents('http://graph.facebook.com/' . $url ,true);
        $data = json_decode($json, true);
        return ($data[shares])? $data[shares] : 0;
}

FacebookのLikeカウントを取得するため、phpからLIKE APIへリクエストしています。

Facebookカウントのオリジナル化

<?php
$pURL = "'http://zine.torumade.nu/?p=".get_the_ID()."'";
$fql  = "SELECT share_count, like_count, total_count FROM ";
$fql .= "link_stat WHERE url =".$pURL;
$apifql="https://api.facebook.com/method/fql.query?format=json&query=".urlencode($fql);
$json = file_get_contents($apifql);
$obj = json_decode($json,true);
$fbdata = $obj[0]; 
?>

<div class="fbcount_php">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/facebook.png" /></a>
<span class="totalcount"><?php print_r($fbdata[total_count]); ?></span>
<span class="sharecount"><?php print_r($fbdata[share_count]); ?></span>
<span class="likecount"><?php print_r($fbdata[like_count]); ?></span>
</div>

FacebookのカウントはLikeされた数、Shareされた数、コメント数などの合計値になります。
上記のサンプルでは合計とshareとlikeの数をページ中に表示させています。
レイアウトはCSSで定義しているだけなので自由にカスタマイズ可能です。

JavaScipt（jQuery）

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.cookie.js"></script>
<script type="text/javascript">}

header.phpの<head>〜</head>内に書き入れます。

/* フォントサイズの変更 */
function setSize() {
var imgW = 800
var imgH = 533;
var winW = $(window).width();
var winH = $(window).height();
var scaleW = winW / imgW;
var scaleH = winH / imgH;
var fixScale = Math.max(scaleW, scaleH);
var setW = imgW * fixScale;
var setH = imgH * fixScale;
var moveX = Math.floor((winW - setW) / 2);
var moveY = Math.floor((winH - setH) / 2);
$('#bg').css({'width': setW,'height': setH,'left' : moveX,'top' : moveY});}
function font(size,lheight){
$(".single p").css("font-size",size); //.single内のpタグに対してサイズ変更を行う
$(".fontchange img").fadeTo(300, 0.3);
$.cookie("fsize",size,{expires:30,path:'/'});}
$(function(){$(".fontchange a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 300,'swing');
return false;})});
$(function(){$(".fontchange img").hover(
function(){$(this).fadeTo(300, 1.0);},
function(){$(this).fadeTo(300, 0.3); $(".f"+$.cookie('fsize')).fadeTo(300, 1.0);});});
$(function(){ 
$(".single p").css("font-size",$.cookie('fsize'));
if($.cookie('fsize')){$(".f"+$.cookie('fsize')).fadeTo(1000, 1.0);} else {$(".f12px").fadeTo(1000, 1.0);}});

header.phpの<head>〜</head>内のscript中に書き入れます。

/* 背景画像をページサイズに合わせる */
$(function(){$.backstretch(["<?php dp_attachment_imageURL($post->ID,'full'); ?>"], {duration: 2000, fade: 300});});

header.phpの<head>〜</head>内のscript中に書き入れます。
背景画像の詳細はhttp://srobbin.com/jquery-plugins/backstretch/を参照してください。

テンプレート（HTML）

<div class="fontchange">
<a href="#pagetop" title="ページの先頭に戻ります"><img src="<?php bloginfo('template_url'); ?>/img/up.png" class="pageup" /></a><br />
<img src="<?php bloginfo('template_url'); ?>/img/f10.png" alt="10px" onclick="font('10px')" title="10px" class="f10px" /><br />
<img src="<?php bloginfo('template_url'); ?>/img/f12.png" alt="12px" onclick="font('12px')" title="12px" class="f12px" /><br />
<img src="<?php bloginfo('template_url'); ?>/img/f14.png" alt="14px" onclick="font('14px')" title="14px" class="f14px" /><br />
<img src="<?php bloginfo('template_url'); ?>/img/f18.png" alt="18px" onclick="font('18px')" title="18px" class="f18px" /><br />
</div>}

フォントサイズを変更するリンク部分です。
ページロード時にcockieを参照して、該当する文字サイズをポイントしています。
（JavaScriptで処理）
onclick内がフォントのサイズになります。
　
　
主題が『雑誌』なので読みやすいことをいちばんに、すこしハデな雰囲気も出したいなと思ってのテーマです。
iPhoneやiPadでもPCと同じレイアウトのままで読みやすくなるよう、1カラムのレイアウトにしています。
あまり難しいことはしていませんから、わりと扱いやすいと思います。

雑誌不況と言われて久しい昨今ですが。
やっぱり面白いですよ！雑誌は面白い！

crocodile MAG’STACK