Mar 30 2013

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

By gyoza manner On 2013/03/30 In WordPress

Version : WordPress 3.5.1

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

Pocket

[`evernote` not found]

Euclides

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

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

タグに合わせて自動的にアイコンが表示される

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

チュートリアルに特化した投稿ができる

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

アイキャッチ画像の枠がちょっと好き

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

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

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

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

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

Green Chilli

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

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

<div class="tags"> 
<?php 
	global $post;
	if (is_single() and !is_page())
	{
		$posttags = get_the_tags();	
		if($posttags){
			foreach(get_the_tags() as $the_tag)
			{
				$image_path = TEMPLATEPATH.'/images/icon_'. $the_tag->slug.'.png';
				if ( file_exists( $image_path )) {
					echo '<a href="'.get_home_url().'/archives/tag/'.$the_tag->slug.'/">';
					echo '<img src="'.get_bloginfo('template_url').'/images/icon_'. $the_tag->slug.'.png" />';
					echo '</a>';
				}
			}
		}
	}
?>
</div>

<?php

global $post;

if (is_single() and !is_page())

{

$posttags = get_the_tags();

if($posttags){

foreach(get_the_tags() as $the_tag)

{

$image_path = TEMPLATEPATH.'/images/icon_'. $the_tag->slug.'.png';

if ( file_exists( $image_path )) {

echo '<a href="'.get_home_url().'/archives/tag/'.$the_tag->slug.'/">';

echo '<img src="'.get_bloginfo('template_url').'/images/icon_'. $the_tag->slug.'.png" />';

echo '</a>';

}

</div>

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

Pocket

[`evernote` not found]