先日から珍しくWordPressのTipsを連投していたのは、全てこのサービス制作の副産物だったのだよ諸君！

以前「バナーデザインギャラリー」というウェブサービスを作ったんですが、今回はソレをもとにして別モチーフを取り上げた第二弾を作成しました。

その名も「漢字フリーフォントギャラリー」！

サイト名の通り、フリーで配布されている「漢字が使える日本語フォント」だけを集めた、クリエイターに贈るギャラリーサイトです。

前述バナーデザインギャラリーの方はCMS機能を持った管理画面を独自にグリグリ作ってたんですが、今回は敢えてWordPressにして各種プラグインの恩恵に授かりました。

そんなこんなで今回のエントリーは、新サービス「漢字フリーフォントギャラリー」のご紹介と、制作にまつわるエトセトラをば。

漢字フリーフォントギャラリー

まずはざっくり概要

デザイン的には、ほぼバナーデザインギャラリーとおんなじです。

皆様からの漢字フリーフォント情報を頂くためのフォームをページ上部に設置したり、問い合わせページなんかの基本構成もほぼほぼバナーデザインギャラリーと同様。

カテゴリーとしては ゴシック体 / 明朝体 / 手書き風 / その他 という４分類としたほか、商用利用時の課金有無でも分類しました。

また、各フォントの例文について、１行目は「ひらがな + 第一水準漢字」としてあり、２行目は「カタカナ + 第二水準漢字」としつつ、記事単体ページやアーカイブページでは、より大きいサイズの画像が表示されるようにしてあり、そこでは３行目からアルファベットや数字などを例文化してあります。

その生い立ち

都内某所、しがないウェブクリエイターが一人。

およそ半年近く、仕事の合間に作り込んでいったサービスがあり、それが遂になんとかカタチになったのでオープン前に遊んでくれる人を募集したそうな。

ブログエントリーは即座に twitter と facebook に連動投稿され、各所でもリツイートしてくれる方やシェアしてくれる方が現れて。

「何十人も連絡来たらどーしよー」「どんな感想を持ってもらえるんだろ」「楽しんでくれるといいなぁ」ワクワクしながら皆様からのリアクションを待ったそうな。

するとそんな気持ちに答えるかのように、日頃の行いというか人徳というか、なんと２日で０人の応募が！

、、、誤字じゃねーんだコレが＼(^o^)／

「苦渋」「辛酸」そんな言葉の味を知った彼は、おもむろに「ウェブサービス・いつか作りたいネタリスト.txt」を開き、一番最近思いついたネタに颯爽と着手。

------駆け抜ける風圧で、過去を吹き飛ばすかのように。

そして着手から２日後、彼のモニターには「漢字フリーフォントギャラリー」の姿があったとさ。。。

制作過程と技術詳細

怨念を吐き出したところで、本筋に戻りますｗ

そもそもネタ考案段階では、バナーデザインギャラリー（以下BDG）で使ってる自作CMSを流用する予定だったんですが、ふと「そーいやWordPressでサービスつくったコトなかったなー」と思い立ち、実験がてらWordPressで再構築しようと。

デザインやサブページコンテンツはBDGと同じようなモンでいこうと思ってたので、さっそくテーマ作成に着手。

雛形の静的HTMLからテーマ用ファイルに分割

まずBDGのトップページにアクセスして、その静的HTMLをコピーして、header部とsidebar部とfooter部とメインコンテンツ部に分割。

で、メインコンテンツ部以外をそれぞれ header.php / sidebar.php / footer.php として保存、メインコンテンツ部は index.php として保存。

さらにそれぞれ、ベタ書きになっている「画像やJSやCSSのパス」を bloginfo('template_directory') に差し替えたり、metaのタイトル部を wp_title(' | ', true, 'right') に変えたりと、テーマファイルとして適宜修正。

header.php制作

ロゴを変えるのに合わせて一部画像をロゴの配色に沿わせる以外には、特にデザイン周りでイジるモノもなく、機能的にもBDGで搭載してるスターレーティングとかlightboxみたいなJS系はかなり省いたので、かなりスムーズにイケました。

一箇所ちょっとクセがあったのが、ページ上部左にある「現在 xx個 漢字フリーフォント掲載！」の部分。

要は「全ての公開記事数を表示させる」ってコトなので、SQLで直接聞いちゃえ！と。

<?php
$sql = "SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'";
echo $wpdb->get_var($sql);
?>

上記みたくして実装しました。

