Mar 30 2013

このブログで使っている WordPress テーマについて

Version : WordPress 3.5.1
スクリーンショット_2013_03_30_21_35

技術系ブログに適した Euclides というテーマを使っていたのですが、レスポンシブではなかったのとデザインの好みの問題で Green Chilli というテーマに変更しました。さらに Green Chilli に Euclides のよいところを取り入れるべくカスタマイズ…というお話です。


Pocket

このブログでは、当初 Euclides というテーマを使っていました。

スクリーンショット_2013_03_30_18_39

 

このテーマを気に入ったのは次の理由から。

スクリーンショット_2013_03_30_18_34-2

投稿のときに付けたタグに合わせてタグバッジが自動的に表示されるのがちょっとカッコイイなと思いまして。タグに対応したバッジ画像はあらかじめ用意しておく必要がありますが、最初から PHP, Java, MySQL などなど 28 種類のバッジが用意されています。

スクリーンショット_2013_03_30_18_50

記事の投稿時にチュートリアルチェックを付けると、デモへのリンク、ソースのダウンロード先、学習の難易度、学習にかかる時間、教師の名前を入力するよう促されるので入力を行なってから投稿すると、上図のようなチュートリアル情報がついた投稿として表示されます。

スクリーンショット_2013_03_30_19_01

正直どうってことないのですが、正方形のポラロイド風といいますか最近だと instagram 的なといいますか、ちょっといいなと。

 

そんなわけで、まずは Euclides テーマを自分好みにさらにカスタマイズを始めたわけなのですが、しばらくして気づきました。

これ、レスポンシブじゃない!

スマホで見るとぜんぜん最適化されていないじゃないですか。テーマを探しているときに、レスポンシブなやつを探してたどり着いたはずなのでてっきりレスポンシブテーマだと思っていましたよ。おかしいなぁ。

よくよく考えてみると、チュートリアル投稿なんて自分の備忘録のためには必要ないし、アイキャッチ画像の枠なんぞ他のテーマでもカッコイイのはあるだろうし、それよりもよっぽどレスポンシブであることの方が重要ですわな。タグに合わせて自動的にタグバッジが付くアイディアは捨てがたいけど、他のテーマにこの機能だけ自分で組み込めばいいわけだし。

 

再度レスポンシブでクールな感じなテーマをあちこち探しまして、今日現在 Green Chilli  を使っています。もともと有料のテーマをたくさん扱っている会社ですが、Green Chilli は無料で使えます。有料のテーマを手がけているだけあって、無料でもクオリティが高いっす(たぶん)。

スクリーンショット_2013_03_30_19_25

 

このテーマにタグに合わせて自動的にタグバッジを付ける機能を追加するために、greenchilli フォルダの下の index.php, single.php, archive.php の <header></header>の中に下記のコードを追加しました。

greenchili/images/ の下に [タグ名].png というファイルを用意しておけば、そのタグが付いた記事には自動的にその画像バッジが付きます。正確に書くとタグではなくタグに対応したスラッグを使用しています。例えば iOS というタグは実際には ios という英小文字だけで記述されたスラッグを使いますので ios.png を用意しておきます。

 

Pocket

コメントを残す