読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【15:1-1 Architects 】オリジナルWordpressテーマ

f:id:seintoseiya:20150611205704p:plain
プロジェクトNo.15:1-1 Architects

知り合いの建築家に頼まれて、オリジナルWordpressテーマを作りました。
勉強しながらの初めての仕事だったので、特別価格の晩飯代だけで手を打ちました。
オーダーメイドで作るのって大変。これはたしかに仕事にできるかも。(まだまだ細い配慮が足りないと思いますが。。。)

HTMLでデモサイトを作成

まずはデモサイトを作って、クライアントに確認。

今回の要望は以下のとおり:

TOP画面

シンプルにメインビジュアル(スライド画像)のみ。
ヘッダーにはタイトルとグローバルメニュー、フッターにはSNSリンクとcopyrightを配置。

about画面

2カラムで日本語と英語を記載したい。

works画面

画像を横並びで表示させたい。
画像の下にキャプションを表示させたい。

blog

別ブログへのリンク。

contact

シンプルなコンタクトフォーム。

スライド画像の実装

jQueryを使って簡単に実現できる方法があったので以下を参考に実装させてもらいました。
jQuery:jQueryで複数の画像をクロスフェードして切り替える | raining

スマホ対応

スマホで見たときにスタイルが崩れない様にmax-widthなどで整えて、
メニューはスマホの場合に下部に移動させることで、押しやすい様に対応しました。

Wordpress用に訂正及びファイルを分割

さて、ここからが本題。
作成したHTML+CSSを元にWordpressテーマ用に作成していきます。

用意するファイルは以下の通り。

  • style.cssスタイルシート
  • index.php:TOP画面
  • header.php:ヘッダー
  • footer.php:フッター
  • single.php:投稿ページ
  • page.php:固定ページ
  • functions.php:各種機能の設定
  • screenshot.png:テーマ選択画面でのサムネイル

CSS

まずはCSSの冒頭に以下の文を追加。

style.css
/*
Theme Name: 1-1arch
Theme URI: http://1-1arch.com/
Description: 1カラムのシンプルなデザイン。固定ページのみに対応しています。メニューボタンはレスポンシブデザインに対応しており、さまざまなデバイス上で表示できます。
Author: Seiya Tanaka
Version: 1.0
*/

: 以降は適宜変更します。
これでWordpressの管理画面からオリジナルテーマを選べる様になります。

index.php, header.php, footer.php, single.php, page.php

headerとfooterはそれぞれのファイルで読み込ませれば良いのですが、
Wordpressの管理画面から編集した内容をどう反映するかは、
テンプレートタグというのを使います。

例えば、固定ページの内容を表示したいのであったら以下の様にします。

page.php
<?php
if (have_posts()) :
	while (have_posts()) :
		the_post();
?>
<div class="post-header">
	<h2>
		<?php  the_title(); ?>
	</h2>
</div>
<div class="post-content">
	<?php the_content(); ?>
</div>

<?php 
	endwhile;
else:
?>

<p>ページはありません</p>

<?php
endif;
?>

メニューを管理画面から変更できる様にする

まずは表示させたい部分に以下のテンプレートタグを追加。

header.php
<?php wp_nav_menu(); ?>

functions.phpに以下の文を追加。

add_theme_support('menus');

これで管理画面に”メニュー”という項目が増えて編集できるはずです。

ヘッダー画像を管理画面から変更できる様にする

これはカスタムヘッダーという機能を使います。
まずは表示させたい部分に以下のテンプレートタグを追加

index.php
<div id="viewer">
	<?php
		$header_images = get_uploaded_header_images();
		if ($header_images) {
			foreach ($header_images as $key => $value)
				echo '<img src="'.$value['url'].'" />';
		}else{
			echo '<img src="'.get_template_directory_uri().'/images/shiga3.jpg" />';
			echo '<img src="'.get_template_directory_uri().'/images/kasamatsu1.jpg" />';
		}
	?>
</div>

functions.phpに以下の文を追加。

functions.php
// カスタムヘッダー画像を設置する
$custom_header_defaults = array(
	'default-image'          => get_bloginfo('template_url').'/images/step.png',
	'width'                  => 1280,
	'height'                 => 563,
	'header-text'            => false,	//ヘッダー画像上にテキストをかぶせる
);
add_theme_support( 'custom-header', $custom_header_defaults );

これで管理画面に”ヘッダー”という項目が増えて編集できるはずです。

固定ページや投稿ページを2カラム(複数カラム)にする

HTML+CSSだけの時はfloatを使って表現できましたが、
Wordpressとなると、編集画面を想像していただけるとわかる通り、2カラムの編集が通常不可能です。
ここはだいぶ悩んだ部分ですが、結果的に一番楽な方法で解決しました。
Page Builder By SiteOriginというプラグインを入れる事で、直感的に編集できるようなインタフェースを提供できます。
直感操作でページ作成!WordPressプラグイン ページビルダー(Page Builder)

これはかなり便利ですね!

コンタクトフォーム

これは日本産の有名なプラグイン「Contact Form 7」を使用させていただきました。
Contact Form 7 | Just another contact form plugin for WordPress. Simple but flexible. [日本語]

シンプルで使いやすいのが特長です。

テーマのインストール

クライアントは既にWordpressの別テーマでWebサイトを運営していたので、
wordpressのthemeディレクトリ直下に新しく作ったテーマのディレクトリを作成して、
そこに全てのファイルを入れた後、管理画面からテーマを選んでもらっただけで反映できました。(もちろんローカル確認した上で)

おわりに

期間は1ヶ月くらいかかりましたが、実際に手を動かしたのは1週間くらいでした。
(デモ画面1日、Wordpressテーマへの変換2日、もろもろ調べ物や微調整4日)

実際にやってみて、クライアントから細い要望がいっぱい出てきて、
Wordpressカスタマイズのニーズって結構あるんだなと感じました。

ソースの中を精査した後、テーマファイルを公開しますので、是非気に入ったら使ってください。

全ソースはこちら

後日公開。