footer.php制作

ここもそんな苦労なく、シンプルに制作出来ました。

一手間かけたのは、右上のフォームから情報をご提供頂いた際の挙動で、ココはcontact form 7使ってるんですが、エラーにせよ成功にせよ、フェードアウトして欲しかったので、下記のように記述。

<script type="text/javascript">
$(function(){
	var cf7box = $("#entryForm div.wpcf7-response-output");
	if(cf7box[0]){
		setTimeout(function(){
			$(cf7box).fadeOut(2000);
		}, 2000);
	}
});
</script>

コレで「ページ表示の２秒後から、２秒かけてフェードアウト」って感じにできました☆

sidebar.php制作

「カテゴリー別」の部分は、そもそもコレがカテゴリーで登録してあるので wp_list_categories() で書き出すだけでOK。

「商用利用時の課金」は、プラグイン Simple Tags で登録してるので、ソレ専用の関数 st_tag_cloud() で書き出し。

それ以外には特に工夫も細工もなく、至ってシンプルです。

index.php制作

トップページでは「カテゴリー単位でのループ → それぞれ最新５件表示」って流れなので、下記のように記述。

<?php $category_list_array = get_categories(); ?>
<?php foreach($category_list_array as $cat) : ?>
	<?php $apart_posts = new WP_Query(array('order' => 'DESC', 'posts_per_page' => 5, 'category_name' => $cat->slug)); ?>
	<?php if($apart_posts->have_posts()) : ?>
			<div class="bannerWrap">
				<div class="bannerFormat">
					<h2><span><?php echo $cat->name; ?> の漢字フリーフォント</span></h2>
				</div>
		<?php while($apart_posts->have_posts()) : $apart_posts->the_post(); ?>
				<div class="bannerBox bn728_90">
					<div class="bannerInfo">
						<p><a href="<?php echo get_post_meta($post->ID, 'カスタムフィールドの値', true); ?>" target="_blank" rel="nofollow"><?php the_title(); ?></a></p>
						<dl>
							<dt>[Category]</dt>
							<dd><?php the_category(' '); ?></dd>
							<dt>[License]</dt>
							<dd><?php the_tags(' '); ?></dd>
						</dl>
					</div>
					<p class="bannerImg"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail($post->ID, '自作サムネサイズの名称'); ?></a></p>
				</div>
		<?php endwhile; ?>
				<p class="moreRead">&raquo; <?php the_category(' '); ?> の漢字フリーフォント 一覧へ</p>
			</div>
	<?php endif; ?>
<?php endforeach; ?>

カスタムフィールドは「配布元のURL」を登録できるようにしてあるほか、サムネは２種類（フルサイズと、例文２行分サイズ）生成してあって、トップページでは２行分の方を出力したいので、こんな感じに。

ちなみに「２行分サイズの画像」は、アイキャッチ登録時に自動で生成するように functions.php に下記のように設定しました。

add_theme_support( 'post-thumbnails' );
add_image_size( 'index_thumbnail', 728, 130, true);

んで、これだとアップロードした画像の「天地中央」で切り抜かれちゃってアレなので、先日エントリーした「切り抜きの基準点を左上にする方法」を用いた、と。

archive.php制作

お次はアーカイブページですが、ここではフツーのページネーションじゃなく、AJAXで同ページ内に読みこむような感じにしたかったので、これまた先日のエントリー「AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法」のような手法を取りました。

あと、カテゴリーでもタグでも同じテンプレートを使いたかったので、h2表示部分は下記のように対応。

<?php if(is_category()) : ?>
	<?php $title_base_ojt = get_the_category(); $title_str = $title_base_ojt[0]->cat_name; ?>
<?php elseif(is_tag()) : ?>
	<?php $title_str = '商用利用時 '.single_tag_title('', false); ?>
<?php endif; ?>
<h2><span><?php echo $title_str; ?> の漢字フリーフォント</span></h2>

single.php制作

ここはホントにスタンダードなsingle.phpです。

使用プラグイン

標準搭載の Akismet は、そもそもコメントが無い仕組みなので無効化してるので、現状で有効化してるのは下記８つ。

• All in One SEO Pack
• Contact Form 7
• Custom Field Template
• Simple Post Templates
• Simple Tags
• WordPress Importer
• WP Multibyte Patch
• WP Super Cache

そんなこんなで作りました当サービス、どうぞお楽しみ下さい♪

漢字フリーフォントギャラリー