4時間でそれなりのWordPressブログを作るためにやったこと

最終更新日	2013/10/23
公開日	2013/02/21
カテゴリ	WordPress
文字数	3,668
読了時間	約9分

先日、ひょんなことから人のためにブログを作ることになりました。
作業を持ち帰ることもできない状況でどこまで出来るのか、自分にとってもチャレンジでした。

結果、それなりにいい感じのブログを作ることができました。
かかった時間は4時間ほど。コワーキングスペースでの作業だったので、途中に雑談もありました。それを引いたら3時間前後でしょうか。

今回は4時間でそれなりのWordPressブログを作るためにやったことを紹介します。

このページの目次

テンプレートはTwitter Bootstrapベースで

今回は一からテンプレートを作りました。

一からテンプレートを作るのは結構大変なので、最近はTwitter BootstrapというCSSのフレームワーク（？）を使っています。

これを使うと簡単にレイアウトを作ることができるので、最近もっぱらハマっています。

Bootstrap

右サイドバーの2カラムで作成

どんなブログがいいですか？こんな感じにしたいサイトはありますか？と聞いたところ、右サイドバーの2カラムブログだったので、その通りに作りました。

Twitter Bootstrapで簡単に分割できちゃいます。

single.php

「single.php」は記事の詳細ページです。

ここで表示しているのは記事タイトル、更新日時、カテゴリー、記事詳細です。

ソーシャルメディアのボタンは上下共に同じコードなので、functions.phpに入れて、関数化しました。

					<ul class="inline">
						<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
						<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja" data-via="peter0906">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
						<li class="facebook"><fb:like href="<?php the_permalink(); ?>" send="false" layout="box_count" width="100" show_faces="false"></fb:like></li>
						<li><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
						<li></li>
					</ul>

ちなみにpage.php（固定ページ）の表示もsingle.phpと同じにしています。特に分ける必要性がないからです。