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

スポンサーリンク

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

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

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

 

このページの目次

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

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

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

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

Bootstrap

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

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

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

single.php

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

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

Hello world

ソーシャルメディアのボタンは上下共に同じコードなので、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と同じにしています。特に分ける必要性がないからです。

サイドバー

サイドバーはデフォルトでついているウィジェット機能を使って、必要なものをつけていきました。

カレンダー、最近の投稿、カテゴリー、アーカイブなどです。

ウィジェットにしておけば、自分でカスタマイズしやすいですよね。

サイドバー

トップページ、カテゴリー、アーカイブページはまとめる

トップページ、カテゴリー一覧、アーカイブ一覧のページは同じ表示の仕方なので、同じコードを1つのファイルにして、テンプレートファイルを呼ぶようにしています。

「loop.php」というのを作って、トップページ、カテゴリー一覧、アーカイブ一覧それぞれから呼び出しています。

<?php get_template_part('loop', ''); ?>

一覧ページでは記事の内容を全て表示するようにしました。個人で過去のことを振り返るのにも使いたいとのことだったので、いちいち「続きを読む」にする必要がないからです。

ここまでやると、それなりにブログっぽい見た目になってきます。

入れたプラグイン

最後に必要なプラグインを入れて、少し手を施せば完了です。

今回作ったブログに必要なプラグインを紹介しますね。

Akismet

スパムコメント対策のプラグインです。これはデフォルトで入っているやつですね。必須。

All in One SEO Pack

なくてもいいかと思いましたが、カテゴリーページやアーカイブページを簡単にnoindexにできるので、そのために入れました。ページをnoindexにする手順は別記事に書いています。

Contact Form 7

お問い合わせページ用に作りました。個人での振り返りがメインなので、なくても良かったかもしれません。

Feedback Champuru

コメント欄が賑やかになるプラグイン、はてブやTwitterでのコメントも表示されるので便利です。

Google XML Sitemaps

記事を検索エンジンにインデックスさせるために入れました。

Head Cleaner

ヘッダーのソースコードを簡略化するために入れました。何かと便利です。これ。

TinyMCE Advanced

記事を書く時のために入れました。これがあるとHTMLを手打ちする機会が減ります。

WP-PageNavi

記事が増えてきた時のページ遷移のために入れました。

WP Multibyte Patch

デフォルトで入っている2バイト文字に対応させるプラグイン。これは必須。

WPtouch

スマホでの表示用に。記事を読むのがメインなので入れました。

Yet Another Related Posts Plugin

関連記事の表示に。関連記事がない時は何も表示せず、記事数が増えれば自動的に表示されるようにしています。

他にもちょこちょことプラグインを入れていますが、最低限必要なプラグインってこれぐらいではないでしょうか。

思ったよりもすぐにできる

実際にこんなに短時間でブログを作ったのは初めてでした。思ったよりもすぐにできるものですね。自分でもびっくりしました。

ブログをお見せしたいところですが、ひっそりとされたいとのことなので、上で出てきたような画像の感じになっていると思ってください。