Takepepe.com

記念すべき第一回目の投稿です。
このブログでは、新しめのことから、ちょっと流行遅れのことまでいろいろ取り上げていきたいと思います。少し古くても、アイデア次第ではまだまだ面白くなる技術は多数あります。

Google先生と共に技術を蓄えてきたたわけですが、もちろんGoogle先生だけでなく、偉大な先人たちのおかげで多くのことを学びました。改めて敬意を表するとともに、私と同じように、これから独学でWEBデザイン・メディアアートに挑戦しようとしている皆さんの役にたてればと思い、ブログを立ち上げました。というわけで第一回目の投稿は、当ブログでも利用しているWordPressに関する記事です。

ご存知のとおりWordPressはPHPで構成されたブログシステムで、配布されているテーマやプラグインで自前のブログを短時間で簡単に作れてしまいます。多くのレンタルサーバーではボタン一発でインストールが出来たりと、ハードルは低いです。WordPressのインストール方法や便利なプラグインの紹介は既に良記事がたくさんあるので、そちらを参考にしてください。

「Takepepe.com」TOPに用いている表現

このブログでは記事を投稿する際にアイキャッチ画像（以下サムネイル）が選択されていると、ひとつなぎになったグレースケール画像がPHPで生成されるようになっています。わざわざPHPで画像を生成しなくても、CSSやcanvasで実装出来そうですが、今回はこの方法をとっています。具体的な流れは以下の通りです。

記事を投稿する際に、サムネイル生成関数を呼ぶ
生成関数で輝度・彩度の調整をして合成
TOP用のWordPressテンプレートを作成

ブログを手っ取り早く立ち上げたかったため、デフォルトのテーマを直にいじりました。
バックアップなどは自己責任でお願いします

1.記事を投稿する際に、サムネイル生成関数を呼ぶ

post.php に数行追加します。
生成関数は2に記述します。

「wp-admin/post.php」を編集

  
  
// ファイル上部に追加
require_once('./makeTopThum.php');

////// 〜中略〜 //////

// ファイル末に追加
if(has_post_thumbnail($post_id)){ //サムネイルがあった場合
	
	//「makeTopThum.php」に記述されている関数
	makeTopThum(get_the_post_thumbnail($post_id));
	
}

2.生成関数で輝度・彩度の調整をして合成

PHPで画像にフィルターなどかけながら8枚の画像を1つにまとめます。
画像パスの取得はもっと良い方法がありそうですが、とりあえず。
画像生成はそれなりにサーバー負荷がかかりますので、クライアントワーク等に使用する際は気をつけてください。

Before

After

「wp-admin/makeTopThum.php」を新規作成

<?php
function makeTopThum($_img){
	
    $THUM_WIDTH = 160; //サムネイル幅
    $THUM_HEIGHT = 90; //サムネイル高さ
    $NUM = 8; //画像数
	$WIDTH = ($THUM_WIDTH+1)*$NUM; //出力する画像の幅
	$HEIGHT = $THUM_HEIGHT+1; //出力する画像の高さ
	
    
	//出力先の画像を作成
	$dst = imagecreatetruecolor($WIDTH, $HEIGHT);
	
	//白で塗る
	$white = imagecolorallocate($dst, 0xFF, 0xFF, 0xFF);
	imagefill($dst, 0, 0, $white);
	
	//アイキャッチ画像のパス
	preg_match_all("/<img [^>]*src\s*=\s*[\"']?([^\"'> ]+)/i", $_img, $mt);
	$srcs = array_map('htmlspecialchars_decode', $mt[1]);
	$src = $srcs[0];
	
	//画像名の取得
	$index = mb_strrpos($src,"/");
	$name = substr($src, $index+1, -4);
	
	//画像ディレクトリの取得
	$index = mb_strrpos($src,"/");
	$dir = $_SERVER['DOCUMENT_ROOT'];
	$dir .= substr($src, 19, $index-18);
	
	//新画像のパス
	$new = $dir.$name."-top.jpg";
	
	//画像を8つ並べる
	$arr = array(200,150,100,50,0,50,100,150); //輝度配列
	for($i = 0; $i<$NUM ;$i++){
		$thum = imagecreatefromjpeg($src);
		imagefilter($thum, IMG_FILTER_BRIGHTNESS, $arr[$i]); //輝度調整
		imagefilter($thum, IMG_FILTER_GRAYSCALE); //グレースケール変換
		imagecopy($dst, $thum, $i*($THUM_WIDTH+1), 0, 0, 0, $THUM_WIDTH, $THUM_HEIGHT);　//画像配置
		imagedestroy($thum);
	}
	
	//画像保存
	imagejpeg($dst, $new, 100);
	imagedestroy($dst);
	
}

?>

3.TOP用のWordPressテンプレートを作成

最後にTOP用のテンプレートを作成して、CSSを調整すれば完成です。

「wp-content/themes/(利用しているテーマ)/content-top.php」を新規作成



<?php

$title = get_the_title(); //タイトル
$date = get_the_date(); //投稿日
$url = get_permalink(); //パーマリンク

//アイキャッチ画像のパス
$img = get_the_post_thumbnail();

//統合画像のパスに変換
preg_match_all("/<img [^>]*src\s*=\s*[\"']?([^\"'> ]+)/i", $img, $mt);
$srcs = array_map('htmlspecialchars_decode', $mt[1]);
$src = $srcs[0];
$path = substr($src, 19, -4)."-top.jpg";

echo "<a href=\"$url\" style=\"background:url($path);\"><span class=\"title\">$title<span class=\"date\">$date</span></span></a>";

?>

デザイナーの人も、サーバーでPhotoshopみたいに画像を編集出来ることを知っていれば、CMS経由のコンテンツデザインの幅がぐっと広がります。是非、挑戦してみてください。